SSE(Server-Sent Events) 채팅 시스템

사전 기반 지식

• 1단계 폴링 시스템 완전 이해 (MVC 패턴, JPA, Mustache)
• HTTP 통신의 한계: 클라이언트가 먼저 요청해야만 응답 가능
• JavaScript 기초: EventSource API와 이벤트 처리
• 멀티스레드 개념: 동시성과 스레드 안전성에 대한 기본 이해

폴링 vs SSE 비교

통신 방향	클라이언트 → 서버 (요청/응답)	서버 → 클라이언트 (푸시)
연결 방식	매번 새로운 HTTP 연결	하나의 지속적인 HTTP 연결
실시간성	폴링 주기에 따른 지연	즉시 전달 가능
서버 부하	높음 (불필요한 요청)	낮음 (필요시에만 전송)
네트워크 효율	비효율적	효율적
구현 복잡도	간단	중간

 

SSE의 주요 활용 사례

• 실시간 알림 및 알림 센터: 새로운 메시지, 친구 요청, 좋아요 등 서버에서 발생하는 이벤트들을 사용자에게 즉시 알릴 때 사용됩니다.
• 뉴스피드 및 타임라인: 페이스북, 인스타그램과 같이 팔로우하는 사용자의 새로운 게시물이 올라왔을 때, 클라이언트가 새로고침하지 않아도 자동으로 업데이트되게 만듭니다.
• 실시간 주가 정보/스포츠 경기 스코어: 서버에서 지속적으로 변하는 주식 가격이나 경기 스코어를 여러 사용자에게 실시간으로 중계할 때 사용됩니다.
• 라이브 대시보드: 서버의 상태, 데이터 사용량, 로그 등 실시간으로 변하는 모니터링 데이터를 웹 대시보드에 보여줄 때 유용합니다.
• 배달/주문 상태 추적: 배달 앱에서 주문 상태가 '접수 완료' → '배달 중' → '배달 완료' 등으로 변경될 때, 클라이언트 화면을 실시간으로 업데이트하는 데 사용됩니다.

이러한 기능들은 모두 클라이언트가 서버에 데이터를 보낼 필요 없이, 오직 서버로부터 데이터를 받기만 하면 되기 때문에 단방향 통신에 최적화된 SSE가 효율적이고 정석적인 방법이 될 수 있습니다.

 

SSE 통신 흐름

1. 클라이언트: new EventSource('/sse/connect') → 서버에 SSE 연결 요청
2. 서버: SseEmitter 생성 → 클라이언트와 지속적 연결 유지
3. 메시지 작성: 사용자가 새 메시지 POST → 서버에 저장
4. 브로드캐스트: sseService.broadcastMessage() → 모든 연결된 클라이언트에 즉시 전송
5. 클라이언트: eventSource.addEventListener('newMessage') → 새 메시지 실시간 수신

SSE의 한계와 WebSocket의 필요성

SSE는 폴링보다 효율적이지만 여전히 단방향 통신의 한계가 있습니다. 채팅에서 사용자가 "입력 중..." 상태를 보여주거나, 실시간 게임과 같은 양방향 상호작용이 필요한 경우에는 WebSocket이 더 적합합니다.