웹 API
SSE(Server-Sent Events)
SSE는 HTTP 연결을 통해 서버가 클라이언트에 이벤트를 연속해서 보내는 방식입니다.
쉬운 설명
AI 답변이 한 번에 나타나지 않고 조금씩 이어지는 기능을 만들 때 SSE를 만날 수 있어요. 서버가 텍스트 조각이나 진행 상태를 보내면 브라우저가 받아 화면을 갱신해요. 같은 이벤트 흐름에서는 서버에서 브라우저로 보내는 방향을 다뤄요. 질문 전송 같은 반대 방향의 작업은 별도 요청으로 처리할 수 있어요.
이런 상황에서 만나요
AI가 스터디 자료를 요약하는 동안 생성된 문장을 조금씩 보여 주고 싶다고 해 볼게요. 아래는 서버가 보낸 두 이벤트의 데이터를 화면에 이어 붙이는 예시예요.
이벤트 데이터를 받아 답변에 이어 붙여요
Content-Type: text/event-stream
data: 오늘은 data: API를 배웁니다.
오늘은 API를 배웁니다.
- 1서버가 SSE 형식의 이벤트를 보낸다는 응답 헤더예요.
- 2빈 줄이 이벤트를 구분해요. 조각을 어떻게 합칠지는 앱에서 정해요.
- 3두 데이터를 받아 공백을 넣어 표시한 예시예요. 토큰 수를 나타내지는 않아요.
data: 뒤의 내용과 이벤트 사이의 빈 줄을 구분해요. 실제 AI 서비스의 데이터가 JSON이라면 그 안에서 필요한 텍스트를 꺼내야 해요. 한 번 받은 네트워크 조각이 정확히 이벤트 하나 또는 토큰 하나라고 가정하면 안 돼요.
헷갈리기 쉬운 점
답변이 조금씩 나오면 무조건 SSE인가요?
아니에요. WebSocket이나 다른 응답 스트리밍 방식으로도 만들 수 있어요. SSE라면 보통 text/event-stream 형식과 이벤트 구분 규칙을 확인할 수 있어요. 보이는 효과와 통신 방식을 구분해요.
연결이 끊긴 뒤 재연결해도 이전 응답이 자동으로 완벽히 복원되는 것은 아니에요. 완료·오류·취소 상태와 중복 이벤트 처리를 정하고, 배포 환경이나 프록시가 응답을 모아서 보내지 않는지도 확인해요.
왜 알아야 할까요?
서버는 조금씩 보내는데 화면에는 한꺼번에 나오는 문제를 조사할 수 있어요. AI 답변의 중간 상태와 완료 상태를 구분해 사용자에게 보여 줄 수도 있어요.
조금 더 자세히
SSE는 Server-Sent Events의 줄임말입니다. 서버는 text/event-stream 응답으로 이벤트를 보냅니다. 브라우저의 EventSource는 이 형식을 읽고 재연결을 지원하는 API입니다.
EventSource와 Fetch는 사용법이 다릅니다. POST 본문이나 별도 요청 헤더가 필요한 구성에서는 Fetch로 스트림을 읽는 방식을 쓰기도 하며, 이때 이벤트 경계 처리와 재연결을 직접 구현하거나 적절한 라이브러리를 사용해야 합니다. 스트리밍 자체가 인증이나 사용량 제한을 대신하지는 않습니다.
직접 사용할 때 확인해 보세요
- 응답 형식과 이벤트 경계를 확인한다
- 중간·완료·오류·취소 상태를 구분한다
- 재연결과 중복 이벤트·응답 버퍼링을 확인한다
관계 지도
