WebSockets를 이용한 실시간 Angular 대시보드 구축하기
대부분의 대시보드는 정체된 느낌을 줍니다. 사용자는 페이지에 접속한 뒤 기다려야 합니다. 새로고침을 누르거나, 서버 속도를 늦추는 지속적인 폴링(polling)을 감수해야 하죠.
WebSockets는 이를 바꿔놓습니다. 클라이언트가 데이터를 요청하는 대신, 서버가 데이터를 밀어넣어(push) 줍니다. 이는 실시간 지표, 사용자 활동 또는 금융 데이터에 이상적입니다.
Angular, RxJS, 그리고 Signals를 사용하여 프로덕션 수준의 실시간 대시보드를 구축하는 방법을 소개합니다.
아키텍처
- RxJS
webSocket을 사용하여 연결을 관리합니다. shareReplay를 사용하여 여러 컴포넌트가 하나의 연결을 공유하도록 합니다.- 단일 진실 공급원(single source of truth)을 위해 Angular Signals를 사용합니다.
- 컴포넌트를 단순하게 유지하기 위해 Store 패턴을 사용합니다.
1. 서비스 레이어
컴포넌트마다 새로운 연결을 열지 마세요. rxjs/webSocket의 webSocket subject를 사용하세요. 앱 전체가 하나의 스트림을 공유할 수 있도록 shareReplay를 사용합니다. 이렇게 하면 서버가 수백 개의 불필요한 연결을 처리하는 것을 방지할 수 있습니다.
2. Signal Store
컴포넌트에 비즈니스 로직을 넣는 것을 피하세요. 서비스에 구독(subscribe)하는 Store를 만듭니다. 이 Store는 지표와 알림을 Signals에 담아둡니다. 그러면 컴포넌트는 단순히 이 Signals를 읽기만 하면 됩니다. 이를 통해 UI를 빠르게 만들고 테스트하기 쉽게 할 수 있습니다.
3. 깔끔한 컴포넌트
컴포넌트는 오직 한 가지 일, 즉 데이터를 렌더링하는 일만 해야 합니다. Signal 기반의 Store를 사용하면 컴포넌트 코드는 매우 간결해집니다. 값을 읽어서 화면에 보여주기만 하면 되기 때문입니다.
핵심 프로 팁
- 연결 상태: 항상 "Live" 또는 "Reconnecting" 표시를 보여주세요. 사용자는 데이터가 최신인지 알아야 합니다.
- 에러 핸들링: 재연결 시 지수 백오프(exponential backoff)를 사용하세요. 서버가 다운되었을 때 서버에 과도한 요청을 보내지 마세요.
- 데이터 관리: 알림 배열에
.slice()를 사용하세요. 이렇게 하면 메모리를 너무 많이 사용하지 않으면서도 유용한 히스토리를 유지할 수 있습니다.
WebSockets는 양방향 통신이 필요할 때 가장 효과적입니다. 만약 데이터를 받기만 하면 된다면, 더 간단한 옵션인 Server-Sent Events (SSE)를 살펴보세요.
사용자가 새로고침 버튼을 누르게 만들지 마세요.
출처: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he