Construindo Dashboards Angular em Tempo Real com WebSockets

A maioria dos dashboards parece obsoleta. Os usuários acessam uma página e esperam. Eles clicam em atualizar ou lidam com o polling constante que sobrecarrega o seu servidor.

Os WebSockets mudam isso. Em vez de o cliente solicitar os dados, o servidor os envia (push). Isso é ideal para métricas ao vivo, atividade de usuários ou dados financeiros.

Veja como construir um dashboard em tempo real pronto para produção usando Angular, RxJS e Signals.

A Arquitetura

  • Use o webSocket do RxJS para gerenciar a conexão.
  • Use o shareReplay para permitir que múltiplos componentes utilizem uma única conexão.
  • Use Angular Signals para uma única fonte de verdade (single source of truth).
  • Use um padrão Store para manter os componentes simples.

  1. A Camada de Serviço Não abra uma nova conexão para cada componente. Use o subject webSocket de rxjs/webSocket. Use o shareReplay para que todo o seu aplicativo compartilhe um único stream. Isso evita que seu servidor tenha que lidar com centenas de conexões desnecessárias.

  2. O Signal Store Evite colocar a lógica de negócio em seus componentes. Crie um Store que assine o seu serviço. Este store armazena suas métricas e alertas em Signals. Seus componentes, então, apenas leem esses signals. Isso torna sua UI rápida e fácil de testar.

  3. Componentes Limpos Seus componentes devem fazer apenas uma coisa: renderizar dados. Se você usar um store baseado em Signals, o código do seu componente permanecerá minúsculo. Ele lê um valor e o exibe na tela.

Dicas de Especialista

  • Status da Conexão: Sempre mostre um indicador de "Ao Vivo" ou "Reconectando". Os usuários precisam saber se os dados estão atualizados.
  • Tratamento de Erros: Use exponential backoff para reconexões. Não sobrecarregue seu servidor quando ele estiver fora do ar.
  • Gerenciamento de Dados: Use .slice() em seus arrays de alertas. Isso mantém seu histórico útil sem consumir muita memória.

Os WebSockets funcionam melhor quando você precisa de comunicação bidirecional. Se você precisar apenas receber dados, pesquise sobre Server-Sent Events (SSE) como uma opção mais simples.

Pare de fazer seus usuários clicarem no botão de atualizar.

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