Echtzeit-Angular-Dashboards mit WebSockets bauen

Die meisten Dashboards wirken veraltet. Nutzer landen auf einer Seite und warten. Sie drücken auf „Aktualisieren“ oder müssen mit ständigem Polling zurechtkommen, das Ihren Server verlangsamt.

WebSockets ändern das. Anstatt dass der Client nach Daten fragt, pusht der Server sie. Dies ist ideal für Live-Metriken, Benutzeraktivitäten oder Finanzdaten.

So bauen Sie ein produktionsreifes Echtzeit-Dashboard mit Angular, RxJS und Signals.

Die Architektur

  • Verwenden Sie RxJS webSocket, um die Verbindung zu verwalten.
  • Verwenden Sie shareReplay, damit mehrere Komponenten eine einzige Verbindung nutzen können.
  • Verwenden Sie Angular Signals als Single Source of Truth.
  • Verwenden Sie ein Store-Pattern, um Komponenten einfach zu halten.

  1. Die Service-Schicht Öffnen Sie nicht für jede Komponente eine neue Verbindung. Verwenden Sie das webSocket-Subject aus rxjs/webSocket. Nutzen Sie shareReplay, damit Ihre gesamte App einen gemeinsamen Stream nutzt. Dies verhindert, dass Ihr Server hunderte unnötige Verbindungen verarbeiten muss.

  2. Der Signal Store Vermeiden Sie es, Geschäftslogik in Ihre Komponenten zu schreiben. Erstellen Sie einen Store, der sich auf Ihren Service abonniert. Dieser Store hält Ihre Metriken und Warnmeldungen in Signals. Ihre Komponenten lesen dann einfach diese Signals. Das macht Ihre UI schnell und einfach testbar.

  3. Saubere Komponenten Ihre Komponenten sollten nur eine Sache tun: Daten rendern. Wenn Sie einen Signal-basierten Store verwenden, bleibt Ihr Komponenten-Code minimal. Er liest einen Wert und zeigt ihn auf dem Bildschirm an.

Wichtige Profi-Tipps

  • Verbindungsstatus: Zeigen Sie immer einen „Live“- oder „Wird neu verbunden“-Indikator an. Nutzer müssen wissen, ob ihre Daten aktuell sind.
  • Fehlerbehandlung: Verwenden Sie Exponential Backoff für die Wiederverbindung. Überlasten Sie Ihren Server nicht, wenn er offline ist.
  • Datenmanagement: Verwenden Sie .slice() auf Ihren Alert-Arrays. So bleibt Ihr Verlauf nützlich, ohne zu viel Arbeitsspeicher zu verbrauchen.

WebSockets funktionieren am besten, wenn Sie eine bidirektionale Kommunikation benötigen. Wenn Sie nur Daten empfangen müssen, schauen Sie sich Server-Sent Events (SSE) als einfachere Option an.

Lassen Sie Ihre Nutzer nicht mehr ständig auf die Schaltfläche „Aktualisieren“ klicken.

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