WebSocket em JavaScript: aplicações em tempo real do A ao Z

Introdução ao WebSocket em JavaScript: o que é comunicação em tempo real?

Na web moderna, os usuários estão acostumados a atualizações instantâneas: mensagens em chats chegam sem recarregar a página, cotações de ações mudam em tempo real e, em jogos online, as ações dos oponentes são visíveis imediatamente. Tudo isso se tornou possível graças à tecnologia WebSocket — um protocolo que garante uma conexão bidirecional permanente entre o cliente e o servidor.

Ao contrário da clássica requisição HTTP, onde o cliente envia uma solicitação e aguarda a resposta, o WebSocket permite que o servidor envie dados ao cliente a qualquer momento. Isso abre possibilidades ilimitadas para a criação de aplicações em tempo real com JavaScript. Neste artigo, abordaremos o WebSocket desde os fundamentos até a criação de um chat completo em Node.js.

Fundamentos do WebSocket: como o protocolo funciona

O que é WebSocket e como ele difere do HTTP?

WebSocket é um protocolo de comunicação que opera sobre TCP. Ele começa como uma requisição HTTP (handshake), após a qual a conexão é "atualizada" para WebSocket, e os dados são transmitidos em ambas as direções sem cabeçalhos adicionais. Isso o torna ideal para aplicações onde a baixa latência é importante.

Principais vantagens do WebSocket sobre métodos tradicionais (Polling, Long Polling):

• Conexão permanente — não é necessário criar uma nova requisição HTTP para cada atualização
• Baixa latência — os dados são transmitidos instantaneamente assim que aparecem no servidor
• Economia de tráfego — tamanho mínimo dos frames (apenas 2 bytes de dados de serviço)
• Comunicação bidirecional — o servidor pode iniciar o envio de dados

Estabelecendo a conexão: handshake

O processo começa com uma requisição HTTP do cliente contendo o cabeçalho Upgrade: websocket. O servidor, que suporta WebSocket, responde com o status 101 Switching Protocols. Após isso, a conexão é considerada estabelecida.

// Exemplo de requisição HTTP para estabelecer WebSocketGET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13

Criação de um servidor WebSocket em Node.js

Instalação e configuração da biblioteca ws

Para trabalhar com WebSocket no lado do servidor, usaremos a biblioteca popular ws. Ela é leve, rápida e totalmente compatível com a especificação do protocolo.

// Instalação da biblioteca// npm install ws

Vamos criar um servidor WebSocket simples:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {    console.log('Novo cliente conectado');        ws.on('message', (message) => {        console.log('Mensagem recebida:', message.toString());        // Envia resposta para todos os clientes conectados        wss.clients.forEach((client) => {            if (client.readyState === WebSocket.OPEN) {                client.send(`Eco: ${message}`);            }        });    });        ws.send('Bem-vindo ao servidor WebSocket!');});

console.log('Servidor WebSocket iniciado na porta 8080');

Conexão do cliente em JavaScript

No lado do cliente (navegador), utiliza-se o objeto nativo WebSocket:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {    console.log('Conexão estabelecida');    socket.send('Olá, servidor!');};

socket.onmessage = (event) => {    console.log('Mensagem do servidor:', event.data);};

socket.onclose = () => {    console.log('Conexão fechada');};

socket.onerror = (error) => {    console.error('Erro no WebSocket:', error);};

Criação de um chat em tempo real com JavaScript e