기존 HTTP 프로토콜은 요청과 응답으로 통신을 하는 것이다. 그러나 언제부턴가 웹에서는 채팅과 같은 실시간 통신이 가능하다는 것을 경험하였다. 어떻게 양방향 통신이 가능했는지에 대해서 정리해보고, HTML5 부터 표준이 된 WebSocket 프로토콜에대해서 알아보자.
HTTP 프로토콜은 가장 성공적이 프로토콜이라 한다. 하지만 인터넷이 발달하면서 점차 사람들은 더 많은것을 원하기 시작하였다. 채팅과 같은 지속적인 양방향 통신말이다. 하지만 HTTP프로토콜은 클라이언트에서 먼저 요청을 보내야만 그에 대한 응답을 받을 수 있기 때문에 연결이 유지되는 것은 불가능하다고 볼 수 있다.
그렇게해서 연결을 유지하는 WebSocket이 아닌 우선 비슷한 효과를 내는 HTTP 방식인 Polling, Long Polling, Streaming에 대해서 알아보자.
클라이언트에서 일정 주기마다 요청을 보내고 서버는 현재 상태를 바로 응답하는 방식이라고 한다. 이 방식은 실시간으로 반영되는 것이 중요한 서비스에는 좋지 않고, 서버에서 변화가 없더라도 매 요청마다 응답을 내려주기 때문에 불필요한 트래픽이 발생한다고 한다.
클라이언트에서 요청을 보내고 서버에서 이벤트가 발생했을 때 응답을 내려주고, 클라이언트는 응답을 받고 다시 다음 응답을 기다리는 요청을 보내는 방식이라고 한다. 실시간 반응이 가능하고 polling에 비해서 불필요한 트래픽은 유발하지 않지만 이벤트가 잦아지면 과부하가 발생한다.
이벤트가 발생했을때 응답을 내려주는데 응답을 완료시키지 않고 계속 연결을 유지하는 방식이라고 한다.
Long Polling에 비해 응답마다 다시 요청하지 않아도 되므로 효율적이지만, 클라이언트에서 서버로의 데이터 송신이 어렵고, 연결 시간이 길어질 수록 연결의 유효성 관리의 부담이 발생한다고 한다.
위 3가지 방법으로 양방향 통신을 구현하였으나 HTML5에 들어서 websoket 프로토콜이 표준으로 등록되어 이를 이용하여 서버-클라이언트간의 양방향 통신을 구현 할 수도 있게 되었다고 한다.
웹소켓 프로토콜로 연결하기 위에서는 http or https 프로토로로 요청과 응답을 통해 연결하게 된다. 이것을 핸드 쉐이킹
이라고 한다. websocket 연결 요청 예시에 대해 정리해보자.
websocket 요청시 http request 헤더 예시
GET /chat HTTP/1.1
Host: backend.abc.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhJHNhDL1BsLkh25BhXZQ==
Origin: http://abc.com
Sec-WebSocket-Protocol: chat, soap
Sec-WebSocket-Version: 1
GET /chat HTTP/1.1
Get 메서드로 요청 해야하며 HTTP 버전은 1.1 이상을 의미한다.
Host: backend.abc.com
웹 서버 주소
Upgrade: websocket
현재 프로토콜에서 websocket 프로토콜로 업그레이드, 즉 변경을 의미한다.
Connection: Upgrade
Upgrade 헤더 필드가 명시 되어 있을 경우, 송신자는 반드시 Upgrade 옵션을 지정하여 헤더에 포함하여야 한다.
Sec-WebSocket-Key: dGhJHNhDL1BsLkh25BhXZQ==
Sec-WebSocket-Key로 클라이언트와 서버간에 서로를 인증한다.
Origin: http://abc.com
클라이언트 주소
Sec-WebSocket-Protocol: chat, soap
서브 프로토콜이라고 저렇게 여러개 보낼 수 있다고 하는데, 서버에서는 서브프로토콜중 하나만 보내거나 지원하지 않을 경우 프로토콜을 헤더에서 지워서 보내야 한다.(MDN 웹소켓 서버 작성하기 - 서브프로토콜 중)
다음은 응답에 대한 예시이다.
websocket 응답시 http request 헤더 예시
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: e3prc0sMlxakAGmmQ9PpG2HaxOo=
Sec-WebSocket-Protocol: chat
핸드 쉐이크
가 끝나면 http/https프로토콜에서 ws/wss프로토콜로 변경된다. ws/wss 프로토콜도 http/https 프로토콜과 같이 SSL 적용이 가능하다고 한다. 이제 서로 통신을 해야하는 Message
단위로 커뮤니케이션을 하는데, 이것은 한개 이상의 frame
으로 이루어져 있다.
frame
은 통신의 가장작은 데이터 단위라고 한다. 작은 헤더와 payload를 포함한다고 한다. 여기서 작은 헤더는 http/https 헤더에 비교하여 작기 때문이다. 그만큼 양방향 통신을 가볍게 하기위함이라고 생각한다.
0 1 2 3
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
4 5 6 7
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
8 9 10 11
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
12 13 14 15
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
위는 frame header를 비트순으로 표현한것이다. 0비트 부터 정리하자면 아래와 같다.
STOMP
라고 한다.웹소켓에 대해서 간략하게 알아보았다. 다음에는 구현해봐야겠다.
[웹소켓에 대해 알아보자, Tecoble, 2022년08월22일 접속]
https://tecoble.techcourse.co.kr/post/2020-09-20-websocket/
[websocket, socket.io를 이용한 양방향 통신, Zych1751 삼성소프트웨어멤버십 블로그, 2022년08월22일 접속]
http://www.secmem.org/blog/2019/08/17/websocket-socketio/
[[10분 테코톡] 🧲코일의 Web Socket, 우아한Tech, 2022년08월22일 접속]
https://youtu.be/MPQHvwPxDUw
[웹소켓 서버 작성하기, MDN, 2022년08월22일 접속]
https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#%EC%84%9C%EB%B8%8C%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C
[웹소켓 헤더, 프레임 분석 (websocket header, frame),https://alnova2.tistory.com/915 [몽상가:티스토리], 2022년08월22일 접속]
https://alnova2.tistory.com/915
[[Network/OS] Network Socket(IP Socket, WebSocket), https://shinjam.tistory.com/entry/NetworkOS-Network-SocketIP-Socket-WebSocket [잼있는 블로그:티스토리], 2022년08월24일 접속]
https://shinjam.tistory.com/entry/NetworkOS-Network-SocketIP-Socket-WebSocket
[[바미] Web Socket에 대해 알아보자!, https://codesk.tistory.com/, 2022년08월24일 접속]
https://codesk.tistory.com/57