브라우저에서 WebSocket 기초 익히기

WebSocket이란

연결 열기

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

ws.onopen = () => {
  console.log('Connection established');
};

메시지 보내기

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
  ws.send('Hello, server!');
};

메시지 받기

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

오류 처리 및 닫기

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log(`Closed: ${event.code} ${event.reason}`);
  if (event.wasClean) {
    console.log('Clean disconnect');
  } else {
    console.log('Connection lost — will retry');
  }
};

닫기 코드

readyState

function sendSafely(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  } else {
    console.warn('WebSocket not open, dropping message');
  }
}

연결 닫기

// Normal close
ws.close(1000, 'User logged out');

// Close from a cleanup effect
return () => ws.close();

바이너리 데이터

ws.binaryType = 'arraybuffer';

ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Binary message, bytes:', view.length);
  } else {
    console.log('Text message:', event.data);
  }
};

하트비트 / 핑-퐁

function startHeartbeat(ws) {
  return setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30_000);
}

WebSocket과 서버 전송 이벤트

빠른 확인

복습