지금 이순간, 재고는 줄고 있다 실시간 UI 경험을 위한 SSE 여정
- 카카오톡 선물하기 포미 페이지의 킬러 카드는 실시간 정보 제공이 중요하며, 이를 위해 SSE를 도입했습니다. 🎁
- 폴링 방식은 네트워크 트래픽과 배터리 소모 문제로 탈락, 웹소켓은 양방향 통신 불필요로 인해 SSE가 선택되었습니다. 📡
- SSE는 단방향 통신에 적합하며, 브라우저의 EventSource API를 통해 쉽게 구현 가능합니다. 📤
- EventSource는 자동 재연결 기능을 제공하여 안정적인 연결을 유지하며, HTTP/1.1 연결 수 제한, 리소스 정리, CORS 정책, 인증 방식 등을 고려해야 합니다. 🔗
- 앵귤러 프론트엔드에서는 RXJS의 Observable과 시그널을 활용하여 SSE 데이터를 UI에 반영했습니다. 🔄
- 서버에서는 스프링 웹플럭스 기반으로 SSE를 구현하고, 싱크(Sink)를 사용하여 여러 클라이언트에게 동시에 이벤트를 보냅니다. ⛲
- 레디스 펍/섭(Redis Pub/Sub)을 메시지 큐로 사용하여 낮은 지연 시간을 확보했습니다. ⚡
- SSE 서버의 부하는 활성 커넥션 수와 이벤트 발행 속도에 영향을 받으며, 몽고DB 체인지 스트림을 통해 불필요한 이벤트 발행을 줄였습니다. ⏱️
- 엔진엑스(Nginx) 프록시 설정에서 타임아웃을 늘리고, 프록시 버퍼링과 캐시 설정을 꺼서 SSE를 안정적으로 운영합니다. ⚙️
- 쿠버네티스(Kubernetes) 환경에서 별도 인그레스 컨트롤러를 사용하여 롱 커넥션들을 격리하고 연결 지속 시간을 짧게 가져갑니다. 🛡️
- SSE 도입을 통해 사용자에게 실시간 액션을 제공하고, 더 빠르고 유용한 정보를 제공할 수 있게 되었습니다. 🚀