[Spring Webflux] 20. SSE(Server-Sent Events) - 단방향 스트리밍 기반 서버 푸시 기술

y001·2025년 5월 9일

Reactive Programming

목록 보기

29/30

웹 애플리케이션에서 실시간 데이터를 사용자에게 전달하고자 할 때, 우리는 흔히 WebSocket을 떠올린다. 하지만 양방향 통신이 반드시 필요한 상황이 아니라면, 더 간결하고 HTTP 친화적인 방식으로 실시간 스트리밍을 구현할 수 있다. 바로 SSE(Server-Sent Events)이다.

1. 왜 SSE가 필요한가?

웹은 기본적으로 클라이언트가 요청을 보내고, 서버는 응답을 반환한 후 연결을 종료하는 구조를 기반으로 한다. 이 구조에서는 서버가 능동적으로 클라이언트에게 데이터를 보낼 방법이 없다. 하지만 사용자에게 실시간 알림, 상태 변경, 이벤트 스트리밍 등을 제공하려면 서버가 클라이언트에게 "즉시" 데이터를 전송할 수 있는 메커니즘이 필요하다.

이 문제를 해결하는 방법으로 WebSocket, Long Polling, 그리고 SSE가 있으며, 이 중 SSE는 서버 → 클라이언트 단방향 푸시에 최적화된 방식이다.

2. SSE란?

SSE(Server-Sent Events)는 HTTP 기반의 텍스트 스트리밍 기술이다. 클라이언트가 HTTP 요청을 한 후, 서버가 해당 연결을 끊지 않고 유지하면서 이벤트가 발생할 때마다 데이터를 내려주는 방식이다. HTML5 표준으로 정의되어 있으며, 대부분의 최신 브라우저에서 기본적으로 지원된다.

SSE는 다음과 같은 특성을 갖는다:

단방향 스트리밍: 서버 → 클라이언트
지속적인 연결 유지 (HTTP long-lived connection)
HTTP/1.1 기반이므로 방화벽 및 프록시와의 호환성이 좋음
text/event-stream MIME 타입 사용
JavaScript에서는 EventSource API로 간편하게 사용 가능

3. 동작 원리

클라이언트가 서버에 Accept: text/event-stream 헤더를 포함하여 HTTP GET 요청을 보낸다.
서버는 Content-Type: text/event-stream으로 응답하고, 연결을 끊지 않은 채 데이터를 내려준다.
서버는 data: 키워드를 이용해 메시지를 전송하고, 각 메시지는 \n\n으로 구분한다.
클라이언트는 메시지가 도착할 때마다 onmessage 이벤트를 통해 처리한다.

const evtSource = new EventSource('/stream');
evtSource.onmessage = function(event) {
  console.log("서버 메시지:", event.data);
};

서버 측에서는 응답을 Transfer-Encoding: chunked 방식으로 스트리밍하고, 필요한 시점에 데이터를 flush()하여 클라이언트로 전송한다.

4. WebSocket과의 차이점

항목	SSE	WebSocket
프로토콜	HTTP/1.1	자체 프로토콜 (ws\://, wss\://)
연결 방향	단방향 (서버 → 클라이언트)	양방향
브라우저 지원	기본 내장 (`EventSource`)	별도 구현 필요 (`WebSocket`)
메시지 형식	텍스트 기반 (event-stream)	바이너리/텍스트 자유
복잡도	간단 (HTTP 기반)	복잡 (프로토콜 업그레이드 필요)
용도	실시간 알림, 로그 스트리밍	채팅, 게임, 협업툴 등