[flexible] 모든 탭에 퍼지는 실시간 이벤트, SSE 1개로 끝내는 전략

“여러 탭을 단 하나의 파이프로 연결하는 방법, 궁금하지 않으신가요?

여러 탭을 동시에 열어두는 환경에서, 브라우저가 허용하는 Server-Sent Events(SSE) 연결 수 제한은 실시간 서비스의 안정성과 확장성에 큰 제약이 됩니다.

이번 flexible에서는 Product Engineer라면 모두가 흥미로울, Service Worker를 활용해 단 하나의 SSE 연결로 모든 탭에 실시간 이벤트를 전파하는 구조를 소개합니다.

flex는 이 문제를 해결하기 위해 백엔드부터 클라이언트까지 전 과정을 아우르는 구조를 설계했습니다. 백엔드에서는 Kotlin 기반 Spring 애플리케이션이 Kafka와 NATS 같은 다양한 메시지 브로커를 통해 이벤트 스트림을 발행하고, 이를 CloudEvents 인터페이스와 AWS Glue Schema Registry에 등록된 Avro 스키마로 정의했습니다. 덕분에 브라우저에서는 자동 생성된 TypeScript 인터페이스를 통해 이벤트를 타입 안전하게 소비할 수 있었고, 개발자들은 복잡한 형 변환이나 불확실한 데이터 처리에 대한 걱정을 덜 수 있었습니다.

클라이언트에서는 Service Worker가 핵심 역할을 맡습니다. 단 하나의 SSE 연결만 유지하면서 서버로부터 들어온 이벤트를 모든 탭과 윈도우에 전파합니다. 이 과정에서 마지막 이벤트 ID를 저장해 재연결 시 유실 메시지를 복구하고, 자동 구독 해지·재연결, 실패 누적 시 지수 백오프까지 적용해 안정성과 신뢰성을 높였습니다. 결국 여러 탭이 동시에 열린 환경에서도 불필요한 연결을 줄이고, 일관된 실시간 이벤트 전달을 보장할 수 있는 구조가 완성된 것입니다.

일정 & 장소

• 일시 : 2025년 9월 25일 목요일 오후 7시 - 9시
• 장소 : 미래에셋플레이스 8층 flex Lounge
• 대상: Product Engineer - Frontend & Backend
• 구성 :
  • 19:10 ~ 19:20 오프닝
  • 19:20 ~ 20:20 모든 탭에 퍼지는 실시간 이벤트, SSE 1개로 끝내는 전략
  • 20:20 ~ 21:00 플렉스팀과 자유로운 네트워킹 시간

신청 방법

• 신청 기간: 9월 14일 일요일 까지
• 참석자 발표: 9월 15일 월요일, 이메일과 문자로 개별 안내드릴 예정입니다.
• 신청 방법: 아래 '신청하기' 링크 클릭 하시어, 제출 부탁드립니다.

안내 사항

• 가볍게 드실 수 있는 저녁 식사와 음료를 준비했습니다.
• 인원이 초과될 경우 부득이하게 참석이 어려울 수 있으니 양해 부탁드립니다.
• 한정된 인원으로 진행되는 만큼 초대되신 분들은 꼭 참석 부탁드립니다.
• 기타 문의 사항은 join@flex.team으로 연락 부탁드립니다.