2024.10.21

고객센터 채팅과 알림, 배달 실시간 정보 제공은 어떻게 이루어지는가 - WebSocket

Web Socket이란

Web Socket은 전이중 통신 프로토콜(Full duplex)로써, 채팅, 알림, 음성 또는 화상 통화 같은 실시간 애플리케이션에 적합한 통신 방식이다. 웹 소켓을 사용하면 서버와 클라이언트 간에 양방향 대화형 통신 세션을 열 수 있다. 서버에 메시지를 보내고 응답을 위해 서버를 Polling하지 않아도 응답을 받을 수 있다.

WebSocket 구성요소

WebSocket Protocol

프로토콜: ws:// (port: 80), wss:// (port: 443)
핸드쉐이크
- Request: 클라이언트가 Websocket 서버에 HTTP 요청을 보낸다.
- Header: Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: 클라이언트에서 생성한 Base64 인코딩된 임의의 문자열 Sec-WebSocket-Version: WebSocket 프로토콜 버전 (최소 13)
- Response: 101 Switching Protocols

메시지 프레임 구조

메시지는 여러 frame으로 전송 된다. 각 frame의 구조는 다음과 같다.
- FIN bit: 메시지의 마지막 프레임인지 여부(1bit)
- Reserved bits: 후속 확장을 위해 예약된 bits(3bit)
- OpCode: 메시지의 타입을 나타내는 코드(text, binary, close 등) (4bit)
- Mask: 클라이언트가 메시지를 masking했는지 여부(1bit)
- Masking Key(클라이언트에서 전송하는 경우): 4bytes의 key(masking이 적용된 경우)
- Payload Length: payload의 길이 (7, 7+16, 7+64 bit 중 선택)
- Payload Data: 전송할 데이터

WebSocket API

소켓은 다음과 같이 생성한다.

const socket = new WebSocket("ws://suitee.me");

소켓의 이벤트

open - 커넥션이 제대로 만들어 졌을 때 발생
message - 데이터를 수신했을 때 발생
error - 에러가 생겼을 때 발생
close - 커넥션이 종료되었을 때 발생

정상적인 생명주기의 소켓은 open-message-close의 순서로 이벤트가 진행된다.

소켓의 메서드

send(data): 서버에 메시지를 전송
close(code, reason): 연결을 닫음

소켓의 연결 종료 코드

1000 - 정상 종료를 의미
1006 - 커넥션이 유실되었음을 의미
1001 - 연결 주체 중 하나가 떠남을 의미
1009 - 메시지가 너무 큼을 의미
1011 - 서버 측에서 비정상적인 에러 발생

vs HTTP - 실시간 애플리케이션 관점

HTTP는 Request-Response 프로토콜로써 클라이언트가 서버에 Request를 요청하고 Response를 제공 받을때까지 Polling합니다. 응답을 받으면 통신이 종료된다. HTTP가 열려있는 동안에는 반이중 통신만 가능하여 통신이 단방향으로만 진행된다. *HTTP/2, HTTP/3은 기본적으로 연결을 유지하고 이 상태에서 여러 요청을 동시에 보낼 수 있다.(Multiflexing) 하지만 실시간 채팅과 이벤트 스트리밍과 같은 실시간 통신을 위한 용도는 아니다.

HTTP

HTTP는 상태가 없고 독립적이기 때문에 정적 콘텐츠나 데이터의 응답을 캐싱하면 웹사이트 성능이 향상될 수 있다.
HTTP 연결은 Long Polling을 통해 실시간과 유사한 기능을 만들 수 있다. 하지만 HTTP요청은 무기한 열려있을 수 없고, 클라이언트는 정기적으로 새로운 Long Polling을 열어야 한다.
HTTP Streaming을 사용하면 지속적인 데이터 스트림을 위해 연결이 무기한 열린 상태로 유지되고 개념적으론 WebSocket과 비슷하지만, HTTP이기 때문에 여전히 단방향이다. 클라이언트는 HTTP Streaming을 통해 서버에 메시지를 보낼 수 없다.
HTTP는 3way handshaking, 세션 수명동안 여러 연결을 처리해야 하기 때문에 WebSocket에 비해 더 많은 시간과 리소스를 소비하게 된다.

Web Socket

연결된 상태에서 양쪽이 언제든 메시지를 보낼 수 있기 때문에 데이터를 빠르게 주고 받아야 할 때 효과적이다.
Web Socket은 서버가 전이중 채널에서 통신하기 때문에 클라이언트, 서버 모두 오랫동안 지속되는 연결 환경에서 동시에 데이터를 보낼 수 있고, 이로인해 HTTP Polling에 비해 오버헤드가 적다.
Polling 과정 없이 사용 가능한 데이터가 즉시 전송되기 때문에 클라이언트가 계속 Request할 필요가 없다.
HTTP와 다르게 상태가 존재하기 때문에 연결이 활성화된 상태인지 어떤 데이터를 보고있는지 등의 정보를 유지할 수 있다.

Appendix

https://ko.javascript.info/websocket https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API https://sendbird.com/ko/developer/tutorials/websocket-vs-http-communication-protocols

Follow to @yoon.homme