실시간 데이터 전송을 위한 Server-Sent Events(SSE) 활용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자: 실시간 데이터 전송이 필요한 웹 애플리케이션 개발자

- 난이도: 중간 (HTTP 및 JavaScript 기초 지식 필요)

핵심 요약

• Server-Sent Events(SSE)는 WebSocket 대비 가볍고 단일 방향의 실시간 데이터 전송을 가능하게 하는 기술입니다.
• EventSource API를 통해 브라우저에서 서버로의 연결을 유지하며, text/event-stream 형식으로 데이터를 스트리밍합니다.
• 사용 사례: 대시보드, 알림, 뉴스 피드, 로그 스트리밍 등 서버에서 클라이언트로의 단일 방향 통신이 필요한 시나리오에 적합합니다.

섹션별 세부 요약

1. SSE의 주요 특징

• 단일 방향 통신: 서버 ➡️ 클라이언트
• 자동 재연결 지원: 연결 종료 시 자동으로 재연결 시도
• 경량성: WebSocket보다 메모리 사용량과 복잡도가 낮음
• 텍스트 기반: EventSource API를 통해 브라우저 네이티브 지원

2. 적합한 사용 사례

• 대시보드: 실시간 메트릭스 업데이트
• 알림 시스템: 이메일, 메시지 등 클라이언트로의 알림 전송
• 소셜 피드: 뉴스, 트윗 등 텍스트 기반 데이터 스트리밍
• 로그 모니터링: 서버 로그 실시간 확인

3. 비추천 사용 사례

• 채팅 앱: 양방향 통신 필요
• 멀티플레이어 게임: 실시간 상호작용이 필요
• 클라이언트에서 서버로의 메시지 전송: SSE는 이에 대한 지원 없음

4. 구현 방법

• 서버 측:

```javascript

const http = require('http');

http.createServer((req, res) => {

if (req.url === '/events') {

res.writeHead(200, {

'Content-Type': 'text/event-stream',

'Cache-Control': 'no-cache',

'Connection': 'keep-alive'

});

setInterval(() => {

res.write(data: ${new Date().toLocaleTimeString()}\n\n);

}, 2000);

}

}).listen(3000);

```

• 클라이언트 측:

```javascript

const evtSource = new EventSource("http://localhost:3000/events");

evtSource.onmessage = (event) => {

document.getElementById('output').innerText = event.data;

};

```

5. 선택적 필드

• 이벤트 이름: event: custom
• 재연결 간격: retry: 5000
• 메시지 종료: 빈 줄(\n\n)

6. 한계점

• 최대 연결 수: 브라우저당 도메인당 6개 연결 (HTTP/2 지원 시 제한 완화)
• CORS 지원: 서버에서 Access-Control-Allow-Origin 헤더 설정 필요
• 이진 데이터 지원 없음: UTF-8 텍스트만 지원

7. SSE vs WebSocket 비교

| 기능 | SSE | WebSocket |

|--------------|-------------------------|-------------------------|

| 방향 | 단일 방향 (서버 ➡️ 클라이언트) | 양방향 (서버 ↔️ 클라이언트) |

| 프로토콜 | HTTP | WS/TCP |

| CORS | 지원 용이 | 설정 필요 |

| 복잡도 | 낮음 | 중간~높음 |

결론

SSE는 서버에서 클라이언트로의 단일 방향 실시간 데이터 전송이 필요한 경우에 WebSocket 대신 가볍고 간단한 구현이 가능한 기술입니다. EventSource API와 text/event-stream 형식을 활용해, 대시보드, 알림 시스템 등에 유리하며, 복잡한 WebSocket 설정 없이도 실시간 업데이트를 제공할 수 있습니다.