[HTTP 추가 프로토콜]Server-Sent Events(SSE)

[HTTP 추가 프로토콜]Server-Sent Events(SSE)

 

Server-Sent Events(SSE)는 서버가 클라이언트로 실시간 데이터를 푸시(push) 하는 방법을 제공하는 HTML5 표준 기술입니다. 이는 주로 브라우저와 서버 간의 단방향 통신을 위해 사용되며, 클라이언트는 서버에서 전송하는 이벤트를 수신합니다.

주요 특징

1. 단방향 통신:
   • 서버 → 클라이언트 방향으로만 데이터를 보냅니다. 클라이언트는 데이터를 받을 수 있지만, 서버로 데이터를 보낼 수는 없습니다. (클라이언트에서 서버로 데이터를 보내려면 AJAX, WebSocket 등을 추가로 사용해야 함)
2. HTTP 기반:
   • 기존 HTTP 프로토콜을 사용하여 쉽게 구현 가능하며, 브라우저에서 기본적으로 지원됩니다.
3. 텍스트 기반 전송:
   • 서버는 일반 텍스트 형식으로 데이터를 전송하며, 이벤트 타입, 데이터, ID 등을 포함할 수 있습니다.
4. 자동 재연결:
   • 연결이 끊어지면 브라우저가 자동으로 다시 연결을 시도합니다.
5. 브라우저 지원:
   • 대부분의 현대 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원합니다. 다만, Internet Explorer는 지원하지 않습니다.

---

사용 사례

1. 실시간 알림:
   • 주식 시세 업데이트, 뉴스 알림 등
2. 채팅 애플리케이션:
   • 간단한 단방향 메시지 푸시
3. 라이브 데이터 피드:
   • 실시간 경기 점수 업데이트, 센서 데이터 모니터링

---

동작 방식

1. 클라이언트가 서버에 연결:
   • 클라이언트는 EventSource 객체를 통해 SSE 연결을 시작합니다.

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

2. 서버가 이벤트 전송:
   • 서버는 text/event-stream MIME 타입으로 데이터를 보냅니다. 
   • 데이터 포맷:

     data: 메시지 내용

   • 예시:

     id: 1
     event: message
     data: Hello, SSE!

3. 클라이언트가 데이터 수신:
   • 클라이언트는 이벤트 리스너를 등록해 데이터를 처리합니다.

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

---

장점

• 간단한 구현: HTTP 기반으로 WebSocket보다 구현이 간단.
• 낮은 오버헤드: HTTP/1.1의 Keep-Alive를 활용하여 연결 유지.
• 브라우저 기본 지원: 추가 라이브러리 없이 사용 가능.

단점

• 단방향 통신: 클라이언트에서 서버로 데이터를 보낼 수 없음.
• 제한적인 데이터 형식: 바이너리 데이터 전송 불가 (텍스트만 지원).
• 브라우저 호환성: Internet Explorer에서 지원하지 않음.

---

SSE vs WebSocket

특성	SSE	WebSocket
통신 방향	단방향 (서버 → 클라이언트)	양방향 (서버 ↔ 클라이언트)
프로토콜	HTTP	WebSocket (ws://, wss://)
데이터 형식	텍스트	텍스트 및 바이너리
연결 유지	자동 재연결	수동 구현 필요
복잡성	간단 (HTTP 기반)	더 복잡함
사용 사례	실시간 알림, 데이터 스트리밍	채팅 앱, 게임, 실시간 협업 도구

SSE는 단방향 알림과 실시간 데이터 스트리밍에 적합하며, WebSocket은 양방향 실시간 통신이 필요한 경우 더 적합합니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events

Server-sent events - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/EventSource

EventSource - Web APIs | MDN