WebSocket vs SSE: Node.js 실시간 통신 비교

개요

실시간 기능을 구현할 때 선택지는 다양하다. 특히 WebSocket과 Server-Sent Events(SSE)는 자주 비교된다. 이 글은 Node.js 환경에서 두 기술의 차이와 구현 예제를 통해 적합한 적용처를 판단할 수 있도록 설명한다.

기본 개념

WebSocket

WebSocket은 클라이언트와 서버 사이의 양방향 통신을 지원하는 프로토콜이다. 연결이 수립되면 양쪽 모두 데이터를 즉시 전송할 수 있다. 실시간 채팅, 온라인 게임, 협업툴 등에 적합하다.

Server-Sent Events (SSE)

SSE는 서버에서 클라이언트로 단방향 스트리밍을 제공한다. 클라이언트는 EventSource를 통해 서버에 연결하고, 서버는 지속해서 텍스트 이벤트를 푸시한다. 업데이트 빈도가 낮고 단방향 전송이면 간단하고 효율적이다.

차이점 요약

• 통신 방향: WebSocket은 양방향, SSE는 서버→클라이언트 단방향.
• 프로토콜: WebSocket은 전용 프로토콜(ws/wss), SSE는 HTTP 기반 텍스트 스트리밍.
• 브라우저 지원: SSE는 일부 오래된 브라우저에서 제한적일 수 있으나 대부분 지원된다. WebSocket은 광범위하게 지원된다.
• 재연결: SSE는 자동 재연결 기능을 내장. WebSocket은 애플리케이션 레벨에서 처리 필요.
• 프록시/방화벽: SSE는 HTTP 기반이라 통과가 쉬운 반면, WebSocket은 환경에 따라 제약이 있을 수 있다.

언제 무엇을 선택할까

• 양방향 실시간이 필요하면 WebSocket을 선택.
• 서버에서 빈번한 단방향 업데이트(예: 실시간 피드, 알림)라면 SSE가 단순하고 효율적.
• 프록시 환경이나 단순 구현을 원하면 SSE가 유리.
• 대규모 브로드캐스트와 복잡한 메시지 라우팅은 WebSocket 기반 솔루션이 적합.

Node.js 구현 예제

이제 실용 예제를 통해 구현 차이를 확인한다. 먼저 WebSocket 예제부터 살펴본다. 여기서는 경량 라이브러리인 ws를 사용한다.

WebSocket 서버 (ws 사용)

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('클라이언트 연결');
  ws.on('message', function incoming(message) {
    console.log('받음: %s', message);
    // 받은 메시지를 그대로 브로드캐스트
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`서버 echo: ${message}`);
      }
    });
  });

  ws.send('환영합니다: 연결됨');
});

브라우저 쪽 간단 클라이언트 예제:

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => ws.send('안녕하세요');
ws.onmessage = (e) => console.log('서버:', e.data);

SSE 서버 (Express 사용)

SSE는 HTTP 응답을 끊지 않고 텍스트 스트림을 보낸다. 아래는 Express 기반 예제다.

const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
  });
  res.write('retry: 10000\n\n');

  const id = Date.now();
  const interval = setInterval(() => {
    res.write(`id: ${id}\n`);
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 2000);

  req.on('close', () => {
    clearInterval(interval);
  });
});

app.listen(3000);

브라우저 클라이언트:

const es = new EventSource('/events');
es.onmessage = (e) => console.log('이벤트:', e.data);

Socket.io vs SSE 비교

Socket.io는 WebSocket 위주로 동작하지만 폴백과 편의 기능을 제공한다. 이벤트 기반 API와 자동 재연결, 룸 기능이 있어 복잡한 애플리케이션에 유리하다. 반면 SSE는 단순하고 네트워크 통과성이 좋다. 아래 항목을 참고한다.

• 기능성: Socket.io > WebSocket(ws) > SSE
• 구현 난이도: SSE < Socket.io ≈ ws
• 브로드캐스트: Socket.io와 ws가 유리
• 단방향 푸시: SSE가 간단하고 안정적

성능과 운영 고려사항

연결 수가 많으면 메모리와 파일 디스크립터를 고려한다. WebSocket은 연결당 리소스가 더 크다. SSE는 HTTP 연결을 유지하므로 프록시 타임아웃을 체크해야 한다. 또한 인증과 재연결 전략을 설계해야 한다.

결론

요약하면 목적에 따라 선택이 달라진다. 양방향 상호작용과 낮은 지연이 필요하면 WebSocket 또는 Socket.io를 사용한다. 서버에서 클라이언트로 단순 푸시가 주 목적이면 Server-Sent Events가 간단하고 효과적이다. 제공한 예제를 통해 실제 요구사항에 맞는 기술을 선택하면 된다.