SSE(Server-Sent Events)를 활용한 실시간 채팅 애플리케이션 구현 가이드

핵심 기술

이 글은 현대 웹 애플리케이션에서 필수적인 실시간 데이터 통신을 구현하기 위해 Server-Sent Events(SSE) 기술을 활용하는 방법을 NestJS 백엔드와 React 프론트엔드 예시 코드를 통해 상세히 설명합니다.

기술적 세부사항

• SSE 개요: 서버에서 클라이언트로의 단방향 실시간 데이터 스트리밍에 최적화된 기술로, HTTP 기반이며 자동 재연결 기능을 지원합니다.
• 기존 기술과의 비교: 폴링, 롱폴링, 웹소켓의 단점을 설명하고 SSE가 가지는 장점(단방향 통신, 간단한 구현, HTTP 기반)을 부각합니다.
• SSE vs WebSocket: 통신 방향, 프로토콜, 연결 유지, 구현 복잡도, 사용 사례 등 다양한 측면에서 비교 분석합니다.
• SSE 적합 시나리오: 서버 → 클라이언트 단방향 데이터 전송, 실시간 알림, 채팅, 로그 스트리밍 등 SSE가 강점을 보이는 사용 사례를 제시합니다.
• SSE 기본 특징: HTML5 표준, HTTP 기반, 자동 재연결, 이벤트 기반, 단방향 통신, 브라우저 네이티브 지원을 설명합니다.
• NestJS 백엔드 구현:
  • GET /chat/stream 엔드포인트에서 SSE 연결을 수립하고 text/event-stream 헤더를 설정합니다.
  • sessionId별로 Response 객체를 Map에 저장하여 연결을 관리합니다.
  • 하트비트(heartbeat)를 통해 연결 유지 및 Connection: keep-alive 헤더 설정을 설명합니다.
  • 연결 종료 시 clearInterval 및 Map에서 삭제하는 정리 로직을 포함합니다.
  • POST /chat/stream 엔드포인트에서 클라이언트 메시지를 받아 OpenAI API를 호출하고, 스트리밍 응답을 SSE 연결로 푸시하는 방식을 보여줍니다.
  • AsyncGenerator를 사용하여 OpenAI 스트리밍 응답을 처리하고 SSE 데이터 형식(`data: ...

)으로 클라이언트에 전송합니다. * **React 프론트엔드 구현**: *useState,useCallback,useRef훅을 사용하여 상태 관리 및 콜백 함수 메모이제이션을 구현합니다. *EventSourceAPI를 사용하여 SSE 연결을 수립하고,onmessage,onerror,onopen이벤트 핸들러를 정의합니다. *onChunk콜백을 통해 수신된 SSE 데이터를 파싱하고 UI를 업데이트합니다. * 사용자 메시지 전송 시POST요청을 보내고, 백엔드로부터 받은 스트리밍 데이터를 실시간으로 채팅 UI에 반영하는 로직을 구현합니다. * 세션 ID 관리 및 연결 해제(eventSource.close())를 위한cleanup` 로직을 포함합니다.

개발 임팩트

SSE를 활용하면 웹소켓보다 간단하게 서버에서 클라이언트로의 실시간 데이터 스트리밍 기능을 구현할 수 있습니다. 이는 개발 복잡성을 줄이고, 기존 HTTP 인프라를 활용할 수 있다는 장점이 있어, 실시간 알림, 채팅, 뉴스 피드 등 다양한 서비스에 효율적으로 적용될 수 있습니다. 또한, 자동 재연결 기능으로 인해 네트워크 불안정성에도 강건한 실시간 경험을 제공할 수 있습니다.