WebSocket vs SSE – 실시간 통신 방식 비교

“실시간 알림 기능을 만들고 싶은데, WebSocket 말고도 방법이 있나요?”

오늘은 실시간 통신 방식 중 WebSocket과 SSE(Server-Sent Events)를 비교해보고, 언제 어떤 방식이 적합한지 프론트엔드 개발자 관점에서 정리해보도록 하자.

---

🔁 실시간 통신 방식, 꼭 WebSocket만 쓸 필요는 없다?

프론트엔드에서 실시간 데이터를 받고 싶을 때, 가장 먼저 떠오르는 게 WebSocket이지만, 단방향 통신에 특화된 SSE(Server-Sent Events)도 유용하게 사용할 수 있다.

---

📡 SSE(Server-Sent Events)란?

SSE는 서버에서 클라이언트로 단방향 스트리밍 데이터를 전송하는 HTML5 표준 기술이다.

• HTTP 기반 (연결은 유지됨)
• 클라이언트는 이벤트 스트림을 EventSource로 수신
• 서버는 text/event-stream MIME 타입으로 지속적으로 데이터 전송

예시 코드 (클라이언트)

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log('New event:', event.data);
};

예시 코드 (서버 - Node.js)

res.setHeader('Content-Type', 'text/event-stream');
res.write('data: Hello, client!\n\n');

---

🆚 WebSocket vs SSE 비교

항목	WebSocket	SSE
통신 방향	✅ 양방향 (Full Duplex)	🔄 단방향 (서버 → 클라이언트)
프로토콜	자체 프로토콜 (ws/wss)	HTTP 기반
브라우저 지원	모든 주요 브라우저	IE 제외 대부분 지원
자동 재연결	❌ 직접 구현 필요	✅ 기본 내장
메시지 형식	바이너리/텍스트 모두 지원	텍스트 기반
서버 구현	약간 복잡 (핸드셰이크 필요)	단순 (HTTP 유지 연결)
주요 활용	채팅, 게임, 협업툴	뉴스, 주식 시세, 알림 스트리밍

---

📌 언제 어떤 걸 써야 하나?

상황	추천 방식	이유
채팅 앱	✅ WebSocket	클라이언트도 서버에 메시지 전송해야 함
실시간 뉴스/알림	✅ SSE	서버가 일방적으로 푸시만 하면 됨
IoT 실시간 상태 표시	🔄 SSE 또는 WebSocket	단방향이면 SSE, 양방향이면 WebSocket
브라우저 호환 걱정 있음	✅ WebSocket	구형 브라우저 지원 고려
배포 환경이 서버리스/HTTP 중심	✅ SSE	HTTP 기반이므로 인프라 연동 쉬움

---

🧪 프론트엔드 코드 비교 (요약)

WebSocket

const ws = new WebSocket('wss://example.com/ws');
ws.onmessage = (event) => console.log(event.data);
ws.send('Hello Server');

SSE

const source = new EventSource('/events');
source.onmessage = (e) => console.log(e.data);

---

✅ 프론트엔드 개발자를 위한 실전 팁

• 단순한 실시간 출력(알림, 로그, 데이터 스트림)만 필요하다면 SSE로도 충분
• WebSocket은 서버 구현이 복잡하지만, 양방향 통신이 필요한 경우 유일한 선택
• EventSource는 자동 재연결 기능이 있어 불안정한 네트워크에서 유리
• 보안이 필요한 경우, WebSocket은 wss://, SSE는 HTTPS 기반 서버에서 제공해야 안전

---

✍️ 마무리 요약

WebSocket은 강력한 양방향 통신 도구지만, 단방향 실시간 데이터에는 더 간단한 SSE도 훌륭한 대안이다.
두 기술의 구조적 차이를 이해하면 상황에 맞는 선택이 쉬워진다.