연결 이벤트 다루기

이벤트는 정확히 네 개야

브라우저 WebSocket 이 제공하는 이벤트는 open, message, error, close 네 개뿐이야. 처리기 1개를 두는 on* 속성과 여러 처리기를 달 수 있는 addEventListener 를 모두 쓸 수 있지만, 보통 후자를 권해. connecting 도 reconnect 도 pong 도 없으니 필요하다면 직접 만들어야 해.

이벤트 발생 순서

정상 세션은 open → message* → close, 핸드셰이크 실패는 error → close, 실행 중 연결 단절은 ...message → error → close 순서로 흘러. error 는 항상 close 보다 먼저 오지만 이 error 에 담긴 정보는 의도적으로 빈약해. 브라우저가 보안을 위해 연결 실패 원인을 자세히 드러내지 않기 때문이야. 닫기 코드와 이유는 close 이벤트에서 확인해.

이벤트가 건네는 값

message 이벤트의 event.data 는 텍스트 프레임이면 문자열, 바이너리 프레임이면 기본적으로 Blob, ws.binaryType = 'arraybuffer' 를 설정했다면 ArrayBuffer 야. 연결이 어떻게 끝났는지는 close 이벤트의 event.code, event.reason, event.wasClean 이 알려줘.

Code

네 이벤트 모두 연결하기·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,
  });
});

이벤트 수신기 제대로 제거하기·javascript

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

Exercise

<input> 과 <pre> 가 있는 작은 페이지를 만들어. 페이지를 불러올 때 에코 서버에 WebSocket 을 열고, 네 이벤트를 모두 [open] / [msg] / [err] / [close 1006] 같은 접두어와 함께 <pre> 에 덧붙여. 와이파이를 10초 동안 끊어 연결 단절을 일으킨 뒤 화면에 기록된 닫기 코드를 확인해.