构建实时 Angular Dashboard

大多数仪表盘都显得陈旧。用户看到的是旧数据，必须手动点击刷新。你可能会使用轮询（polling），但这会对服务器造成过大的压力。

WebSockets 解决了这个问题。服务器会在更新发生时立即推送。无需刷新。

以下是如何使用 Angular、RxJS 和 Signals 构建实时仪表盘的方法。

架构设计

  • 使用 RxJS webSocket 进行连接。
  • 使用 Angular Signals 管理状态。
  • 使用单一 Store 来存储数据。

1. WebSocket 服务

不要为每个组件都开启一个新连接。在你的服务中使用 shareReplay。这可以让多个小部件（widgets）共用同一个连接。

通过在流（stream）中捕获错误来处理异常。这可以防止在连接断开时导致整个应用崩溃。

2. Signal Store

不要让组件直接管理数据，而是使用基于 Signal 的 Store。这可以创建一个单一的事实来源（single source of truth）。

  • 存储 CPU 使用率和活跃用户数等指标。
  • 保留最近警报的简短历史记录。
  • 使用 computed signals 来标记关键状态。

3. 纯组件 (Pure Components)

你的组件应该保持简单。它们不应该处理逻辑，而只需从 Store 中读取数据并渲染 UI。这会让你的代码易于测试和维护。

生产环境的关键技巧

  • 连接状态：始终向用户显示他们当前是处于实时状态还是正在重新连接。
  • 指数退避 (Exponential Backoff)：不要每秒都尝试重新连接。使用随时间增长的延迟时间来保护你的服务器。
  • 安全性：通过查询参数或第一条消息传递你的身份验证令牌（auth tokens）。

当你需要双向通信时，WebSockets 的效果最好。如果你只需要接收数据，可以考虑使用 Server-Sent Events (SSE)。

不要再让用户点击刷新了。构建一些能够实时更新的东西吧。

你在 Angular 中构建过实时功能吗？你使用的是 WebSockets 还是轮询？

来源：https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he