SSE (Server-Sent Events)란? 🚀
1. SSE(Server-Sent Events)란?
SSE(Server-Sent Events)는 클라이언트가 서버로부터 실시간으로 이벤트 데이터를 수신할 수 있도록 해주는 웹 기술입니다.
일반적으로 HTTP 기반의 단방향(one-way) 통신 방식으로, 서버에서 클라이언트로 지속적으로 데이터를 보낼 수 있습니다.
✅ 서버 → 클라이언트 방향으로만 실시간 데이터 전송 가능 (단방향 스트리밍)
✅ HTTP 기반 (웹 브라우저 및 HTTP 클라이언트에서 쉽게 사용 가능)
✅ WebSocket보다 가벼운 대체 기술 (단순한 푸시 메시지에 적합)
2. SSE vs WebSocket vs Long Polling 비교
| 비교 항목 | SSE(Server-Sent Events) | WebSocket | Long Polling |
|---|---|---|---|
| 통신 방식 | 단방향(서버 → 클라이언트) | 양방향(서버 ↔ 클라이언트) | 클라이언트 요청 기반 |
| 프로토콜 | HTTP (Event Stream) | WebSocket | HTTP |
| 연결 유지 | 지속적인 연결 유지 | 지속적인 연결 유지 | 요청마다 새 연결 생성 |
| 브라우저 지원 | 대부분 지원 (EventSource API) | 최신 브라우저에서 지원 | 모든 브라우저에서 사용 가능 |
| 사용 사례 | 실시간 알림, 뉴스 피드, 센서 데이터 스트리밍 | 채팅, 온라인 게임, 주식 거래 | AJAX 기반 실시간 업데이트 |
📌 SSE는 서버 → 클라이언트 단방향 데이터 스트리밍에 적합
📌 WebSocket은 양방향 통신이 필요한 경우 (채팅, 게임 등)에 적합
📌 Long Polling은 오래된 브라우저에서도 작동하지만 비효율적
3. SSE 동작 방식
SSE는 EventSource API를 활용하여 서버와의 연결을 유지하고, 지속적으로 이벤트를 수신합니다.
📌 SSE 요청 흐름
1️⃣ 클라이언트가 서버에 HTTP 연결 요청 (EventSource)
2️⃣ 서버는 text/event-stream을 사용하여 지속적으로 데이터를 보냄
3️⃣ 클라이언트는 연결을 유지하면서 새로운 이벤트를 수신
📌 SSE는 HTTP/1.1 keep-alive 연결을 유지하며, 여러 개의 이벤트를 지속적으로 보낼 수 있음.
4. SSE 구현 예제
4.1. 서버 (Spring Boot SSE)
Spring Boot에서 SSE를 사용하여 실시간으로 데이터를 전송하는 예제입니다.
import org.springframework.web.bind.annotation.*;
import org.springframework.http.MediaType;
import reactor.core.publisher.Flux;
import java.time.Duration;
import java.time.LocalTime;
import java.util.stream.Stream;
@RestController
@RequestMapping("/sse")
public class SSEController {
@GetMapping(value = "/time", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> streamTime() {
return Flux.fromStream(Stream.generate(() -> "Time: " + LocalTime.now()))
.delayElements(Duration.ofSeconds(1)); // 1초마다 데이터 전송
}
}📌 설명
✅ @RestController → REST API 컨트롤러
✅ produces = MediaType.TEXT_EVENT_STREAM_VALUE → SSE 응답 스트리밍
✅ Flux<String> (Reactive Streams) → 스트리밍 방식으로 데이터를 계속 전송
✅ 1초마다 LocalTime.now()를 클라이언트로 전송
4.2. 클라이언트 (JavaScript EventSource)
SSE는 브라우저에서 EventSource API를 사용하여 쉽게 구독할 수 있습니다.
const eventSource = new EventSource("http://localhost:8080/sse/time");
eventSource.onmessage = (event) => {
console.log("Received data:", event.data);
};
eventSource.onerror = (error) => {
console.error("SSE error:", error);
};📌 설명
✅ new EventSource(url) → 서버에 SSE 연결 요청
✅ onmessage 이벤트 리스너 → 서버에서 데이터를 받을 때 실행
✅ onerror 이벤트 리스너 → SSE 연결 오류 발생 시 처리
5. SSE 주요 특징
✅ 장점
✔ 서버 → 클라이언트 실시간 푸시 가능
✔ HTTP 기반으로 브라우저 및 클라이언트에서 쉽게 사용 가능
✔ WebSocket보다 가벼운 프로토콜 (단방향 스트리밍에 최적화됨)
✔ 자동 재연결 (EventSource는 연결이 끊어지면 자동으로 다시 연결됨)
✔ Proxy 및 방화벽에서 허용됨 (기존 HTTP 기반이므로 WebSocket보다 호환성 높음)
❌ 단점
❌ 단방향 통신만 가능 (클라이언트 → 서버 메시지 전송 불가능)
❌ 연결 수 제한 (브라우저마다 EventSource 연결 개수 제한 존재, 일반적으로 6개 정도)
❌ 인터넷 연결이 끊기면 데이터 손실 가능
6. SSE 활용 사례
✅ 실시간 알림(Notification) → 이메일, 푸시 알림 시스템
✅ 주식 가격 업데이트(Stock Updates) → 주식 시세 변동 실시간 업데이트
✅ 센서 데이터 스트리밍(Sensor Data Streaming) → IoT 장비 데이터 모니터링
✅ 채팅(Chat) → (단방향 알림 용도, 양방향 채팅에는 WebSocket 추천)
✅ 뉴스 피드(News Feed) → 실시간 뉴스 업데이트
7. SSE vs WebSocket 선택 가이드
| 사용 사례 | 추천 기술 |
|---|---|
| 실시간 알림(Notification) | ✅ SSE |
| 뉴스 피드(News Feed) | ✅ SSE |
| 주식 가격 업데이트 | ✅ SSE |
| 실시간 채팅(Chat) | ❌ WebSocket 추천 |
| 온라인 게임 | ❌ WebSocket 추천 |
| 양방향 데이터 전송 | ❌ WebSocket 추천 |
📌 단방향 스트리밍 데이터 → SSE가 효율적
📌 양방향 실시간 통신 → WebSocket 사용이 적합
8. 결론
✅ SSE(Server-Sent Events)는 서버 → 클라이언트 실시간 푸시를 위한 HTTP 기반 기술
✅ EventSource API를 사용하여 간편하게 서버 스트리밍을 받을 수 있음
✅ 단방향 데이터 스트리밍에는 SSE가 적합하지만, 양방향 통신이 필요하면 WebSocket을 사용해야 함
✅ 실시간 알림, 뉴스 피드, IoT 데이터 스트리밍, 주식 가격 업데이트 등에 적합
추가 학습 자료
