WebSocket을 이용한 리얼타임 채팅 구현하기

HTTP는 기본적으로 **Stateless(무상태)**이며 단방향 통신입니다. 클라이언트가 요청(Request)을 보내야만 서버가 응답(Response)을 줍니다. "서버야, 새 메시지 왔어?"라고 1초마다 계속 물어보는(Polling) 방식은 비효율적입니다. 실시간 주식 차트나 채팅처럼 서버가 클라이언트에게 데이터를 쏘아줘야 하는 경우, WebSocket이 정답입니다.

1. WebSocket 프로토콜이란?

HTTP로 처음 연결(Handshake)을 맺은 뒤, 연결을 끊지 않고 계속 유지하면서 양방향으로 자유롭게 데이터를 주고받는 프로토콜입니다(ws:// 또는 wss://). 전화 통화와 비슷합니다. 한 번 연결되면 누구든 원할 때 말할 수 있죠.

2. Socket.io: 웹소켓의 완성형

순수 WebSocket API를 직접 쓰는 것보다 Socket.io 라이브러리를 사용하는 것이 일반적입니다.

• 브라우저 호환성: 웹소켓을 지원하지 않는 구형 브라우저에서는 자동으로 Polling 방식으로 폰백(Fallback) 해줍니다.
• Room & Namespace: 특정 채팅방(Room)에 있는 사람들에게만 메시지를 보내는 기능(Broadcasting)을 쉽게 구현할 수 있습니다.
• 자동 재연결: 연결이 끊어지면 자동으로 재접속을 시도합니다.

3. 간단 구현 예제 (Server)

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('User connected');

  // 'chat message' 이벤트가 오면
  socket.on('chat message', (msg) => {
    // 접속한 모든 사람에게 메시지를 뿌림
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

4. 활용 분야

채팅뿐만이 아닙니다.

• 실시간 알림: "누구가 당신의 글에 좋아요를 눌렀습니다."
• 동시 편집 도구: Google Docs나 Figma처럼 여러 사람이 동시에 문서를 수정할 때.
• 게임: 멀티플레이어 웹 게임의 위치 동기화.

웹소켓은 정적인 웹을 동적인 리얼타임 애플리케이션으로 진화시키는 핵심 열쇠입니다.