Desenvolvendo uma Tela de Administração em Tempo Real com WebSockets

Neste artigo, vamos explorar detalhadamente como criar uma tela de administração para monitoramento de rotas e motoristas em tempo real usando WebSockets. Este sistema permite ao administrador acompanhar múltiplas corridas acontecendo simultaneamente, visualizando o progresso diretamente em um mapa integrado à aplicação.

---

Introdução

O objetivo desta implementação é oferecer ao administrador uma visualização centralizada e em tempo real das rotas e dos motoristas (carrinhos) ativos no sistema. Com o uso de WebSockets, é possível exibir dados dinâmicos — desde a movimentação dos veículos até a renderização de novas rotas no mapa sem recarregar a página.

Preparação do Ambiente

O primeiro passo é criar o arquivo admin.txt e estruturar a página de administração. A base do frontend é feita em React, utilizando componentes funcionais e a biblioteca Google Maps (usando hooks como useLoadMap) para renderizar o mapa na tela. O elemento HTML de referência, chamado de mapContainer, é criado via useRef:

const mapContainer = useRef<HTMLDivElement>(null);

A tela do administrador é composta majoritariamente pelo mapa, que ocupa 100% da área, para oferecer uma visualização ampla. O layout utiliza CSS Grid e padding de 80 pixels (em aulas anteriores, utilizava-se 40). É fundamental garantir que o container tem altura e largura de 100%, permitindo ao administrador ver todas as informações relevantes.

Configurando o WebSocket e a Função Handle Socket

Com o mapa carregado, o próximo passo é lidar com o canal de comunicação em tempo real. Inicializa-se uma instância de WebSocket (WS instance), que será responsável por receber updates dos motoristas e rotas. Para isso, implementa-se a função handleSocket, fundamental para processar as mensagens transmitidas pelo servidor:

function handleSocket(socket) {
  socket.on('message', (event) => {
    // Recebe as posições dos motoristas
    if (isJson(event.data)) {
      const data = JSON.parse(event.data);
      const roadID = data?.roadID;
      if (roadID) {
        handleMessage(data); // Função que processa o evento
      }
    }
  });
  socket.on('close', () => {
    console.log('Cristiano Ronaldo: conexão fechada.');
  });
}

Essa função escuta o evento de mensagem (message) — enviado em broadcast pelo backend para todos os clientes conectados, garantindo que todas as telas de admin vejam os dados em tempo real. O JSON da mensagem é validado e, caso contenha um roadID válido, dispara o processamento específico para atualização do mapa. Em caso de erro ou fechamento de conexão, exibe um aviso no console, como "Cristiano Ronaldo: conexão fechada." para depuração.

Gerenciamento do Ciclo de Vida com useEffect

A função useEffect é usada para iniciar e limpar a conexão WebSocket baseada no carregamento do mapa:

useEffect(() => {
  if (map) {
    handleSocket(wsInstance);
    return () => wsInstance.close();
  }
}, [map]);

Esse efeito garante:

• Conexão WebSocket inicializada apenas quando o mapa estiver pronto.
• Encerramento da conexão quando o componente for desmontado, evitando vazamento de recursos.

Renderização das Rotas e Atualização dos Carrinhos no Mapa

Após o recebimento de uma mensagem, a função handleMessage desestrutura os dados relevantes, recuperando informações como roadID, latitude e longitude do motorista. O processo segue os passos:

1. Verifica se a rota já existe no mapa: Caso não exista, busca-se seus detalhes via API (endpoint /hots/{hotID}), usando o token de autorização presente nos cookies. Exemplo de cabeçalho:

GET /hots/EV20
Authorization: Bearer <token>

2. Formatação dos Dados da Rota: Os dados recebidos da API são processados usando um model TypeScript para converter e garantir a integridade dos dados antes de sua utilização. Utiliza-se métodos como mapRootModel e recursos da classe Root.

3. Renderização no Google Maps:

• Adição do trajeto da rota com os marcadores de início e fim.
• Atualização da posição do carrinho em tempo real conforme a latitude e longitude transmitidas pelo WebSocket.

O elemento visual é uma div renderizada via React, mantendo o mapa responsivo e a interface clara.

Exemplo Prático de Testes: 41 e 20

Durante os testes, exemplificou-se a execução paralela de múltiplos carros (por exemplo, IDs 41 e 20, nomes sugestivos como "ROM", "HTML Dev Vel", "Wesley Safad", e "EV 20"). O administrador abre várias abas, inicia corridas diferentes e todas as movimentações aparecem em tempo real, confirmando o recebimento correto dos dados via broadcast do WebSocket. As rotas são exibidas com linhas distintas, e cada carrinho move-se conforme os dados transmitidos.

Ao abrir, por exemplo:

• localhost:3000/admin (tela de administração)
• Iniciar corridas manualmente de diferentes origens/destinos
• Observar que cada nova corrida faz surgir uma nova rota e movimentação de carrinho, tudo visível ao administrador.

Em casos de problemas, como movimentação travada, recomenda-se refatorar a chamada de atualização do carrinho para fora da renderização inicial, garantindo fluidez.

Integração com Autenticação e Segurança

Toda busca à API de rotas necessita de autenticação, sendo passada pelo header como Bearer token. O token é extraído dos cookies via parseCookies. Isso garante que apenas administradores autenticados visualizem e manipulem as informações sensíveis do painel.

Mensagens de Erro e Feedback Visual

Além dos logs padrão, são utilizados console logs diferenciados para auxiliar na depuração (ex: "Cristiano Ronaldo: conexão fechada"). Esses feedbacks proveem informação rápida durante o desenvolvimento e testes da funcionalidade.

Próximos Passos e Melhorias

A tela de administração apresentada é base para um sistema mais robusto, similar a aplicativos como Uber ou iFood, onde múltiplos motoristas operam em paralelo. Algumas sugestões de evolução:

• Implementação da perspectiva do motorista, permitindo ao condutor ver detalhes da própria corrida: rota, quanto já percorreu, percentual (por exemplo, 80% concluído).
• Exibição de estatísticas agregadas (número de motoristas on-line, quantidade de rotas ativas, percentual de rotas concluídas).
• Integração futura com notificações e painéis analíticos.

A versão apresentada é aberta a sugestões e pode ser base para novos projetos, como delivery on-demand.

Conclusão

Com WebSockets, integração ao Google Maps e React, a administração de múltiplos veículos em tempo real torna-se uma tarefa eficiente. A abordagem baseada em eventos garante atualização imediata da interface administrativa sem recargas, otimizando a tomada de decisão e monitoramento do serviço.

Para ver a implementação completa e o tutorial em vídeo, acesse:

Source video no YouTube