WebSocket 실전 구현 가이드

HTTP vs WebSocket — 언제 무엇을 쓰나

ws 라이브러리로 WebSocket 서버 구현

ws 라이브러리 — 서버 구현 (Node.js)
// npm install ws
const { WebSocketServer } = require('ws');

const wss = new WebSocketServer({ port: 8080 });

// 연결된 클라이언트를 관리하는 Set
const clients = new Set();

wss.on('connection', (ws, req) => {
  // 클라이언트 IP (프록시 뒤에서는 X-Forwarded-For 사용)
  const ip = req.socket.remoteAddress;
  console.log(`Client connected: ${ip}`);

  clients.add(ws);

  // 클라이언트로부터 메시지 수신
  ws.on('message', (data) => {
    let message;
    try {
      message = JSON.parse(data.toString());
    } catch {
      ws.send(JSON.stringify({ error: 'Invalid JSON' }));
      return;
    }

    console.log('Received:', message);

    // 브로드캐스트: 연결된 모든 클라이언트에 전송
    const payload = JSON.stringify({ type: 'broadcast', data: message });
    for (const client of clients) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(payload);
      }
    }
  });

  // 연결 종료
  ws.on('close', () => {
    clients.delete(ws);
    console.log(`Client disconnected: ${ip}`);
  });

  // 에러 처리
  ws.on('error', (err) => {
    console.error('WebSocket error:', err);
    clients.delete(ws);
  });

  // 연결 확인 메시지 전송
  ws.send(JSON.stringify({ type: 'connected', message: 'Welcome' }));
});

console.log('WebSocket server running on ws://localhost:8080');

ws 라이브러리 — 클라이언트 구현 (브라우저)
// 브라우저 내장 WebSocket API 사용 (별도 설치 불필요)
const ws = new WebSocket('ws://localhost:8080');

ws.addEventListener('open', () => {
  console.log('Connected to server');
  ws.send(JSON.stringify({ type: 'hello', text: '안녕하세요' }));
});

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

ws.addEventListener('close', (event) => {
  console.log(`Connection closed: code=${event.code}, reason=${event.reason}`);
  // 재연결 로직 실행
});

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

// 메시지 전송
function sendMessage(text) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({ type: 'message', text }));
  }
}

Socket.IO — WebSocket 위의 추상 레이어

재연결 전략 — 연결 끊김 대응

지수 백오프 재연결 구현 (브라우저)
class ReconnectingWebSocket {
  constructor(url) {
    this.url = url;
    this.reconnectDelay = 1000;  // 첫 재연결 대기: 1초
    this.maxDelay = 30000;        // 최대 대기: 30초
    this.reconnectAttempts = 0;
    this.connect();
  }

  connect() {
    this.ws = new WebSocket(this.url);

    this.ws.addEventListener('open', () => {
      console.log('Connected');
      this.reconnectDelay = 1000;  // 성공 시 딜레이 초기화
      this.reconnectAttempts = 0;
    });

    this.ws.addEventListener('message', (event) => {
      this.onMessage(JSON.parse(event.data));
    });

    this.ws.addEventListener('close', (event) => {
      // 1000: 정상 종료, 1001: 서버 종료 — 재연결 안 함
      if (event.code === 1000 || event.code === 1001) return;

      this.scheduleReconnect();
    });

    this.ws.addEventListener('error', () => {
      this.ws.close();
    });
  }

  scheduleReconnect() {
    this.reconnectAttempts++;
    // 지수 백오프 + 지터(jitter)로 동시 재연결 분산
    const jitter = Math.random() * 500;
    const delay = Math.min(this.reconnectDelay * 2 ** (this.reconnectAttempts - 1), this.maxDelay) + jitter;

    console.log(`Reconnecting in ${Math.round(delay)}ms (attempt ${this.reconnectAttempts})`);
    setTimeout(() => this.connect(), delay);
  }

  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data));
    }
  }

  onMessage(data) {
    // 서브클래스에서 오버라이드
    console.log('Message:', data);
  }
}

WebSocket 보안 설정