Server Sent Event

폴링부터 WebRTC까지 실시간 통신 방식을 하나씩 정리하는 시리즈의 세 번재 편입니다.

롱 폴링은 새로운 데이터가 생길 때까지 서버가 요청을 유지하기 때문에 폴링보다 빠르게 데이터를 전달 할 수 있었습니다. 하지만 한 가지 아쉬운 점이 있었습니다.

데이터를 하나 보내면 연결을 종료하고 다시 요청을 해야 한다는 점입니다.

지속적으로 서버에서 데이터를 받아야 한다면, 하나의 연결을 유지하며 서버가 필요할 때마다 데이터를 보내면 효율적일 것입니다.

이 방식이 SSE(Server Sent Event)입니다.

연결 유지

클라이언트의 SSE 코드는 굉장히 간단합니다.

javascript

const source = new EventSource("/api/events");

source.addEventListener("message", (event) => {
  apply(JSON.parse(event.data));
});

브라우저에는 EventSource API가 기본적으로 제공되어 별도의 라이브러리가 없어도 됩니다.

롱 폴링처럼 응답을 받은 뒤 다시 요청을 보내는 로직이 필요하지 않습니다. 클라이언트는 연결을 열어두고 서버에서 이벤트가 오기를 기다립니다.

SSE의 핵심은 하나의 HTTP 연결을 유지하며 서버가 여러 이벤트를 순차적으로 전달하는 것입니다.

SSE는 일반적인 JSON 응답처럼 데이터를 한 번에 보내는 방식이 아닙니다.

서버는 text/event-stream 형식으로 이벤트를 전달합니다.

yaml