SSE
SSE는 무엇일까 ?
Server-Sent Events(SSE)는 서버가 클라이언트로 실시간 데이터를 전송하는 단방향 통신 프로토콜입니다.
HTTP 프로토콜을 기반으로
- 클라이언트는 서버에 연결을 요청하고
- 서버는 클라이언트에게 지속적으로 데이터를 푸시합니다.
SSE는 주로 웹 애플리케이션에서 실시간 업데이트를 제공하는 데 유용합니다.
실시간 데이터 전송의 중요성
실시간 데이터 전송은 사용자 경험을 크게 향상시킬 수 있습니다.
예를 들어
주식 거래 플랫폼에서 실시간 주식 가격을 업데이트하여 사용자가 최신 정보를 빠르게 얻을 수 있도록 제공합니다.
또한, GPT와 같은 시스템에서는 답변이 완전히 생성되기 전에 부분적인 답변을 실시간으로 제공함으로써 사용자가 기다리는 동안 지루함을 느끼지 않도록 사용되고 있습니다.
동작 원리
SSE는 클라이언트가 서버에 HTTP 요청을 보내고, 서버가 text/events-stream 콘텐츠 타입으로 응답을 보낼 때 시작됩니다.
이 응답은 지속적으로 열려있으며, 서버는 새로운 데이터를 발생할 때마다 클라이언트에게 전송할 수 있습니다.
이벤트 스트림
이벤트 스트림은 여러 이벤트로 구성되며, 각 이벤트는 다음과 같은 형식을 갖고 있습니다.
data → 이벤트의 데이터
event → 이벤트의 이름 (옵션)
id → 이벤트의 ID (옵션)
retry → 재연결 시간(ms) (옵션)
data: This is a test message.
event: customEvent
id: 12345
retry: 10000연결 종료
서버는 모든 이벤트가 종료되면 연결을 닫습니다.
클라이언트는 서버로부터 data: [Done] 메시지를 받으면 연결 종료를 확인할 수 있습니다.
SSE와 소켓 통신 비교
양방향 VS 단방향 통신
WebSocket은 양방향 통신을 지원하여 클라이언트와 서버가 상호작용할 수 있는 반면, SSE는 단방향으로 서버에서 클라이언트로만 데이터를 전송합니다.
SSE의 장점과 단점
장점
- 설정 및 구현이 간단하다.
HTTP프로토콜을 사용하므로 방화벽 및 프록시 통과가 용이하다.- 클라이언트에서 자동으로 재연결을 처리할 수 있다.
단점
- 클라이언트에서 서버로 데이터를 보낼 수 없다.
Websocket에 비해 데이터 전송 효율성이 낮을 수 있다.
구현 코드
부트캠프 프로젝트를 진행하면서 GPT의 SSE 데이터를 사용자에게 실시간으로 제공하기 위해 기능을 구현하며 공부한 내용으로 구현 코드는 node.js로 작성되었습니다. 회고
서버 구현
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
}, 1000);
}).listen(3000, () => console.log('SSE server running on port 3000'));클라이언트 구현
const eventSource = new EventSource('http://localhost:3000');
eventSource.onmessage = function(event) {
console.log('New message:', event.data);
};
eventSource.onerror = function(event) {
console.error('Error:', event);
};오류 처리 및 재연결
SSE는 자동으로 재연결을 시도하지만, retry: 필드를 사용하여 클라이언트의 재연결 간격을 설정할 수 있습니다.
클라이언트 쪽에서는 onerror 이벤트 핸들러를 사용하여 오류를 처리할 수 있습니다.
