Construire des tableaux de bord Angular en temps réel

La plupart des tableaux de bord semblent obsolètes. Les utilisateurs voient des données périmées et doivent cliquer sur actualiser. Vous pouvez utiliser le polling, mais cela sollicite trop votre serveur.

Les WebSockets résolvent ce problème. Le serveur pousse les mises à jour dès qu'elles se produisent. Pas besoin d'actualiser.

Voici comment construire un tableau de bord en temps réel en utilisant Angular, RxJS et Signals.

L'Architecture

  • Utilisez RxJS webSocket pour la connexion.
  • Utilisez Angular Signals pour l'état.
  • Utilisez un store unique pour stocker vos données.
  1. Le service WebSocket

N'ouvrez pas une nouvelle connexion pour chaque composant. Utilisez shareReplay dans votre service. Cela permet à plusieurs widgets d'utiliser une seule et même connexion.

Gérez les erreurs en les interceptant dans le flux. Cela évite que toute votre application ne plante lorsque la connexion est interrompue.

  1. Le Signal Store

Au lieu de laisser les composants gérer les données, utilisez un store basé sur les Signals. Cela crée une source unique de vérité.

  • Stockez des métriques telles que l'utilisation du CPU et le nombre d'utilisateurs actifs.
  • Conservez un historique limité des alertes récentes.
  • Utilisez des computed signals pour signaler les états critiques.
  1. Composants purs

Vos composants doivent rester simples. Ils ne doivent pas gérer la logique. Ils se contentent de lire le store et de rendre l'interface utilisateur. Cela rend votre code facile à tester et à maintenir.

Conseils clés pour la production

  • Statut de la connexion : Indiquez toujours aux utilisateurs s'ils sont en direct ou en cours de reconnexion.
  • Exponential Backoff : Ne tentez pas de vous reconnecter chaque seconde. Utilisez un délai qui augmente avec le temps pour protéger votre serveur.
  • Sécurité : Transmettez vos jetons d'authentification via des paramètres de requête ou par le premier message.

Les WebSockets sont idéaux lorsque vous avez besoin d'une communication bidirectionnelle. Si vous avez seulement besoin de recevoir des données, tournez-vous vers les Server-Sent Events (SSE).

Arrêtez de forcer vos utilisateurs à cliquer sur actualiser. Construisez quelque chose qui reste en direct.

Avez-vous déjà construit des fonctionnalités en temps réel avec Angular ? Avez-vous utilisé les WebSockets ou le polling ?

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