Construindo Apps em Tempo Real com WebSockets

O polling é ruim para o seu app.

Uma vez, construí um widget de chat usando AJAX polling. Configurei o app para solicitar novas mensagens ao servidor a cada segundo. Funcionava, mas era lento. A UI parecia travada. O servidor trabalhava demais. A maioria das requisições retornava dados vazios. Parecia que eu estava tentando encher uma banheira com uma colher de chá.

WebSockets mudam isso.

Em vez de requisições constantes, você abre uma única conexão persistente. Isso permite um fluxo de dados bidirecional. O servidor pode enviar dados para o cliente instantaneamente. O cliente pode enviar dados para o servidor instantaneamente.

Por que usar WebSockets?

• A latência cai de centenas de milissegundos para dezenas de milissegundos. • A carga do servidor torna-se previsível. • Você economiza largura de banda ao remover cabeçalhos HTTP repetidos. • Funciona para chat, notificações ao vivo e jogos multiplayer.

Como funciona:

A conexão começa com uma requisição de upgrade HTTP. Se o servidor concordar, ele envia um código de status 101. Depois disso, você usa um protocolo de texto ou binário puro. Não há mais cookies ou cabeçalhos atrasando você.

Armadilhas comuns para evitar:

  • Quedas de conexão: Redes falham. Você deve implementar uma estratégia de tentativa como exponential backoff.
  • Vazamentos de memória: Sempre feche seus sockets quando um usuário sair. Conexões zumbis consomem a memória do servidor.
  • Loops de mensagens: Ao fazer o broadcast, ignore o remetente original. Caso contrário, o usuário verá sua própria mensagem duas vezes.
  • Conexões ociosas: Alguns proxies fecham conexões silenciosas. Use um heartbeat de ping/pong para manter o socket vivo.

Pare de perguntar ao servidor se algo mudou. Comece a manter uma linha aberta para que você possa conversar sempre que precisar.

Seu desafio:

Pegue um exemplo básico de chat. Adicione um indicador de "digitando...". Faça o deploy em um host como Render ou Fly.io. Assim que você vir esse indicador se mover em tempo real sem polling, você terá subido de nível.

Fonte: https://dev.to/timevolt/the-matrix-of-real-time-building-websocket-apps-for-chat-notifications-and-live-updates-3ja1