1. Server-Sent Events란 무엇인가? 🤔

Server-Sent Events(SSE)는 HTTP 연결을 통해 서버에서 클라이언트로 자동 업데이트를 푸시하는 기술이야. 웹소켓과 달리 단방향 통신만 지원하지만, 그만큼 구현이 간단하고 HTTP 프로토콜을 그대로 사용하기 때문에 기존 인프라와의 호환성이 뛰어나다는 장점이 있어.

SSE의 핵심 특징 ✨

1. 단방향 통신 - 서버에서 클라이언트로만 데이터가 흐름


2. 자동 재연결 - 연결이 끊어져도 자동으로 다시 연결 시도


3. 이벤트 ID - 각 이벤트에 ID를 부여해 연결이 끊긴 후 마지막으로 받은 이벤트부터 다시 수신 가능


4. 표준 HTTP 사용 - 특별한 프로토콜이 필요 없어 방화벽이나 프록시 문제가 적음


5. 텍스트 기반 통신 - 주로 텍스트 데이터 전송에 최적화됨

2. SSE vs WebSocket: 언제 무엇을 선택해야 할까? 🤷‍♂️

실시간 웹 애플리케이션을 개발할 때 항상 마주치는 질문이 있어. "WebSocket을 써야 할까, SSE를 써야 할까?" 두 기술 모두 실시간 통신을 가능하게 하지만, 각각의 특성과 장단점이 달라. 이 차이점을 이해하면 프로젝트에 맞는 기술을 선택하는 데 도움이 될 거야.

언제 SSE를 선택해야 할까? 🎯

1. 서버에서 클라이언트로의 단방향 통신이 주요 요구사항일 때


2. 알림, 뉴스 피드, 주식 시세 등 실시간 업데이트가 필요할 때


3. 기존 HTTP 인프라를 활용하고 싶을 때


4. 구현 복잡도를 낮추고 싶을 때


5. 연결이 끊겼을 때 자동 재연결과 이벤트 복구가 중요할 때

물론, 채팅 애플리케이션처럼 양방향 실시간 통신이 필요한 경우에는 WebSocket이 더 적합해. 하지만 많은 경우 SSE만으로도 충분하며, 구현도 훨씬 간단하다는 장점이 있어.

3. SSE 기본 구현하기 💻

이제 자바스크립트로 SSE를 구현하는 방법을 알아보자! 서버 측과 클라이언트 측 모두 살펴볼 거야.

클라이언트 측 구현 (브라우저)

브라우저에서 SSE 연결을 설정하는 것은 정말 간단해. EventSource API를 사용하면 돼:

// SSE 연결 생성하기
const eventSource = new EventSource('/events');

// 이벤트 리스너 등록하기
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('새로운 데이터 수신:', data);
  updateUI(data);
};

// 연결 열림 이벤트
eventSource.onopen = function() {
  console.log('SSE 연결이 열렸습니다!');
};

// 에러 처리
eventSource.onerror = function(error) {
  console.error('SSE 연결 오류:', error);
  // 필요에 따라 재연결 로직 추가
};

// 특정 이벤트 타입 리스닝
eventSource.addEventListener('update', function(event) {
  const updateData = JSON.parse(event.data);
  console.log('업데이트 이벤트:', updateData);
});

// 연결 종료 (필요할 때)
function closeConnection() {
  eventSource.close();
}

서버 측 구현

서버 측에서는 올바른 헤더와 형식으로 응답을 보내야 해. 여기서는 Node.js와 Express를 사용한 예제를 살펴보자:

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

app.get('/events', (req, res) => {
  // SSE 설정을 위한 헤더
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // 클라이언트에 초기 연결 알림
  res.write('data: {"message": "연결 성공!"}\n\n');
  
  // 5초마다 데이터 전송 (예시)
  const intervalId = setInterval(() => {
    const data = {
      time: new Date().toISOString(),
      value: Math.random() * 100
    };
    
    // 일반 메시지 전송
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    
    // 특정 이벤트 타입으로 전송
    res.write(`event: update\ndata: ${JSON.stringify({ updated: true, timestamp: Date.now() })}\n\n`);
  }, 5000);
  
  // 클라이언트 연결이 끊어지면 인터벌 정리
  req.on('close', () => {
    clearInterval(intervalId);
    console.log('클라이언트 연결 종료');
  });
});

app.listen(3000, () => {
  console.log('SSE 서버가 포트 3000에서 실행 중입니다');
});

event: 이벤트명
id: 이벤트ID
data: 실제 데이터
retry: 재연결 시간(ms)

4. 실전 예제: 실시간 알림 시스템 만들기 🔔

이론은 충분히 배웠으니, 이제 실제로 실시간 알림 시스템을 구현해보자! 재능넷 같은 플랫폼에서 사용자에게 새로운 메시지, 프로젝트 제안, 또는 중요 업데이트를 실시간으로 알려주는 기능을 만들어볼 거야.

서버 측 코드 (Node.js + Express)

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

// 클라이언트 목록 관리
const clients = new Map();
// 알림 저장소 (실제로는 DB를 사용할 것)
const notifications = [];

app.use(cors());
app.use(express.json());

// SSE 엔드포인트
app.get('/notifications/stream', (req, res) => {
  const clientId = req.query.clientId || Date.now();
  
  console.log(`클라이언트 ${clientId} 연결됨`);
  
  // SSE 헤더 설정
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  
  // 클라이언트에 ID 전송
  res.write(`data: ${JSON.stringify({ type: 'connection', clientId })}\n\n`);
  
  // 마지막 알림 ID 확인
  const lastEventId = req.headers['last-event-id'] || '0';
  
  // 연결이 끊긴 후 놓친 알림 전송
  if (lastEventId !== '0') {
    const missedNotifications = notifications.filter(n => n.id > parseInt(lastEventId));
    if (missedNotifications.length) {
      missedNotifications.forEach(notification => {
        res.write(`id: ${notification.id}\n`);
        res.write(`data: ${JSON.stringify(notification)}\n\n`);
      });
    }
  }
  
  // 클라이언트 등록
  const newClient = {
    id: clientId,
    response: res
  };
  
  clients.set(clientId, newClient);
  
  // 연결 종료 처리
  req.on('close', () => {
    console.log(`클라이언트 ${clientId} 연결 종료`);
    clients.delete(clientId);
  });
});

// 새 알림 생성 API
app.post('/notifications', (req, res) => {
  const notification = {
    id: Date.now(),
    title: req.body.title,
    message: req.body.message,
    type: req.body.type || 'info',
    timestamp: new Date().toISOString()
  };
  
  notifications.push(notification);
  
  // 모든 연결된 클라이언트에 알림 전송
  clients.forEach(client => {
    client.response.write(`id: ${notification.id}\n`);
    client.response.write(`data: ${JSON.stringify(notification)}\n\n`);
  });
  
  res.status(201).json({ success: true, notification });
});

// 알림 목록 조회 API
app.get('/notifications', (req, res) => {
  res.json(notifications);
});

app.listen(3000, () => {
  console.log('알림 서버가 포트 3000에서 실행 중입니다');
});

클라이언트 측 코드 (HTML + JavaScript)

<!-- index.html -->
<div class="notification-container">
  <h3>실시간 알림</h3>
  <div id="notifications-list"></div>
</div>

<script>
  // 클라이언트 ID (실제로는 사용자 인증 후 설정)
  const clientId = localStorage.getItem('clientId') || Date.now();
  localStorage.setItem('clientId', clientId);
  
  // 마지막 이벤트 ID 저장
  let lastEventId = localStorage.getItem('lastEventId') || '0';
  
  // 알림 목록 초기화
  fetchNotifications();
  
  // SSE 연결 설정
  const eventSource = new EventSource(`/notifications/stream?clientId=${clientId}`);
  
  // 메시지 수신 처리
  eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    
    // 연결 확인 메시지 무시
    if (data.type === 'connection') {
      console.log('SSE 연결 성공:', data);
      return;
    }
    
    // 새 알림 처리
    console.log('새 알림 수신:', data);
    addNotificationToUI(data);
    
    // 마지막 이벤트 ID 저장
    if (event.lastEventId) {
      lastEventId = event.lastEventId;
      localStorage.setItem('lastEventId', lastEventId);
    }
  };
  
  // 에러 처리
  eventSource.onerror = function(error) {
    console.error('SSE 연결 오류:', error);
    // 필요시 재연결 로직 추가
  };
  
  // 알림 목록 가져오기
  async function fetchNotifications() {
    try {
      const response = await fetch('/notifications');
      const notifications = await response.json();
      
      // 기존 알림 표시
      notifications.forEach(notification => {
        addNotificationToUI(notification);
      });
    } catch (error) {
      console.error('알림 목록 가져오기 실패:', error);
    }
  }
  
  // UI에 알림 추가
  function addNotificationToUI(notification) {
    const notificationsList = document.getElementById('notifications-list');
    
    const notificationElement = document.createElement('div');
    notificationElement.className = `notification ${notification.type}`;
    
    const timestamp = new Date(notification.timestamp).toLocaleTimeString();
    
    notificationElement.innerHTML = `
      <div class="notification-header">
        <span class="notification-title">${notification.title}</span>
        <span class="notification-time">${timestamp}</span>
      </div>
      <div class="notification-message">${notification.message}</div>
    `;
    
    // 새 알림을 목록 상단에 추가
    notificationsList.prepend(notificationElement);
    
    // 애니메이션 효과
    setTimeout(() => {
      notificationElement.classList.add('show');
    }, 10);
    
    // 5초 후 알림 스타일 변경
    setTimeout(() => {
      notificationElement.classList.add('read');
    }, 5000);
  }
</script>

/* 알림 컨테이너 스타일 */
.notification-container {
  max-width: 100%;
  margin: 20px auto;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

/* 개별 알림 스타일 */
.notification {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  border-left: 4px solid #ccc;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.read {
  opacity: 0.7;
}

/* 알림 타입별 스타일 */
.notification.info {
  border-left-color: #3498db;
}

.notification.success {
  border-left-color: #2ecc71;
}

.notification.warning {
  border-left-color: #f39c12;
}

.notification.error {
  border-left-color: #e74c3c;
}

/* 알림 헤더 스타일 */
.notification-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.notification-title {
  font-weight: bold;
}

.notification-time {
  font-size: 0.8em;
  color: #777;
}

/* 알림 메시지 스타일 */
.notification-message {
  color: #333;
}

5. SSE의 고급 기능 활용하기 🚀

기본적인 SSE 구현을 넘어, 더 강력하고 효율적인 실시간 애플리케이션을 만들기 위한 고급 기능들을 살펴보자!

이벤트 ID와 재연결 관리

이벤트 ID는 SSE의 가장 강력한 기능 중 하나야. 연결이 끊어졌다가 다시 연결될 때, 클라이언트가 마지막으로 받은 이벤트 이후의 데이터만 받을 수 있게 해줘.

// 서버 측: 이벤트 ID 포함
app.get('/events', (req, res) => {
  // SSE 헤더 설정
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // 마지막 이벤트 ID 확인
  const lastEventId = req.headers['last-event-id'] || '0';
  console.log(`클라이언트의 마지막 이벤트 ID: ${lastEventId}`);
  
  // 놓친 이벤트 전송 (DB에서 조회)
  sendMissedEvents(res, lastEventId);
  
  // 새 이벤트 전송
  const intervalId = setInterval(() => {
    const eventId = Date.now();
    const data = { value: Math.random() };
    
    res.write(`id: ${eventId}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 5000);
  
  // 연결 종료 처리
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

재연결 시간 조정

기본적으로 브라우저는 연결이 끊어지면 약 3초 후에 재연결을 시도해. 이 시간을 조정하고 싶다면 retry 필드를 사용할 수 있어:

// 서버 측: 재연결 시간 설정 (10초)
res.write('retry: 10000\n');
res.write('data: {"message": "10초 후에 재연결됩니다"}\n\n');

여러 이벤트 타입 활용하기

SSE는 기본 'message' 이벤트 외에도 커스텀 이벤트 타입을 지원해. 이를 통해 클라이언트에서 이벤트 타입별로 다른 처리를 할 수 있어:

// 서버 측: 다양한 이벤트 타입 전송
function sendEvent(res, eventType, data, id) {
  if (id) res.write(`id: ${id}\n`);
  if (eventType !== 'message') res.write(`event: ${eventType}\n`);
  res.write(`data: ${JSON.stringify(data)}\n\n`);
}

// 사용 예시
sendEvent(res, 'update', { status: 'updated', item: 'profile' }, 1001);
sendEvent(res, 'alert', { level: 'warning', message: '세션이 곧 만료됩니다' }, 1002);
sendEvent(res, 'message', { text: '일반 메시지입니다' }, 1003);

// 클라이언트 측: 이벤트 타입별 처리
const eventSource = new EventSource('/events');

// 기본 메시지 이벤트
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('기본 메시지:', data);
};

// 업데이트 이벤트
eventSource.addEventListener('update', function(event) {
  const data = JSON.parse(event.data);
  console.log('업데이트 이벤트:', data);
  refreshUI(data);
});

// 알림 이벤트
eventSource.addEventListener('alert', function(event) {
  const data = JSON.parse(event.data);
  console.log('알림 이벤트:', data);
  showAlert(data);
});

인증 및 보안

실제 애플리케이션에서는 SSE 연결에도 인증이 필요해. 다음과 같은 방법으로 구현할 수 있어:

// 클라이언트 측: 인증 토큰 포함
const token = localStorage.getItem('authToken');
const eventSource = new EventSource(`/events?token=${token}`);

// 서버 측: 인증 확인
app.get('/events', (req, res) => {
  const token = req.query.token;
  
  // 토큰 검증
  if (!isValidToken(token)) {
    return res.status(401).send('Unauthorized');
  }
  
  // 사용자 ID 추출
  const userId = getUserIdFromToken(token);
  
  // 이후 SSE 설정 및 사용자별 이벤트 전송
  // ...
});

6. 성능 최적화 및 에러 핸들링 ⚡

SSE는 기본적으로 가볍고 효율적이지만, 대규모 애플리케이션에서는 성능 최적화와 에러 처리가 중요해. 이 섹션에서는 SSE 구현을 더 견고하게 만드는 방법을 알아보자!

서버 측 성능 최적화

1. 연결 수 관리 - 서버당 동시 연결 수를 모니터링하고 제한


2. 메모리 사용량 관리 - 클라이언트 목록과 이벤트 큐의 메모리 사용 최적화


3. 이벤트 배치 처리 - 여러 이벤트를 묶어서 전송


4. Redis 활용 - 다중 서버 환경에서 이벤트 발행/구독 패턴 구현

다중 서버 환경에서 Redis를 활용한 SSE 구현 예제:

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

// Redis 클라이언트 설정
const subscriber = new Redis();
const publisher = new Redis();

// 클라이언트 관리
const clients = new Map();

// SSE 엔드포인트
app.get('/events', (req, res) => {
  const clientId = req.query.clientId;
  
  // SSE 헤더 설정
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  
  // 클라이언트 등록
  clients.set(clientId, res);
  
  // Redis 채널 구독
  subscriber.subscribe(`events:${clientId}`, 'events:all');
  
  // 메시지 수신 처리
  const messageHandler = (channel, message) => {
    try {
      const eventData = JSON.parse(message);
      const clientResponse = clients.get(clientId);
      
      if (clientResponse) {
        if (eventData.id) clientResponse.write(`id: ${eventData.id}\n`);
        if (eventData.event) clientResponse.write(`event: ${eventData.event}\n`);
        clientResponse.write(`data: ${JSON.stringify(eventData.data)}\n\n`);
      }
    } catch (error) {
      console.error('메시지 처리 오류:', error);
    }
  };
  
  subscriber.on('message', messageHandler);
  
  // 연결 종료 처리
  req.on('close', () => {
    subscriber.unsubscribe(`events:${clientId}`, 'events:all');
    subscriber.removeListener('message', messageHandler);
    clients.delete(clientId);
    console.log(`클라이언트 ${clientId} 연결 종료`);
  });
});

// 이벤트 발행 API
app.post('/publish', express.json(), (req, res) => {
  const { channel, event, data } = req.body;
  const eventData = {
    id: Date.now(),
    event,
    data,
    timestamp: new Date().toISOString()
  };
  
  // Redis를 통해 이벤트 발행
  publisher.publish(channel, JSON.stringify(eventData));
  
  res.json({ success: true });
});

app.listen(3000, () => {
  console.log('SSE 서버가 포트 3000에서 실행 중입니다');
});

클라이언트 측 에러 핸들링

클라이언트에서는 연결 오류와 재연결 로직을 잘 처리하는 것이 중요해:

class EnhancedEventSource {
  constructor(url, options = {}) {
    this.url = url;
    this.options = options;
    this.eventSource = null;
    this.listeners = new Map();
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = options.maxReconnectAttempts || 10;
    this.reconnectInterval = options.reconnectInterval || 1000;
    this.maxReconnectInterval = options.maxReconnectInterval || 30000;
    this.lastEventId = options.lastEventId || '';
    
    this.connect();
  }
  
  connect() {
    // 기존 연결 정리
    if (this.eventSource) {
      this.eventSource.close();
    }
    
    // URL에 마지막 이벤트 ID 추가
    const connectUrl = new URL(this.url, window.location.origin);
    if (this.lastEventId) {
      connectUrl.searchParams.set('lastEventId', this.lastEventId);
    }
    
    // 새 EventSource 생성
    this.eventSource = new EventSource(connectUrl.toString());
    
    // 기본 이벤트 핸들러 설정
    this.eventSource.onopen = this.handleOpen.bind(this);
    this.eventSource.onerror = this.handleError.bind(this);
    this.eventSource.onmessage = this.handleMessage.bind(this);
    
    // 저장된 이벤트 리스너 다시 등록
    this.listeners.forEach((listeners, event) => {
      listeners.forEach(listener => {
        this.eventSource.addEventListener(event, listener);
      });
    });
  }
  
  handleOpen(event) {
    console.log('SSE 연결 성공');
    this.reconnectAttempts = 0;
    
    if (this.options.onOpen) {
      this.options.onOpen(event);
    }
  }
  
  handleError(error) {
    console.error('SSE 연결 오류:', error);
    
    // EventSource가 닫혔을 때만 재연결 시도
    if (this.eventSource.readyState === EventSource.CLOSED) {
      this.reconnect();
    }
    
    if (this.options.onError) {
      this.options.onError(error);
    }
  }
  
  handleMessage(event) {
    // 마지막 이벤트 ID 저장
    if (event.lastEventId) {
      this.lastEventId = event.lastEventId;
    }
    
    if (this.options.onMessage) {
      this.options.onMessage(event);
    }
  }
  
  reconnect() {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.error('최대 재연결 시도 횟수 초과');
      if (this.options.onMaxReconnectAttempts) {
        this.options.onMaxReconnectAttempts();
      }
      return;
    }
    
    // 지수 백오프로 재연결 간격 계산
    const delay = Math.min(
      this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts),
      this.maxReconnectInterval
    );
    
    console.log(`${delay}ms 후 재연결 시도 (${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`);
    
    setTimeout(() => {
      this.reconnectAttempts++;
      this.connect();
    }, delay);
  }
  
  addEventListener(event, listener) {
    // 리스너 맵에 추가
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event).add(listener);
    
    // 실제 EventSource에 리스너 추가
    if (this.eventSource) {
      this.eventSource.addEventListener(event, listener);
    }
    
    return this;
  }
  
  removeEventListener(event, listener) {
    // 리스너 맵에서 제거
    if (this.listeners.has(event)) {
      this.listeners.get(event).delete(listener);
    }
    
    // 실제 EventSource에서 리스너 제거
    if (this.eventSource) {
      this.eventSource.removeEventListener(event, listener);
    }
    
    return this;
  }
  
  close() {
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
  }
}

// 사용 예시
const sse = new EnhancedEventSource('/events', {
  lastEventId: localStorage.getItem('lastEventId'),
  maxReconnectAttempts: 15,
  reconnectInterval: 2000,
  onOpen: () => console.log('연결됨'),
  onError: (error) => console.error('오류 발생:', error),
  onMessage: (event) => {
    const data = JSON.parse(event.data);
    console.log('메시지 수신:', data);
    
    // 마지막 이벤트 ID 저장
    if (event.lastEventId) {
      localStorage.setItem('lastEventId', event.lastEventId);
    }
  },
  onMaxReconnectAttempts: () => {
    alert('서버 연결에 문제가 있습니다. 페이지를 새로고침해 주세요.');
  }
});

// 이벤트 리스너 등록
sse.addEventListener('update', (event) => {
  const data = JSON.parse(event.data);
  updateUI(data);
});

모니터링 및 디버깅

SSE 연결을 모니터링하고 디버깅하는 방법:

1. 연결 상태 로깅 - 연결 시작, 종료, 재연결 이벤트 기록


2. 이벤트 전송량 측정 - 초당 이벤트 수, 데이터 크기 모니터링


3. 클라이언트 수 추적 - 활성 연결 수 모니터링


4. 오류 집계 - 발생한 오류 유형 및 빈도 분석

// 서버 측 모니터링 예시
const metrics = {
  activeConnections: 0,
  totalConnections: 0,
  eventsSent: 0,
  errors: 0,
  reconnects: 0
};

app.get('/events', (req, res) => {
  // 연결 시작 시 메트릭 업데이트
  metrics.activeConnections++;
  metrics.totalConnections++;
  
  // 연결 종료 시 메트릭 업데이트
  req.on('close', () => {
    metrics.activeConnections--;
  });
  
  // 이벤트 전송 시 메트릭 업데이트
  const originalWrite = res.write;
  res.write = function(data) {
    metrics.eventsSent++;
    return originalWrite.apply(this, arguments);
  };
  
  // ... SSE 설정 ...
});

// 메트릭 API
app.get('/metrics', (req, res) => {
  res.json(metrics);
});

7. 브라우저 호환성과 대응 방안 🌐

2025년 현재, SSE는 대부분의 최신 브라우저에서 잘 지원되지만, 여전히 몇 가지 호환성 문제가 있을 수 있어. 이 섹션에서는 브라우저 호환성 문제와 그 대응 방안을 알아보자.

주요 호환성 이슈

1. Internet Explorer - 모든 버전에서 SSE를 지원하지 않음


2. 연결 제한 - 일부 브라우저는 도메인당 SSE 연결 수 제한 (보통 6개)


3. 오래된 모바일 브라우저 - 일부 구형 모바일 브라우저에서 지원 제한적


4. 프록시 서버 - 일부 프록시는 장시간 연결을 차단할 수 있음

폴리필 및 대체 방안

SSE를 지원하지 않는 브라우저를 위한 대응책:

// SSE 폴리필 또는 대체 구현
function createEventSource(url, options = {}) {
  // 네이티브 EventSource 지원 확인
  if (typeof EventSource !== 'undefined') {
    return new EventSource(url, options);
  }
  
  // 폴리필 또는 대체 구현
  console.log('EventSource가 지원되지 않습니다. 폴백 방식으로 전환합니다.');
  
  return createPolyfill(url, options);
}

function createPolyfill(url, options) {
  const polyfill = {
    listeners: {},
    
    // 롱폴링 구현
    connect: function() {
      const xhr = new XMLHttpRequest();
      let lastEventId = options.lastEventId || '';
      
      const poll = () => {
        xhr.open('GET', url + (url.includes('?') ? '&' : '?') + 'lastEventId=' + lastEventId, true);
        xhr.setRequestHeader('Accept', 'text/event-stream');
        if (lastEventId) {
          xhr.setRequestHeader('Last-Event-ID', lastEventId);
        }
        
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 3 || xhr.readyState === 4) {
            // 응답 처리
            const data = xhr.responseText;
            this.processEvents(data);
            
            // 연결 종료 시 재연결
            if (xhr.readyState === 4) {
              setTimeout(poll, 1000);
            }
          }
        };
        
        xhr.onerror = () => {
          // 오류 처리
          if (this.listeners.error) {
            this.listeners.error.forEach(fn => fn({ type: 'error' }));
          }
          setTimeout(poll, 1000);
        };
        
        xhr.send();
      };
      
      poll();
    },
    
    // 이벤트 처리
    processEvents: function(text) {
      const lines = text.split('\n');
      let eventType = 'message';
      let data = '';
      let id = '';
      
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        
        if (line.startsWith('event:')) {
          eventType = line.substring(6).trim();
        } else if (line.startsWith('data:')) {
          data += line.substring(5).trim();
        } else if (line.startsWith('id:')) {
          id = line.substring(3).trim();
        } else if (line === '') {
          // 이벤트 종료
          if (data) {
            const event = {
              type: eventType,
              data: data,
              lastEventId: id
            };
            
            // 이벤트 리스너 호출
            if (this.listeners[eventType]) {
              this.listeners[eventType].forEach(fn => fn(event));
            }
            
            // 기본 메시지 리스너
            if (eventType !== 'message' && this.listeners.message) {
              this.listeners.message.forEach(fn => fn(event));
            }
            
            // ID 저장
            if (id) {
              options.lastEventId = id;
            }
          }
          
          // 초기화
          eventType = 'message';
          data = '';
        }
      }
    },
    
    // 이벤트 리스너 관리
    addEventListener: function(type, callback) {
      if (!this.listeners[type]) {
        this.listeners[type] = [];
      }
      this.listeners[type].push(callback);
    },
    
    removeEventListener: function(type, callback) {
      if (this.listeners[type]) {
        this.listeners[type] = this.listeners[type].filter(fn => fn !== callback);
      }
    },
    
    // 속성 및 메서드
    get readyState() { return 1; }, // OPEN
    get onmessage() { return this.listeners.message && this.listeners.message[0]; },
    set onmessage(fn) {
      this.listeners.message = [fn];
    },
    get onerror() { return this.listeners.error && this.listeners.error[0]; },
    set onerror(fn) {
      this.listeners.error = [fn];
    },
    close: function() {
      // 연결 종료 로직
    }
  };
  
  // 연결 시작
  polyfill.connect();
  
  return polyfill;
}

// 사용 예시
const eventSource = createEventSource('/events', {
  lastEventId: localStorage.getItem('lastEventId')
});

eventSource.onmessage = function(event) {
  console.log('메시지 수신:', event.data);
};

연결 제한 극복하기

브라우저의 연결 제한(보통 도메인당 6개)을 극복하는 방법:

1. 이벤트 멀티플렉싱 - 여러 종류의 이벤트를 하나의 SSE 연결로 처리


2. 서브도메인 활용 - 여러 서브도메인으로 연결 분산


3. 필요할 때만 연결 - 항상 연결을 유지하지 않고 필요할 때만 연결


4. WebSocket 고려 - 많은 연결이 필요하다면 WebSocket으로 전환

8. 2025년 최신 SSE 활용 트렌드 🔮

2025년 현재, SSE는 다양한 웹 애플리케이션에서 실시간 기능을 구현하는 데 널리 사용되고 있어. 최신 트렌드와 활용 사례를 살펴보자!

마이크로서비스 아키텍처에서의 SSE

현대적인 마이크로서비스 환경에서 SSE를 효과적으로 활용하는 방법:

마이크로서비스 아키텍처에서는 이벤트 기반 통신이 중요한데, SSE는 이런 아키텍처에 완벽하게 맞아. 각 서비스가 이벤트를 발행하고, 알림 서비스가 이를 구독하여 클라이언트에게 전달하는 패턴이 널리 사용돼.

SSE와 GraphQL 구독의 통합

2025년에는 GraphQL과 SSE를 결합한 실시간 데이터 쿼리 패턴이 인기를 끌고 있어:

// GraphQL 스키마 (서버 측)
const typeDefs = `
  type Notification {
    id: ID!
    message: String!
    type: String!
    timestamp: String!
  }
  
  type Query {
    notifications: [Notification!]!
  }
  
  type Subscription {
    notificationAdded: Notification!
  }
`;

// SSE를 통한 GraphQL 구독 구현
const resolvers = {
  Query: {
    notifications: () => db.getNotifications()
  },
  Subscription: {
    notificationAdded: {
      subscribe: () => {
        // SSE 기반 비동기 이터레이터 반환
        return {
          [Symbol.asyncIterator]: () => ({
            next: () => {
              return new Promise((resolve) => {
                // 이벤트 버스에서 다음 알림 대기
                eventBus.once('notification', (notification) => {
                  resolve({ value: { notificationAdded: notification }, done: false });
                });
              });
            }
          })
        };
      }
    }
  }
};

// 클라이언트 측 (React + Apollo)
function NotificationsComponent() {
  const { data, loading } = useSubscription(
    gql`
      subscription NotificationAdded {
        notificationAdded {
          id
          message
          type
          timestamp
        }
      }
    `
  );
  
  useEffect(() => {
    if (data?.notificationAdded) {
      // 새 알림 처리
      showNotification(data.notificationAdded);
    }
  }, [data]);
  
  return (
    <div classname="notifications-panel">
      {/* 알림 UI */}
    </div>
  );
}

서버리스 환경에서의 SSE

AWS Lambda, Azure Functions 등 서버리스 환경에서도 SSE를 활용할 수 있어:

// AWS Lambda + API Gateway 예시
exports.handler = async (event, context) => {
  // 연결 유지를 위한 컨텍스트 설정
  context.callbackWaitsForEmptyEventLoop = false;
  
  // SSE 응답 헤더
  const headers = {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'X-Accel-Buffering': 'no' // NGINX 버퍼링 비활성화
  };
  
  // 클라이언트 ID
  const connectionId = event.requestContext.connectionId;
  
  // DynamoDB에 연결 정보 저장
  await saveConnection(connectionId);
  
  // 초기 응답
  return {
    statusCode: 200,
    headers,
    body: 'data: {"connected":true}\n\n',
    isBase64Encoded: false
  };
};

// 이벤트 발행 Lambda 함수
exports.publishEvent = async (event) => {
  const { message, connectionIds } = JSON.parse(event.body);
  
  // 모든 연결된 클라이언트에 메시지 전송
  const promises = connectionIds.map(connectionId => {
    return sendMessageToClient(connectionId, message);
  });
  
  await Promise.all(promises);
  
  return {
    statusCode: 200,
    body: JSON.stringify({ sent: connectionIds.length })
  };
};

AI 기반 실시간 분석과 SSE

2025년에는 AI 기반 실시간 분석 결과를 SSE로 전송하는 패턴이 인기를 끌고 있어:

1. 실시간 감정 분석 - 사용자 피드백이나 리뷰의 감정 분석 결과를 실시간으로 대시보드에 표시


2. 이상 탐지 - 시스템 모니터링 데이터에서 이상 패턴을 감지하여 즉시 알림


3. 개인화된 추천 - 사용자 행동에 기반한 실시간 추천 제공


4. 예측 알림 - 미래 이벤트 예측 결과를 실시간으로 전달

9. 마무리 및 추가 자료 📚

지금까지 Server-Sent Events의 기본 개념부터 고급 구현 방법, 그리고 2025년 최신 트렌드까지 살펴봤어. SSE는 단방향 실시간 통신이 필요한 웹 애플리케이션에 간단하면서도 강력한 솔루션을 제공해.

추가 학습 자료

1. MDN Web Docs - Server-Sent Events API


2. HTML5 Rocks - Stream Updates with Server-Sent Events


3. GitHub - EventSource 폴리필


4. WHATWG - Server-Sent Events 명세