SSE(Server-Sent Events)는 서버가 클라이언트로 실시간 데이터를 단방향으로 전송하는 HTTP 기반 기술입니다.
클라이언트가 HTTP 연결을 열고 서버는 그 연결을 유지하며 데이터를 스트림으로 전송합니다. 연결은 서버가 닫거나 클라이언트가 닫을 때까지 유지됩니다.
서버는 text/event-stream 콘텐츠 타입으로 응답합니다.
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
event: message
data: 안녕하세요
event: update
data: {"count": 42}
id: 100
: 이것은 주석입니다 (클라이언트에 전달 안 됨)
| 필드 | 역할 |
|---|---|
| event | 이벤트 타입 (생략 시 기본값 "message") |
| data | 전송할 데이터 (여러 줄 가능) |
| id | 이벤트 ID (재연결 시 Last-Event-ID로 전송됨) |
| retry | 재연결 대기 시간(ms) 설정 |
SSE의 큰 장점 중 하나입니다. 연결이 끊기면 브라우저가 자동으로 재연결을 시도합니다. 이때 마지막으로 받은 이벤트 ID를 Last-Event-ID 헤더로 전송하여 서버가 이어서 전송할 수 있게 합니다.
const source = new EventSource('/events')
source.onmessage = (event) => {
console.log(event.data)
}
source.addEventListener('update', (event) => {
console.log(event.data)
})
source.onerror = () => {
source.close()
}
서버에서 클라이언트로 데이터를 보내기만 하면 되는 경우 SSE가 적합합니다. 클라이언트에서 서버로도 데이터를 보내야 한다면 WebSocket을 사용합니다.
| 상황 | 선택 |
|---|---|
| 알림, 피드, 대시보드 업데이트 | SSE |
| 채팅, 게임, 협업 편집 | WebSocket |
HTTP/2 환경에서는 SSE의 연결 수 제한 문제가 해소됩니다. HTTP/1.1에서는 브라우저가 같은 도메인에 동시에 열 수 있는 연결 수가 제한(보통 6개)되어 탭 여러 개에서 SSE를 사용하면 문제가 생길 수 있습니다. HTTP/2는 하나의 연결에서 멀티플렉싱을 지원하므로 이 한계가 없습니다.