Construcción de dashboards de Angular en tiempo real con WebSockets

La mayoría de los dashboards se sienten desactualizados. Los usuarios llegan a una página y esperan. Tienen que pulsar actualizar o lidiar con un polling constante que ralentiza tu servidor.

Los WebSockets cambian esto. En lugar de que el cliente solicite los datos, el servidor los envía (push). Esto es ideal para métricas en vivo, actividad de usuarios o datos financieros.

Aquí te explicamos cómo construir un dashboard en tiempo real listo para producción utilizando Angular, RxJS y Signals.

La Arquitectura

  • Usa webSocket de RxJS para gestionar la conexión.
  • Usa shareReplay para permitir que múltiples componentes utilicen una sola conexión.
  • Usa Angular Signals para una fuente única de verdad.
  • Usa un patrón Store para mantener los componentes simples.

  1. La capa de servicio No abras una nueva conexión para cada componente. Usa el subject webSocket de rxjs/webSocket. Usa shareReplay para que toda tu aplicación comparta un mismo flujo (stream). Esto evita que tu servidor tenga que gestionar cientos de conexiones innecesarias.

  2. El Signal Store Evita poner la lógica de negocio en tus componentes. Crea un Store que se suscriba a tu servicio. Este store mantiene tus métricas y alertas en Signals. Tus componentes simplemente leen estos signals. Esto hace que tu interfaz de usuario sea rápida y fácil de probar.

  3. Componentes limpios Tus componentes solo deben hacer una cosa: renderizar datos. Si utilizas un store basado en Signals, el código de tu componente seguirá siendo mínimo. Lee un valor y lo muestra en pantalla.

Consejos profesionales clave

  • Estado de la conexión: Muestra siempre un indicador de "En vivo" o "Reconectando". Los usuarios necesitan saber si sus datos están actualizados.
  • Gestión de errores: Usa exponential backoff para las reconexiones. No satures tu servidor cuando se caiga.
  • Gestión de datos: Usa .slice() en tus arrays de alertas. Esto mantiene tu historial útil sin consumir demasiada memoria.

Los WebSockets funcionan mejor cuando necesitas comunicación bidireccional. Si solo necesitas recibir datos, considera los Server-Sent Events (SSE) como una opción más sencilla.

Deja de obligar a tus usuarios a pulsar el botón de actualizar.

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