SSE (Server-Sent Events)란 무엇이며, WebScoket과는 어떤 차이가 있는가?

기존에 백엔드와 프론트엔드간의 통신방식은 WebSocket 을 사용한다 정도만 알고있었는데, 회사에서 프로젝트를 진행하다가 Server-Sent Events (SSE) 라는 방식이 있다는것을 새로 알게 되어 공부한 내용에 대해 글로 남깁니다.

개요

우선 WebSocket과 Server-Sent Events (SSE)의 주요 차이점은 다음과 같습니다.

동작 방식

WebSocket

WebSocket은 초기 HTTP 핸드셰이크 이후, TCP 소켓을 업그레이드하여 양방향 통신을 가능하게 합니다. 서버와 클라이언트는 모두 실시간으로 데이터를 주고받을 수 있으며, 이로 인해 채팅, 게임, 협업 도구 등에 자주 사용됩니다.

const socket = new WebSocket("wss://example.com/ws");

socket.onmessage = (event) => {
  console.log("서버로부터 메시지 수신:", event.data);
};

socket.send("클라이언트 → 서버 메시지");

Server-Sent Events (SSE)

SSE는 HTTP 스트리밍 방식으로, 서버가 클라이언트에게 지속적으로 데이터를 푸시하는 단방향 통신입니다. 클라이언트는 EventSource 객체를 통해 서버에 연결하며, 서버는 text/event-stream MIME 타입으로 데이터를 전송합니다.

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

source.onmessage = (event) => {
  console.log("서버로부터 이벤트 수신:", event.data);
};

클라이언트 → 서버로는 직접 메시지를 보낼 수 없으며, 일반적인 HTTP 요청이 별도로 필요합니다.

상세 비교

통신 방향

• WebSocket은 클라이언트와 서버가 모두 메세지를 보낼 수 있는 양방향 통신 채널을 제공합니다.

• SSE는 오직 서버에서 클라이언트로의 전송만을 허용합니다.

브라우저 및 네트워크 호환성

• SSE는 HTTP 기반이므로 프록시, 방화벽, 로드밸런서와의 호환성이 뛰어납니다.

• WebSocket은 일부 네트워크 환경에서 차단될 수 있으며, 핸드셰이크 이후 비표준 포맷을 사용합니다.

구현 복잡도

• SSE는 단순한 API (EventSource)로 빠르게 구현 가능하며, 이벤트 기반 구조도 직관적입니다.

• WebSocket은 상태 관리, 연결 끊김 복구 등 추가적인 안정화 로직이 필요할 수도 있습니다.

확장성, 부가기능

• WebSocket은 바이너리 데이터 전송, 다중 채널 관리, 엔터프라이즈 실시간 애플리케이션에 적합

• SSE는 텍스트 기반 알림, 로그 스트리밍, 단순 모니터링용 실시간 데이터 등에 적합합니다.

선택 기준

다음은 시나리오 별 적용하기 적합한 기술을 정리한 표입니다.

결론

WebSocket과 SSE는 각각의 통신 특성과 장단점이 분명하기 때문에 복잡하고 상호작용이 많은 실시간 시스템에서는 WebSocket이 유리하고, 상대적으로 단순한 푸시 기반 스트리밍에는 SSE가 구현이 간편하고 안정적입니다.