C.W.K.
Stream
Lesson 05 of 08 · published

들어와 WebSocket: Full Duplex

~14 min · foundations, websocket, handshake

Level 0Poller
0 XP0/60 lessons0/10 achievements
0/120 XP to next level120 XP to go0% complete

진짜 양방향, persistent

WebSocket 은 양쪽이 자주, 비동기로 message 보내야 할 때 손이 가. handshake 끝나면 어느 쪽이든 아무 때나 쓸 수 있어. 'request' 나 'response' 개념 없어 — frame 이 양방향으로 흐르는 단일 TCP connection, 누가 닫을 때까지 열려있어.

Upgrade handshake

WebSocket 은 특별한 헤더 가진 HTTP/1.1 GET 으로 시작해. 서버가 101 Switching Protocols 로 답하면 같은 socket 이 HTTP 그만 말해. 그 순간부터 wire 위 바이트는 RFC 6455 가 정의한 WebSocket frame 이야.

ws:// vs wss://

ws:// 는 unencrypted (port 80 default), wss:// 는 TLS-wrapped (port 443). production 에선 무조건 wss://. 많은 proxy 와 corporate firewall 이 unencrypted WebSocket 그냥 떨어뜨려. 정책 빼고 봐도 chat 이나 auth token 을 cleartext 로 넘기고 싶지 않을 거야.

Code

wire 에서 upgrade 가 어떻게 보이는지·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 땅에서의 round-trip·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 =================|

External links

Exercise

https://websocket.org/tools/websocket-echo-server/ 열어 (또는 신뢰하는 echo 서버). network panel 열고 WebSocket upgrade 봐. request 펼쳐서 Sec-WebSocket-Key 와 응답의 Sec-WebSocket-Accept 찾아. 다음 lesson 에서 둘 사이 관계 직접 계산할 거야.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.