WebSockets em JavaScript: criando aplicações em tempo real do zero

WebSockets em JavaScript: quando um site "vivo" não é mágica, mas código

Você já se perguntou como funcionam os chats online, cotações de ações em tempo real ou jogos multijogador no navegador? O segredo é simples e elegante — WebSockets em JavaScript. Esta tecnologia transforma um site estático em um organismo vivo que reage instantaneamente às ações de outros usuários.

Neste artigo, não vamos apenas analisar a teoria. Vamos escrever um chat real do zero, aprender a tratar erros e entender por que as aplicações em tempo real com WebSockets funcionam mais rápido que o bom e velho AJAX com polling. Apertem os cintos — vai ser interessante.

Por que o HTTP não é adequado para tempo real? (Breve introdução)

O HTTP comum funciona no princípio "requisição-resposta". O cliente pede — o servidor responde. Se o servidor quiser dizer algo por conta própria (por exemplo, "chegou uma nova mensagem"), ele precisa esperar até que o cliente pergunte novamente. Isso lembra uma correspondência por pombos-correio — lento e ineficiente.

Os desenvolvedores criaram soluções alternativas:

\n
• Polling — o cliente consulta o servidor a cada 5 segundos: "E aí, tem novidades?"
\n
• Long polling — o servidor mantém a conexão aberta até que uma resposta apareça (mas ainda é um canal unidirecional).
\n

E é aqui que entram em cena os WebSockets. Imagine que você abriu uma linha telefônica entre o navegador e o servidor. Ambos podem falar a qualquer momento, simultaneamente, sem atrasos para "levantar o fone". Essa é a mágica da WebSocket API do JavaScript.

Como funciona o WebSocket: protocolo, handshake, mensagens

Tecnicamente, o WebSocket é um protocolo separado (ws:// ou wss:// para conexão criptografada). Tudo começa com um handshake HTTP:

\n
1. O cliente envia uma requisição HTTP comum com o cabeçalho Upgrade: websocket.
\n
2. O servidor responde: "101 Switching Protocols" — e a conexão é "atualizada" para WebSocket.
\n
3. Depois disso, é full-duplex: os dados voam em ambas as direções na forma de frames (texto ou dados binários).
\n

No navegador, para trabalhar com WebSocket, usa-se o objeto nativo WebSocket. Nenhuma biblioteca adicional é necessária — o WebSocket JavaScript puro funciona de fábrica em todos os navegadores modernos.

Criando nosso primeiro chat em tempo real com JavaScript

Vamos criar um chat simples. A parte do servidor será escrita em Node.js com a biblioteca ws (a mais popular para WebSocket Node.js), e o cliente em JavaScript puro.

Passo 1. Instalação do servidor

npm init -y\nnpm install ws

Passo 2. Código do servidor (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('Novo usuário conectado');\n\n    // Envia uma saudação para o novo cliente\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: 'Bem-vindo ao chat!'\n    }));\n\n    // Recebe mensagens do cliente\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('Recebido:', message);\n\n        // Envia a mensagem para todos os clientes conectados\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // Trata a desconexão\n    ws.on('close', function() {\n        console.log('Usuário desconectado');\n    });\n});\n\nconsole.log('Servidor iniciado em ws://localhost:8080');

Passo 3. Clie