WebSocketsを使用したリアルタイムAngularダッシュボードの構築

ほとんどのダッシュボードは、情報の更新が遅く感じられます。ユーザーはページにアクセスした後、待たされることになります。手動でリフレッシュするか、サーバーの負荷を高める絶え間ないポーリングに対処しなければなりません。

WebSocketsはこれを変えます。クライアントがデータを要求するのではなく、サーバーがデータをプッシュします。これは、ライブメトリクス、ユーザーアクティビティ、または金融データに最適です。

Angular、RxJS、およびSignalsを使用して、本番環境で使用できるリアルタイムダッシュボードを構築する方法を以下に示します。

アーキテクチャ

  • 接続の管理にはRxJSのwebSocketを使用します。
  • 複数のコンポーネントで1つの接続を共有するためにshareReplayを使用します。
  • 単一の信頼できる情報源（Single Source of Truth）としてAngular Signalsを使用します。
  • コンポーネントをシンプルに保つためにStoreパターンを使用します。

  1. サービスレイヤー コンポーネントごとに新しい接続を開かないでください。rxjs/webSocketからwebSocket subjectを使用します。アプリ全体で1つのストリームを共有するためにshareReplayを使用します。これにより、サーバーが数百もの不要な接続を処理することを防げます。

  2. Signal Store コンポーネントにビジネスロジックを詰め込まないようにしましょう。サービスを購読（subscribe）するStoreを作成します。このStoreは、メトリクスやアラートをSignalsとして保持します。コンポーネントはこれらのSignalを読み取るだけで済みます。これにより、UIが高速になり、テストも容易になります。

  3. クリーンなコンポーネント コンポーネントは「データをレンダリングする」という1つのことだけを行うべきです。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