서버에서 클라이언트로 실시간 이벤트를 푸시할 수 있게 해주는 HTTP 표준 기술

• HTTP Keep-Alive 연결 유지
• 자동 재연결 가능

작동 원리

• 클라이언트가 EventSource 객체를 생성하여 서버에 연결 요청
• 서버는 응답 헤더에 Content-Type: text/event-stream을 설정하고 연결 유지
• 연결되는 동안 서버는 데이터를 텍스트 형식으로 계속 전송

장점

• WebSocket과 달리 별도의 프로토콜 전환(Handshake) 없이 표준 HTTP 위에서 작동합니다.
• 네트워크가 끊기면 브라우저가 자동으로 재연결을 시도
  • Last-Event-ID를 통해 끊겼던 시점 이후의 데이터 요청 가능

사용 사례

뉴스 피드, 주식 시세 대시보드, AI 채팅 응답 스트리밍.

예시

interface StockUpdate {
  symbol: string;
  price: number;
}

// SSE 연결 시작
const eventSource = new EventSource('/api/stock-prices');

// 서버로부터 메시지 수신
eventSource.onmessage = (event: MessageEvent) => {
  const data: StockUpdate = JSON.parse(event.data);
  console.log(`${data.symbol}: ${data.price}`);
};

// 특정 이벤트 이름을 지정한 경우 처리 
eventSource.addEventListener('update', (event: MessageEvent) => {
  console.log("Custom event received:", event.data);
});

eventSource.onerror = (error) => {
  console.error("SSE connection failed:", error);
  eventSource.close();
};