SSE(Server-Sent Events)

개요

SSE(Server-Sent Events)는 서버가 클라이언트(웹 브라우저 등)로 지속적으로 데이터를 푸시할 수 있게 해주는 HTML5 기반의 단방향 통신 기술입니다. 클라이언트가 초기 요청을 보내고 나면 서버가 실시간 이벤트 스트림을 유지하며 자동으로 데이터를 전송할 수 있어, 주식 시세, 알림, 채팅, IoT 모니터링 등 다양한 실시간 웹 애플리케이션에 적합합니다.

---

1. 개념 및 정의

항목	설명
정의	클라이언트가 서버에 한 번 연결한 뒤, 서버가 지속적으로 데이터를 푸시하는 HTTP 기반의 단방향 스트리밍 방식
프로토콜	HTTP/1.1 기반 (웹소켓과 달리 업그레이드 불필요)
MIME 타입	text/event-stream (Content-Type 헤더)

---

2. SSE의 작동 방식

단계	설명
1. 클라이언트 연결	JavaScript에서 EventSource 객체로 서버에 연결
2. 서버 스트리밍	서버는 text/event-stream 형식으로 데이터를 지속 전송
3. 이벤트 수신	클라이언트는 이벤트 핸들러로 데이터 수신 후 처리
4. 자동 재연결	네트워크 단절 시 자동으로 재연결 시도 (기본 제공 기능)

---

3. 코드 예시

📍 클라이언트 (JavaScript)

const eventSource = new EventSource('/sse');

eventSource.onmessage = function(event) {
  console.log('New message:', event.data);
};

📍 서버 (Node.js 예시)

app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

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

---

4. SSE vs WebSocket vs Long Polling

항목	SSE	WebSocket	Long Polling
연결 방향	서버 → 클라이언트 단방향	양방향	클라이언트 주도
사용 용도	실시간 알림, 로그 스트림	채팅, 게임, 실시간 협업	저간격 이벤트 발생시 간편함
표준화	HTML5 명세 포함	별도 프로토콜	비표준 구현 방식
장점	HTTP 기반, 구현 간단, 자동 재연결	양방향 통신 가능, 고속	호환성 좋지만 비효율적

---

5. 적용 사례

분야	활용 예시
실시간 알림	SNS 알림, 메신저 도착 알림, 주문 상태 푸시
데이터 시각화	대시보드 실시간 업데이트, IoT 센서 데이터 반영
뉴스/주식	스트리밍 속보, 주가/환율 실시간 갱신
로그 모니터링	DevOps 환경의 로그 스트림 처리

---

6. 장점과 제한사항

항목	장점	제한점
단순성	HTTP 기반으로 기존 서버에서 쉽게 구현	클라이언트 → 서버 전송 불가 (단방향)
안정성	자동 재연결 및 브라우저 내장 지원	오래된 브라우저, 프록시 호환성 문제 발생 가능
적은 오버헤드	웹소켓 대비 프로토콜 및 구현 부담 적음	대용량 메시지 처리에는 적합하지 않음

---

7. 확장 전략

전략	설명
JWT 기반 인증 연계	클라이언트 연결 시 인증 토큰 기반 접근 통제
이벤트 이름 활용	event: 헤더로 커스텀 이벤트 분기 처리 가능
브라우저 지원 고려	polyfill 또는 fallback 메커니즘 필요 (IE 등)
SSE + Redis	다수 클라이언트 대상 메시지 브로드캐스트 시 Redis Pub/Sub 연계

---

결론

SSE는 간단하지만 효과적인 실시간 데이터 전송 기술로, 양방향 통신이 꼭 필요하지 않은 실시간 애플리케이션에서 매우 유용합니다. 서버 구현이 쉬우며, 자동 재연결, 낮은 오버헤드 등의 장점으로 인해 실시간 알림 및 스트리밍에 적합한 선택지입니다.