JW Devlog

Server-Sent Events (SSE)

5 min read

📡 Server-Sent Events (SSE)란?

  • 서버에서 클라이언트로 단방향으로 실시간 이벤트를 전송하는 웹 기술로, 서버에서 발생하는 업데이트나 알림 등을 실시간으로 클라이언트에 전달할 수 있다.
    • 단방향 통신이기 때문에 서버에서 클라이언트로만 데이터를 전송할 수 있다.
  • 클라이언트는 HTTP 프로토콜을 통해 SSE 연결을 설정하고, 서버는 HTTP 응답을 유지한 상태에서 데이터를 전송한다.
  • 재연결 기능을 제공하기 때문에 연결이 끊어졌을 때 자동으로 다시 연결한다.
    • 클라이언트와 서버 간에 지속적인 연결을 유지하고, 서버가 필요한 시점에만 데이터를 전송하는 방식이다.

SSE vs. WebSocket

WebSocket과의 차이점

  • 데이터 흐름

    • SSE와 WebSocket의 가장 큰 차이점은 데이터의 흐름이다.
    • SSE는 서버에서 클라이언트로 데이터를 전송하는 단방향 통신 방식이다.
    • WebSocket은 양방향 통신을 지원하여 서버와 클라이언트가 데이터를 서로 주고받을 수 있다.
    • 따라서, SSE는 주로 서버에서 클라이언트로 일방적인 데이터 전송이 필요한 주가 업데이트나 실시간 알림 메시지에 적합하고, WebSocket은 양방향 통신이 필요한 실시간 채팅 등에 사용된다.

  • 프로토콜

    • SSE는 웹 기술이기 때문에 HTTP 프로토콜 위에서 동작한다.
    • 또한, HTTP 연결을 유지한 상태에서 재연결이나 추가 설정 없이 서버로부터 지속적인 데이터 스트림을 받을 수 있다.
    • 반면, WebSocket은 독립적인 프로토콜(ws://, wss://) 을 사용하고, HTTP와는 별도의 연결을 만들어 데이터를 주고받는다.

  • 기타

    • SSE는 CORS(Cross-Origin Resource Sharing) 를 통해 다른 도메인에서도 데이터를 수신할 수 있다.
    • WebSocket도 동일한 도메인 간 통신을 제공하지만, 보안상의 이유로 추가 구성이 필요할 수 있다.
구분Server-Sent Events (SSE)WebSocket
통신 방향단방향 (서버 → 클라이언트)양방향 (서버 ↔ 클라이언트)
프로토콜HTTP/HTTPSWS/WSS (독립 프로토콜)
자동 재연결내장 기능으로 지원직접 구현 필요
주요 사용 사례실시간 알림, 주가/날씨 업데이트실시간 채팅, 온라인 게임

🔁 통신 프로세스 설명

  1. 클라이언트 초기화: 클라이언트가 EventSource 객체를 생성하여 서버의 SSE 엔드포인트(/api/events)에 연결을 시도합니다.
  2. 서버 설정: 서버는 Content-Type을 text/event-stream으로 설정하고, 연결을 유지하기 위해 Cache-Control과 Connection 헤더를 설정합니다.
  3. 데이터 전송: 서버는 일정 시간 간격으로 클라이언트에게 이벤트 데이터를 전송합니다. 이 예제에서는 1초마다 현재 시간을 JSON 형식으로 전송합니다.
  4. 이벤트 수신: 클라이언트는 서버로부터 이벤트를 수신하고, onmessage 이벤트 핸들러를 통해 수신된 데이터를 처리합니다.
  5. 연결 종료: 클라이언트가 페이지를 떠나거나 연결이 종료되면 EventSource 객체는 close 메소드를 호출하여 연결을 종료합니다.

Recent writing