SSE 기반 AI Agent 스트리밍 적용기 — Alpy에 자연스러운 대화를 불어넣다
프론트엔드
SSE 기반 AI Agent 스트리밍 적용기 — Alpy에 자연스러운 대화를 불어넣다
두줄요약
AI Agent 응답 스트리밍에 SSE를 선택하고 POST를 지원하는 Custom EventSource를 구현했습니다. 청크 버퍼링과 연결 관리로 파싱 오류 및 연속 요청 충돌을 해결했습니다.
문제 상황
- AI Agent 응답을 실시간으로 표시하기 위한 자연스러운 스트리밍 UI/UX 요구
- 표준 EventSource의 GET 전용, 요청 본문·커스텀 헤더 미지원 제약
선택 이유
- 단방향 응답 수신에 적합한 SSE의 HTTP 기반 단순성 및 기존 통신 추상화 활용
- 메시지 순서 보장과 자동 재연결 기능을 통한 응답 유실 방지
- POST 스트리밍, 청크 파싱, 연결 정리 요구에 맞춘 Custom EventSource 구현 결정
구조와 흐름
- fetch POST 응답 스트림을 TextDecoder와 라인 분리·메시지 조립 단계로 처리
- data·event·id·retry 필드 파싱과 onmessage 콜백 전달
- 오류 시 백오프 재시도, 기존 연결 중단과 ConnectionManager 기반 상태 관리
주의할 점
- 임의 크기 청크 수신에 대비한
\n\n기준 버퍼링과 완전한 메시지 조립 필요 - 연속 요청 시 이전 fetch 취소, 이벤트 리스너·버퍼·재시도 타이머 정리 필요
- 백그라운드 탭에서의 단순 종료·재연결 방식에 따른 응답 재생성과 상태 관리 복잡성
