Frontend Academy · 강의

단방향 스트리밍을 위한 서버 전송 이벤트

EventSource로 서버가 전송하는 이벤트 스트림을 수신하고, 이벤트 타입과 데이터를 분석하며, 네트워크 중단 시 자동으로 재연결합니다.

단방향 스트리밍을 위한 서버 전송 이벤트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Server-Sent Events란 무엇인가요?

SSE는 하나의 오래 유지되는 연결을 통해 서버가 브라우저로 이벤트를 푸시하는 표준 HTTP 기반 프로토콜입니다. 단방향으로 서버에서 클라이언트로만 전송합니다. 클라이언트에서 서버로 보낼 필요가 없다면 WebSockets보다 간단합니다.

EventSource API

브라우저의 EventSource는 URL에 연결하고 이벤트를 수신합니다. 표준 기능으로 내장되어 있어 라이브러리가 필요하지 않습니다.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

서버 응답 형식

서버는 Content-Type: text/event-stream인 일반 텍스트 스트림을 보냅니다. 각 메시지는 data:로 시작하고 빈 줄로 끝납니다.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

이름이 지정된 이벤트

서버는 event:를 사용해 이벤트 이름을 지정할 수 있습니다. 브라우저는 해당 이름으로 이벤트를 발생시킵니다.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

자동 재연결

EventSource는 연결이 끊기면 약 3초 후 자동으로 재연결합니다. 서버는 retry: 5000으로 지연 시간을 제안할 수 있습니다.

// Server:
retry: 5000\n
data: hello\n\n

이벤트 ID와 재개

서버는 각 이벤트와 함께 id:를 보냅니다. 재연결 후 브라우저는 마지막으로 받은 ID를 Last-Event-ID 헤더에 담아 보냅니다. 그러면 서버는 해당 지점부터 전송을 재개할 수 있습니다.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

JSON 파싱

event.data는 항상 문자열입니다. JSON을 직접 파싱하세요.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

연결 종료하기

중지하려면 es.close()를 호출합니다. 브라우저는 탭을 닫을 때도 연결을 종료합니다.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

사용 사례

실시간 대시보드(지표, 모니터링). 알림(새 이메일, 경고). 주식 시세 표시. AI 채팅 완성 결과(각 토큰이 하나의 이벤트). 실시간 스포츠 점수. 장시간 실행되는 작업의 상태 업데이트.

실제 예시: AI 스트리밍

OpenAI/Anthropic의 완성 결과는 SSE로 스트리밍됩니다. 각 토큰이 데이터 이벤트로 도착하므로, 입력 중인 효과가 나타나도록 점진적으로 렌더링하세요.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE, WebSocket, 폴링 비교

SSE: HTTP 기반이며 서버에서 클라이언트로만 전송하고 자동 재연결을 지원하며 간단합니다. WebSocket: 전이중 통신을 제공하고 메시지당 오버헤드가 더 낮지만 더 복잡합니다. 폴링: 가장 간단하지만 지연 시간과 부하가 가장 큽니다. 단방향 스트리밍에는 SSE를, 채팅과 같은 양방향 통신에는 WS를 선택하세요.

브라우저 제한과 프록시

브라우저는 출처별 동시 SSE 연결 수를 약 6개로 제한합니다. 일부 기업용 프록시와 오래된 로드 밸런서는 응답을 버퍼링해 SSE를 중단시킬 수 있으므로 대상 환경에서 테스트하세요. 대부분의 프록시 버퍼링을 우회하려면 HTTPS를 사용하세요.

SSE의 CORS

EventSource는 CORS를 따릅니다. 서버는 Access-Control-Allow-Origin을 보내야 합니다. 인증 정보를 사용하려면 EventSource 생성자에 { withCredentials: true }를 전달하고 서버에서 Access-Control-Allow-Credentials: true를 설정합니다.

빠른 확인

Server-Sent Events와 WebSockets의 핵심적인 차이는 무엇인가요?

복습: Server-Sent Events

EventSource는 text/event-stream 이벤트의 HTTP 텍스트 스트림을 엽니다. 서버는 선택적인 event: 이름과 id:를 포함한 ‘data:’ 메시지를 보냅니다. Last-Event-ID를 사용해 자동 재연결하고 중단된 지점부터 재개합니다. 서버에서 클라이언트로만 전송하는 단방향 방식입니다. 실시간 대시보드, AI 스트리밍, 알림에 적합합니다. 양방향 통신이 필요하지 않다면 WebSocket보다 간단합니다. 동시 연결 제한과 프록시 버퍼링에 주의하세요.

자주 묻는 질문

“단방향 스트리밍을 위한 서버 전송 이벤트” 강의는 무료인가요?

네 — “단방향 스트리밍을 위한 서버 전송 이벤트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“단방향 스트리밍을 위한 서버 전송 이벤트”에서 뭘 배우나요?

EventSource로 서버가 전송하는 이벤트 스트림을 수신하고, 이벤트 타입과 데이터를 분석하며, 네트워크 중단 시 자동으로 재연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“단방향 스트리밍을 위한 서버 전송 이벤트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기