SSE (Server-Sent Events)

**Server-Sent Events(SSE)**는 서버가 웹 클라이언트에게 실시간 데이터를 푸시할 수 있도록 하는 Web API입니다. 전통적인 HTTP 요청-응답 패턴과 달리, 서버가 언제든지 클라이언트에게 메시지를 보낼 수 있는 단방향 통신 채널을 제공합니다.

SSE는 HTTP 프로토콜 기반으로 작동하며, EventSource 인터페이스를 통해 브라우저에서 네이티브로 지원됩니다. 서버에서 보내는 메시지는 클라이언트 측에서 이벤트 + 데이터 형태로 처리됩니다.

해당 개념이 필요한 이유

• 실시간 업데이트가 필요하지만 양방향 통신은 불필요한 경우: 주식 시세, 알림, 대시보드 업데이트 등 서버에서 클라이언트로만 데이터를 전송하면 되는 상황에서 WebSocket보다 간단하고 효율적입니다
• 폴링(Polling)의 비효율성 개선: 클라이언트가 주기적으로 서버에 요청을 보내는 폴링 방식은 불필요한 네트워크 트래픽과 서버 부하를 발생시킵니다. SSE는 서버가 데이터가 있을 때만 전송하므로 리소스를 절약합니다
• 자동 재연결 및 간단한 구현: 브라우저가 자동으로 연결을 관리하고 재연결을 처리하므로, 개발자가 별도의 복잡한 로직을 구현할 필요가 없습니다

AS-IS: Polling 방식

sequenceDiagram
    autonumber
    participant Client
    participant Server

    loop 주기적 폴링 (예: 5초마다)
        Client->>Server: HTTP GET /api/updates
        Server->>Client: 200 OK (데이터 없음)
        Note over Client: 5초 대기
        Client->>Server: HTTP GET /api/updates
        Server->>Client: 200 OK (데이터 없음)
        Note over Client: 5초 대기
        Client->>Server: HTTP GET /api/updates
        Server->>Client: 200 OK { data: "new update" }
    end

    Note over Client,Server: 불필요한 요청이 많고 실시간성 낮음

TO-BE: SSE 방식

sequenceDiagram
    autonumber
    participant Client
    participant Server

    Client->>Server: HTTP GET /api/events (EventSource 연결)
    Server->>Client: 200 OK (연결 유지)
    Note over Client,Server: 연결이 열린 상태로 유지됨

    Note over Server: 이벤트 발생 (데이터 준비됨)
    Server->>Client: data: {"message": "update 1"}

    Note over Server: 또 다른 이벤트 발생
    Server->>Client: data: {"message": "update 2"}

    Note over Server: 추가 이벤트
    Server->>Client: data: {"message": "update 3"}

    Note over Client,Server: 하나의 연결로 실시간 업데이트 수신

SSE vs WebSocket 비교

특징	SSE	WebSocket
통신 방향	단방향 (서버 → 클라이언트)	양방향 (서버 ↔ 클라이언트)
프로토콜	HTTP/HTTPS	WebSocket 프로토콜 (ws://, wss://)
재연결	브라우저가 자동 처리	수동으로 구현 필요
구현 복잡도	간단 (EventSource API)	상대적으로 복잡
오버헤드	낮음 (단방향 통신에 최적화)	높음 (양방향 통신 지원)
방화벽 통과	용이 (HTTP 기반)	제한적 (일부 프록시에서 차단)
사용 사례	실시간 알림, 피드, 대시보드, 주식 시세	채팅, 게임, 협업 도구 등 양방향 통신

언제 SSE를 사용할까?

• ✅ 서버에서 클라이언트로만 데이터를 보내면 되는 경우
• ✅ 실시간 업데이트가 필요하지만 클라이언트가 서버로 메시지를 자주 보낼 필요가 없는 경우
• ✅ 브라우저 호환성과 방화벽 통과가 중요한 경우
• ✅ 구현을 간단하게 유지하고 싶은 경우

언제 WebSocket을 사용할까?

• ✅ 클라이언트와 서버 간 양방향 실시간 통신이 필요한 경우 (채팅, 게임)
• ✅ 낮은 지연 시간(latency)이 중요한 경우
• ✅ 클라이언트가 서버로 빈번하게 메시지를 보내야 하는 경우

EventSource API 사용법

기본 연결 및 메시지 수신

// SSE 연결 생성
const eventSource = new EventSource('/api/events');
 
// 메시지 수신 이벤트 리스너
eventSource.onmessage = function(event) {
  console.log('새 메시지 수신:', event.data);
 
  // JSON 데이터 파싱
  const data = JSON.parse(event.data);
  updateUI(data);
};
 
// 연결 성공
eventSource.onopen = function() {
  console.log('SSE 연결 성공');
};
 
// 에러 처리
eventSource.onerror = function(error) {
  console.error('SSE 연결 에러:', error);
  // 브라우저가 자동으로 재연결 시도
};
 
// 연결 종료 (필요한 경우)
// eventSource.close();

커스텀 이벤트 처리

const eventSource = new EventSource('/api/events');
 
// 특정 이벤트 타입 리스닝
eventSource.addEventListener('notification', function(event) {
  const notification = JSON.parse(event.data);
  showNotification(notification);
});
 
eventSource.addEventListener('stock-update', function(event) {
  const stockData = JSON.parse(event.data);
  updateStockPrice(stockData);
});

서버 측 구현 예시 (Node.js/Express)

app.get('/api/events', (req, res) => {
  // SSE 헤더 설정
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
 
  // 클라이언트에게 메시지 전송
  const sendEvent = (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };
 
  // 초기 메시지
  sendEvent({ message: 'Connected to SSE' });
 
  // 주기적으로 업데이트 전송
  const intervalId = setInterval(() => {
    sendEvent({
      timestamp: Date.now(),
      message: 'Server update'
    });
  }, 5000);
 
  // 클라이언트 연결 종료 시 정리
  req.on('close', () => {
    clearInterval(intervalId);
    console.log('Client disconnected');
  });
});

커스텀 이벤트 타입 전송 (서버)

// 이벤트 타입 지정
res.write(`event: notification\n`);
res.write(`data: ${JSON.stringify({ title: 'New alert', body: 'Something happened' })}\n\n`);
 
res.write(`event: stock-update\n`);
res.write(`data: ${JSON.stringify({ symbol: 'AAPL', price: 150.23 })}\n\n`);

SSE의 주요 특징 4가지

1. HTTP 기반 프로토콜

SSE는 일반적인 HTTP 연결 위에서 작동합니다. 별도의 프로토콜 업그레이드가 필요하지 않으며, 기존 HTTP 인프라(프록시, 로드 밸런서, 방화벽)와 호환됩니다.

GET /api/events HTTP/1.1
Host: example.com
Accept: text/event-stream
 
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
 
data: {"message": "Hello"}
 
data: {"message": "World"}

2. 자동 재연결 메커니즘

브라우저의 EventSource 구현체는 연결이 끊어지면 자동으로 재연결을 시도합니다. 개발자가 별도의 재연결 로직을 구현할 필요가 없습니다.

// 브라우저가 자동으로 재연결 처리
eventSource.onerror = function(error) {
  // 에러 로깅만 하면 됨
  console.log('연결 끊김, 자동 재연결 중...');
  // 브라우저가 알아서 재연결 시도
};

서버 측에서 재연결 시간을 제어할 수도 있습니다:

// 서버: 클라이언트에게 3초 후 재연결하라고 지시
res.write(`retry: 3000\n`);
res.write(`data: ${JSON.stringify({ message: 'retry after 3s' })}\n\n`);

3. 이벤트 ID 및 마지막 이벤트 추적

SSE는 각 메시지에 고유 ID를 부여하여, 연결이 끊겼다가 재연결될 때 마지막으로 받은 이벤트 이후부터 다시 받을 수 있습니다.

서버 측:

let messageId = 0;
 
res.write(`id: ${messageId}\n`);
res.write(`data: ${JSON.stringify({ content: 'message' })}\n\n`);
messageId++;

클라이언트 재연결 시 브라우저가 자동으로 Last-Event-ID 헤더를 전송:

GET /api/events HTTP/1.1
Last-Event-ID: 42

서버는 이를 확인하고 42번 이후의 이벤트만 전송할 수 있습니다.

4. Web Workers 지원

SSE는 Web Workers에서도 사용 가능하여, 메인 스레드를 차단하지 않고 백그라운드에서 실시간 데이터를 수신할 수 있습니다.

// worker.js
const eventSource = new EventSource('/api/events');
 
eventSource.onmessage = function(event) {
  // 메인 스레드로 메시지 전달
  self.postMessage({
    type: 'sse-update',
    data: event.data
  });
};

실제 사용 사례

1. 실시간 알림 시스템

// 사용자에게 실시간 알림 푸시
const eventSource = new EventSource('/api/notifications');
 
eventSource.addEventListener('notification', (event) => {
  const notification = JSON.parse(event.data);
  showToast(notification.title, notification.message);
});

2. 라이브 대시보드

// 실시간 모니터링 대시보드
const eventSource = new EventSource('/api/metrics');
 
eventSource.onmessage = (event) => {
  const metrics = JSON.parse(event.data);
  updateChart(metrics.cpu, metrics.memory, metrics.requests);
};

3. 소셜 미디어 피드

// 새 포스트 실시간 업데이트
const eventSource = new EventSource('/api/feed');
 
eventSource.addEventListener('new-post', (event) => {
  const post = JSON.parse(event.data);
  prependPostToFeed(post);
});

4. 주식 시세 업데이트

// 실시간 주식 가격
const eventSource = new EventSource('/api/stocks?symbols=AAPL,GOOGL');
 
eventSource.addEventListener('price-update', (event) => {
  const { symbol, price, change } = JSON.parse(event.data);
  updateStockTicker(symbol, price, change);
});

참고 문서

• MDN - Server-Sent Events
• MDN - Using Server-Sent Events
• MDN - EventSource API