Connection 이벤트

네 개 이벤트, 그게 전부

브라우저 WebSocket 노출하는 이벤트 정확히 네 개: open, message, error, close. on* property (handler 1개) 또는 addEventListener (multi handler, 추천) 둘 다 ok. connecting 이벤트 없고 reconnect 이벤트 없고 pong 이벤트 없고 — 다 직접 만들 거야.

발화 순서

정상 세션: open → message* → close. handshake 실패: error → close. runtime drop: ...message → error → close. 결정적으로 error 가 close 보다 항상 먼저 떨어지는데, error 는 의도적으로 별로 안 노출해 — 보안상 브라우저가 connection 실패 이유 안 leak 해. close code 와 reason 알려면 close 이벤트 봐.

받는 것

message 의 event.data 는 string (text frame), Blob (binary 의 default), ArrayBuffer (ws.binaryType = 'arraybuffer' 설정 시) 중 하나. close 이벤트의 event.code, event.reason, event.wasClean 가 어떻게 끝났는지 알려줘.

Code

네 이벤트 전부 wiring·javascript

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

ws.addEventListener('open', () => {
  console.log('connected, sending greeting');
  ws.send(JSON.stringify({ type: 'hello' }));
});

ws.addEventListener('message', (event) => {
  // event.data: string | Blob | ArrayBuffer
  if (typeof event.data === 'string') {
    console.log('text:', event.data);
  } else {
    console.log('binary frame, bytes:', event.data.size ?? event.data.byteLength);
  }
});

ws.addEventListener('error', () => {
  // Deliberately opaque. Look at the close event for details.
  console.warn('ws error (details in close)');
});

ws.addEventListener('close', (event) => {
  console.log('closed', {
    code:     event.code,
    reason:   event.reason,
    wasClean: event.wasClean,
  });
});

Listener 제대로 제거·javascript

function onMessage(e) { console.log(e.data); }
ws.addEventListener('message', onMessage);
// later...
ws.removeEventListener('message', onMessage);

네 개 이벤트, 그게 전부

발화 순서

받는 것

Code

External links

Exercise

Progress

댓글 0