WebSocket em JavaScript: criando aplicações em tempo real com Node.js

WebSocket em JavaScript: criando aplicações real-time com Node.js

As aplicações web modernas exigem troca instantânea de dados entre cliente e servidor. O protocolo HTTP tradicional, baseado em requisições-respostas, não é adequado para tarefas onde a velocidade é importante: chats online, cotações de bolsa, jogos multijogador ou sistemas de notificações. É aqui que o protocolo WebSocket entra em ação. Neste artigo, vamos entender como o WebSocket funciona em JavaScript e criar uma aplicação real-time simples com Node.js.

O que é WebSocket e por que ele é necessário?

WebSocket é um protocolo de comunicação full-duplex sobre uma conexão TCP. Diferentemente do HTTP, onde o cliente sempre inicia a requisição, o WebSocket permite que o servidor envie dados ao cliente por iniciativa própria a qualquer momento. Isso é alcançado através do estabelecimento de um canal bidirecional permanente após o handshake inicial.

Principais vantagens do WebSocket sobre o HTTP:

• Baixa latência — os dados são transmitidos instantaneamente sem cabeçalhos HTTP repetidos.
• Economia de tráfego — overhead mínimo após o estabelecimento da conexão.
• Conexão permanente — não há necessidade de polling ou long-polling.
• Comunicação bidirecional — o servidor pode iniciar o envio de dados.

O WebSocket é ideal para aplicações real-time: chats, notificações, edição colaborativa de documentos, terminais financeiros e jogos online.

Instalação e configuração do servidor WebSocket no Node.js

Para trabalhar com WebSocket no Node.js, usaremos a biblioteca popular ws. Ela é leve, confiável e bem documentada.

Vamos começar com a instalação:

npm init -ynpm install ws

Agora, vamos criar um servidor WebSocket simples que aceitará conexões e responderá a mensagens:

// server.jsconst WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {    console.log('Cliente conectado');

    // Envia uma mensagem de boas-vindas    ws.send('Bem-vindo ao servidor WebSocket!');

    // Processa mensagens recebidas    ws.on('message', function incoming(message) {        console.log('Recebido: %s', message);        // Envia resposta para todos os clientes conectados        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`Eco: ${message}`);            }        });    });

    // Processa o fechamento da conexão    ws.on('close', function close() {        console.log('Cliente desconectado');    });});

console.log('Servidor WebSocket rodando em ws://localhost:8080');

Execute o servidor com o comando node server.js. O servidor está pronto para aceitar conexões.

Criando a parte cliente em JavaScript

A parte cliente funciona diretamente no navegador. A API WebSocket está integrada em todos os navegadores modernos, portanto, nenhuma biblioteca adicional é necessária.

Vamos criar uma página HTML com uma interface simples:

<!DOCTYPE html><html><head>    <title>Chat WebSocket</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Chat em Tempo Real</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="Digite uma mensagem..." />    <button onclick="sendMessage()">Enviar</button>

    <script>        // Conecta ao servidor WebSocket        const socket = new WebSocket('ws://localhost:8080');

        // Manipulador de