채팅 시스템 구현을 위한 WebSocket 과 STOMP 프로토콜

싸피에서 1학기 최종 프로젝트를 진행하며 채팅 시스템의 구현을 계획했다
물론 어떻게 채팅 시스템을 구현하는지 시스템 구조나 프로토콜에 대한 기반 지식이 하나도 없었기 때문에 처음부터 공부해야 했다

전형적인 웹 통신 프로토콜인 HTTP를 사용하더라도 채팅(의 모습을 흉내낸) 시스템을 만들수야 있겠지만
HTTP의 Stateless 특성때문에 메시지의 송수신이 반복될 때 마다 connection이 생성되었다 끊어졌다를 반복하는 것 보다는 메시징 처리에 더 적합한 프로토콜과 구현 방식이 존재할 것 같았고, 존재했다

그래서 HTML5 표준안에 존재하는 WebSocket을 이용해 실시간 서비스를 구현하기로 했고, 메시징 처리 프로토콜인 STOMP를 사용하게 되었다

WebSocket Connection 방식

웹소켓은 사용자간의 실시간 상호작용 웹 서비스의 선호도가 증가하면서 등장한 통신 프로토콜이다
기존에는 Hidden Frame, Long Pooling, Stream 등의 방법을 이용해서 웹 서비스의 상호작용을 구현했다. 이러한 방식들은 HTTP Request & Response의 규칙 위에서 동작했다.
그렇기 때문에 실시간성의 보장이 힘들고, 불필요한 오버헤드가 많다는 단점이 존재했다.
하지만 웹 소켓은 socket을 열어 Connection을 유지하고 자유로운 양방향 메시지 송수신을 지원하여 Request-Response 방식보다 더 간결하게 데이터를 교환할 수 있다

GET /... HTTP/1.1 Upgrade: WebSocket Connection: Upgrade 

HTTP Protocol과의 호환을 위해 위와 같은 헤더를 사용하여 웹 서버에 요청을 보낸다
이러한 헤더와 함께 랜덤하게 생성한 키를 서버에 전송하고, 해당 키를 이용해 토큰을 생성해서 브라우저에 응답하는 방식으로 핸드셰이크가 이루어진다.
WebSocket이 가진 HTTP 프로토콜과 대비되는 가장 큰 특징은 결국 전이중 통신이라고 할 수 있다
클라이언트 - 서버 간 커넥션을 지속적으로 유지하기 때문에 실시간 웹 서비스에 적합하지만 연결된 수 만큼 대용량 트래픽을 감수해야 한다는 단점이 있다(그렇기 때문에 서비스 규모가 커지면 성능 튜닝이 필수적일 듯 하다)

websocket을 지원하는 브라우저들

우리는 6일이라는 한정된 기간 안에 WebSocket(사실 동작 방식을 완전히 이해하지도 못한 채로)을 서비스에 적용해야 했었어서, 메시징 처리를 도와줄 STOMP 프로토콜을 도입했다
STOMP란 Simple Text Oriented Messaging Protocol의 줄임말로, WebSocket 위에 존재하는 low-level 프로토콜이다
STOMP는 Topic에 대한 Publish/Subscribe를 이용해 메시징 처리를 손쉽게 구현할 수 있도록 도와준다

위의 그림과 같이 message를 send하면 메시지 브로커가 해당 topic에 대해 subscribe한 사용자를 구분해 메시지를 전달하는 구조이다
(나머지 설명은 내일 이어서 ...🥱)

우리 팀의 WebSocket Config

출처:

https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93

https://d2.naver.com/helloworld/1336

https://html.spec.whatwg.org/multipage/web-sockets.html

https://en.wikipedia.org/wiki/Streaming_Text_Oriented_Messaging_Protocol

https://stomp.github.io/

https://swiftymind.tistory.com/105