WebSockets와 Signal 기반 상태 관리로 구현한 실시간 대시보드 아키텍처

Context

HTTP Polling 방식의 잦은 서버 요청으로 인한 리소스 낭비와 데이터 최신성 유지의 한계 발생. 사용자의 수동 새로고침 없이도 즉각적인 데이터 업데이트가 필요한 실시간 메트릭 시각화 요구사항 대두.

Technical Solution

• RxJS webSocket을 활용한 Persistent Two-way Connection 구축으로 불필요한 HTTP 요청 제거
• shareReplay({ bufferSize: 1, refCount: true }) 적용을 통한 단일 WebSocket 연결의 다중 컴포넌트 공유 구조 설계
• timer(0, 3000)와 switchMap 조합으로 연결 유실 시 3초 간격의 자동 Reconnection 메커니즘 구현
• filter와 map 연산자를 이용해 단일 Stream을 metrics와 alerts 등 목적별 개별 Observable로 분리
• Angular Signals 기반의 Store를 도입하여 데이터 흐름을 단일화하고 컴포넌트의 렌더링 효율 최적화
• 지수 백오프(Exponential Backoff) 전략을 적용한 재연결 지연 시간 설계를 통한 서버 부하 방지