SSE (Server-Sent Events)

**SSE(Server-Sent Events)**는 서버가 클라이언트에게 실시간으로 데이터를 푸시(Push)하는 기술임.

클라이언트는 HTTP 연결을 유지하면서 서버로부터 지속적인 이벤트를 받을 수 있음.

 

SSE는 WebSocket과 비슷하지만 단방향(서버 → 클라이언트) 통신에 최적화된 기술임.

 

📌 1. SSE(Server-Sent Events)란?

✅ SSE의 정의

 

“SSE는 서버에서 클라이언트로 실시간 이벤트를 전송하는 단방향 통신 기술이다.”

“HTTP 연결을 유지하면서 서버가 지속적으로 데이터를 보낼 수 있다.”

 

✅ SSE의 특징

• 서버 → 클라이언트 단방향 통신 (클라이언트 → 서버는 요청만 가능)

• HTTP 기반 연결 (일반적인 HTTP 요청처럼 동작)

• 자동 재연결 지원 (연결이 끊어지면 자동으로 다시 연결)

• 텍스트 기반(Event Stream Format, UTF-8 인코딩)

• 브라우저 기본 지원 (EventSource API 사용)

 

📌 2. SSE vs WebSocket 비교

비교 항목	SSE (Server-Sent Events)	WebSocket
통신 방식	단방향 (서버 → 클라이언트)	양방향 (서버 ↔ 클라이언트)
기반 기술	HTTP 기반	TCP 기반
자동 재연결	기본 지원	별도 구현 필요
브라우저 지원	대부분의 최신 브라우저 지원	대부분의 최신 브라우저 지원
프로토콜	text/event-stream (텍스트 기반)	바이너리(ws://) 또는 텍스트 기반
사용 예시	실시간 알림, 서버 이벤트, 채팅 메시지 수신	실시간 채팅, 온라인 게임, 양방향 데이터 스트리밍

 

✅ 언제 SSE를 사용할까?

• 실시간 뉴스, 알림(Notification), 실시간 업데이트 등 서버 → 클라이언트 전송이 필요한 경우

• 트래픽이 적고 가벼운 단방향 통신이 필요한 경우

 

✅ 언제 WebSocket을 사용할까?

• 채팅 애플리케이션, 온라인 게임처럼 클라이언트와 서버가 양방향으로 데이터를 주고받아야 하는 경우

• 고빈도 업데이트(주식 거래, 실시간 스포츠 점수 등)가 필요한 경우

 

📌 3. SSE 기본 예제

SSE는 브라우저의 EventSource 객체를 사용하여 구현 가능함.

 

✅ (1) 서버 구현 (Spring Boot)

 

Spring Boot에서 SSE를 이용해 실시간 데이터를 전송하는 API를 구현해보자.

@RestController
@RequestMapping("/sse")
public class SseController {
    
    private final SseEmitter emitter = new SseEmitter();

    @GetMapping("/subscribe")
    public SseEmitter subscribe() {
        return emitter;
    }

    @PostMapping("/send")
    public ResponseEntity<String> sendEvent(@RequestParam String message) {
        try {
            emitter.send(SseEmitter.event().name("message").data(message));
        } catch (IOException e) {
            emitter.complete();
        }
        return ResponseEntity.ok("Event sent");
    }
}

 

🔹 설명

• SseEmitter 객체를 사용하여 클라이언트와 연결 유지

• GET /sse/subscribe → 클라이언트가 SSE 이벤트를 구독

• POST /sse/send?message=Hello → 서버에서 클라이언트로 메시지 전송

 

✅ (2) 클라이언트 구현 (JavaScript)

브라우저에서 EventSource API를 사용하면 SSE 연결을 쉽게 구현 가능함.

const eventSource = new EventSource("http://localhost:8080/sse/subscribe");

// 서버에서 메시지를 받을 때 실행되는 이벤트 리스너
eventSource.onmessage = function(event) {
    console.log("Received message:", event.data);
};

// 서버에서 특정 이벤트("message")를 받을 때 실행되는 이벤트 리스너
eventSource.addEventListener("message", function(event) {
    console.log("Event received:", event.data);
});

// 연결 종료 시 처리
eventSource.onerror = function() {
    console.log("SSE connection closed.");
    eventSource.close();
};

 

🔹 설명

• new EventSource("서버_URL") → 서버와 SSE 연결을 생성

• eventSource.onmessage → 기본 메시지를 수신할 때 실행

• eventSource.addEventListener("이벤트_이름") → 특정 이벤트를 수신할 때 실행

• 연결이 끊어지면 자동으로 재연결됨 (SSE 기본 기능)

 

📌 4. SSE의 장점 & 단점

✅ (1) SSE의 장점

 

✅ 단순한 구현

• HTTP 기반이므로 프록시, 로드 밸런서와 쉽게 연동 가능

• 브라우저에서 EventSource API로 쉽게 사용 가능

 

✅ 자동 재연결 지원

• 연결이 끊어지면 자동으로 재연결 (별도 로직 필요 없음)

 

✅ HTTP/2와 함께 사용 가능

• HTTP/2에서는 하나의 TCP 연결에서 여러 개의 SSE 스트림을 사용할 수 있어 성능이 향상됨

 

✅ 텍스트 스트리밍 최적화

• UTF-8 기반 텍스트 스트리밍에 최적화됨 (JSON, XML 등)

 

❌ (2) SSE의 단점

 

❌ 양방향 통신 불가능

• 클라이언트 → 서버 데이터 전송은 별도로 구현해야 함 (fetch()나 WebSocket 필요)

 

❌ 동시 연결 수 제한

• 브라우저별 최대 연결 수 제한이 있음 (Chrome: 6개, Firefox: 6개, Safari: 6개)

• 대규모 사용자는 WebSocket이 더 적합할 수 있음

 

❌ 바이너리 데이터 전송 어려움

• SSE는 **텍스트 기반(text/event-stream)**이므로, 바이너리 데이터(WebSocket보다 제한적)

 

📌 5. SSE를 실무에서 사용하는 예시

✅ (1) 실시간 알림(Notification) 시스템

• 서버에서 새로운 이벤트(예: 친구 요청, 메시지 도착 등)를 SSE를 통해 클라이언트에 전달

• 기존 폴링 방식보다 빠르고 효율적

 

✅ (2) 주식 가격 실시간 업데이트

• 서버에서 최신 주식 가격을 클라이언트로 지속적으로 전송

• 실시간 정보 업데이트를 위한 SSE 활용

 

✅ (3) 채팅 애플리케이션 (일방향)

• 서버에서 새로운 메시지를 클라이언트에 자동 전송 (읽기 전용)

• WebSocket과 다르게 양방향이 필요하면 폴링(Fetch API)과 함께 사용 가능

 

✅ (4) 서버 상태 모니터링

• 서버 로그, CPU 사용량, 메모리 사용량 등의 실시간 정보를 SSE를 통해 전송

 

📌 6. SSE를 더 강력하게 사용하려면?

✅ (1) Redis Pub/Sub 연동 (분산 환경)

• 여러 서버가 존재하는 환경에서 Redis의 Pub/Sub을 활용하면, 모든 서버가 동일한 이벤트를 전송 가능

• Spring Boot + Redis를 사용하면 SSE를 분산 환경에서도 활용할 수 있음.

 

✅ (2) HTTP/2와 함께 사용

• HTTP/2는 하나의 연결에서 여러 개의 SSE 스트림을 처리할 수 있어 성능이 향상됨.

 

✅ (3) 클라이언트에서 SSE 메시지를 안전하게 처리

• try-catch로 JSON 파싱 오류 등을 방지

• 메시지 타입을 체크하여 올바른 데이터만 처리

 

🚀 결론

• SSE(Server-Sent Events)는 서버 → 클라이언트 단방향 데이터 스트리밍에 최적화된 기술

• WebSocket보다 단순한 구조를 가지며, 자동 재연결 기능이 있어 편리함

• 실시간 알림, 뉴스 피드, 주식 가격 업데이트 등에 유용

• 양방향 통신이 필요하면 WebSocket을 고려해야 함

 

 

 

 

출처 : ChatGPT