Connection 만들기

한 줄이면 문이 열려

브라우저 WebSocket constructor 는 충격적으로 작아. new WebSocket(url) 이 즉시 upgrade handshake 시작하고, constructor 는 동기로 리턴하는 동안 connection 이 백그라운드에서 협상해. open 이벤트 뜨기 전엔 아무 것도 send 못 해 — 그래도 객체는 존재하니까 listener 붙여놓을 수 있어.

Subprotocol

두 번째 인자는 subprotocol 이름의 string 또는 array. 서버가 handshake 중 하나 골라 (또는 다 reject). graphql-ws, graphql-transport-ws, mqtt 가 흔해. open 후엔 ws.protocol 이 서버가 받은 거 알려줘.

URL 의 auth

네이티브 WebSocket constructor 는 custom HTTP 헤더 못 박아 — fetch option 같은 거 없어. 그래서 대부분의 팀이 auth token 을 URL query parameter 로 넘겨. wss:// 면 ok (URL 이 wire 위에서 암호화) 근데 query string 은 server access log 에 잘 남아, long-lived secret 넘기지 마 — short-lived signed token 넘겨.

Code

Constructor 변형·javascript

// Plain
const ws = new WebSocket('ws://localhost:8000/ws');

// TLS for production
const wss = new WebSocket('wss://api.example.com/ws');

// With auth token in the query string
const auth = new WebSocket(
  'wss://api.example.com/ws?token=' + encodeURIComponent(jwt)
);

// Subprotocol negotiation
const sub = new WebSocket(
  'wss://api.example.com/ws',
  ['graphql-transport-ws', 'graphql-ws']
);
sub.addEventListener('open', () => {
  console.log('server picked:', sub.protocol);
});

readyState 전이·javascript

const ws = new WebSocket('ws://localhost:8000/ws');

console.log(ws.readyState); // 0 (CONNECTING) — synchronous return

ws.addEventListener('open', () => {
  console.log(ws.readyState);  // 1 (OPEN)
  console.log(ws.protocol);    // selected subprotocol or ''
  console.log(ws.url);         // 'ws://localhost:8000/ws'
  console.log(ws.extensions);  // negotiated extensions or ''
});

Exercise

wss://echo.websocket.org/ (또는 echo service 아무거나) devtools 에서 열어. WebSocket 만들고 즉시 readyState 로그, open handler 안에서 또 한 번, open 후 100ms 뒤 또. 동기-vs-비동기 전이 확인. 그 다음 실서버의 존재 안 하는 path 로 connect — readyState 가 0 에서 3 로 1 안 거치고 점프하는 거 봐.