WebSocket 의 등장: 완전한 양방향 통신

연결 하나로 오가는 진짜 양방향 통신

WebSocket 은 양쪽이 비동기적으로 메시지를 자주 보내야 할 때 빛을 발해. 핸드셰이크가 끝나면 어느 쪽이든 원하는 순간에 메시지를 보낼 수 있지. 요청과 응답이라는 짝도 없어. 하나의 TCP 연결 위로 프레임 이 양방향으로 흐르고, 어느 한쪽이 닫을 때까지 연결이 유지돼.

프로토콜 전환 핸드셰이크

WebSocket 연결은 특별한 헤더를 담은 HTTP/1.1 GET 요청으로 시작해. 서버가 101 Switching Protocols 로 응답하면 같은 소켓에서 더는 HTTP 를 쓰지 않아. 그 순간부터 네트워크를 오가는 바이트는 RFC 6455 가 정의한 WebSocket 프레임이야.

ws:// 와 wss://

ws:// 는 암호화하지 않는 연결로 기본 포트가 80이고, wss:// 는 TLS 로 감싼 연결로 보통 443 포트를 써. 운영 환경에서는 반드시 wss:// 를 사용해야 해. 암호화하지 않은 WebSocket 을 차단하는 프록시와 사내 방화벽이 많을 뿐 아니라, 채팅 내용이나 인증 토큰을 평문으로 흘릴 이유도 없으니까.

Code

네트워크에서 보이는 프로토콜 전환·http

# Client request
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: https://example.com

# Server response (handshake accepted)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

WebSocket 연결에서의 메시지 왕복·text

Client                          Server
  |                                |
  |---- HTTP Upgrade Request ----->|
  |<--- 101 Switching Protocols ---|
  |                                |
  |======= WebSocket OPEN =========|
  |                                |
  |---- "hello" ------------------>|
  |<--- "hi there" ----------------|
  |<--- "news update" -------------|   server pushes anytime
  |---- "typing..." -------------->|   client pushes anytime
  |<--- "user joined" -------------|
  |---- close 1000 -------------->|
  |<--- close 1000 ----------------|
  |======= CLOSED =================|

Exercise

https://websocket.org/tools/websocket-echo-server/ 또는 신뢰할 수 있는 에코 서버를 열어. 개발자 도구의 네트워크 패널에서 WebSocket 프로토콜 전환을 찾아 요청의 Sec-WebSocket-Key 와 응답의 Sec-WebSocket-Accept 를 확인해 봐. 다음 레슨에서는 두 값의 관계를 직접 계산할 거야.