slack을 클론코딩하기 전에 웹소켓의 동작원리와 웹소켓이 해결하는 문제가 무엇인지 알아보겠습니다.
이 포스트는 https://ko.javascript.info/websocket 을 요약한 글입니다.
Why WebSocket
웹소켓은 HTTP의 한계를 해결하기 위해서 등장했습니다. HTTP는 단방향 프로토콜이므로 반드시 client에서의 요청이 있어야지만 server로부터 데이터를 응답받을 수 있는 구조이죠. 이에 대한 해결방법으로 long-polling을 전통적으로 사용해왔습니다. 그러나 long-polling방식은 요청이 서버에 묶여있는 timeout동안 그에 대한 response를 서버에 저장해야하므로 서버 리소스를 사용하는 한계점을 가지고 있습니다. 웹소켓은 response를 받은후에도 TCP 커넥션이 살아있기 때문에 real time 어플리케이션에서 많이 활용됩니다.
What is Web Socket?
웹소켓은 클라이언트와 서버간 양방향 통신을 할 수 있는 지속적인 통신 프로토콜입니다. HTTP와 웹소켓 프로토콜 모두 어플리케이션 계층에 있으며 4계층으로 구성된 TCP/IP에 의존합니다.
웹소켓은 HTTP 80, 443포트 위에서 동작하며, HTTP프로토콜과 호환을 위해 웹소켓 핸드셰이크는 HTTP업그레이드 헤더를 사용한다고 합니다.
웹소켓 핸드셰이크
TCP의 핸드셰이크 처럼 웹소켓도 핸드셰이크를 통해 통신이 가능한지 묻습니다. 핸드셰이크 과정에서 최초 요청의 헤더를 살펴보면 다음과 같습니다.
GET /chat
Host: javascript.info
Origin: https://javascript.info
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13위의 헤더는 new WebSocket("wss://javascript.info/chat") 이 호출됐을때의 요청헤더입니다.
- Connection : 업그레이를 목적으로 하는 요청입니다.
- Upgrade : client가 업그레이드 되길 원하는 프로토콜입니다.
- Sec-WebSocket-Key : 브라우저에서 생성한 키입니다.
- Sec-WebSocket-Version : 웹소켓 프로토콜 버전입니다.
서버가 클라이언트에게 웹소켓 프로토콜로 업그레이드하는 것을 승인했다면 아래와 같은 응답 헤더를 반환합니다.
101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=- Sec-WebSocket-Accept : 위에서 본 Sec-WebSocket-Key와 대응되는 헤더입니다.
이 외에도 웹소켓은 Sec-WebSocket-Extensions Sec-WebSocket-Protocol 헤더를 지원합니다.
Sec-WebSocket-Extensions: 브라우저에서 데이터 압축을 지원한다는 것을 의미합니다. (ex. deflate-frame)Sec-WebSocket-Protocol: 만약soap나wamp로 헤더가 설정됐다면 웹소켓을 통해 평범한 데이터가 아닌 데이터의 압축을 지원한다는 것을 의미합니다.
소감
며칠전부터 네트워크 공부를 시작했는데 웹소켓을 공부하면서 이전에는 몰랐을법한 개념과 용어들이 이제는 이해되고 보이기 시작했다. 이래서 cs를 깊게 공부해야한다는 말이 있나보다.
