WebSockets em TypeScript: Criando aplicações em tempo real do zero

Por que WebSockets são a magia do tempo real?

Imagine que você abriu um chat de suporte, enviou uma mensagem e... esperou. Um segundo, dois, cinco. Familiar? Este é o clássico HTTP request: você pede, o servidor responde. E se o próprio servidor quiser dizer algo? Por exemplo, um novo pedido no CRM ou um movimento em um jogo online? Aqui o HTTP falha — ele precisa de um ping-pong constante.

Os WebSockets resolvem esse problema radicalmente. Eles criam um canal bidirecional permanente entre o cliente e o servidor. Um único "handshake" — e os dados voam em ambas as direções instantaneamente. Sem tráfego extra, sem atrasos. Apenas a pura magia do tempo real.

Neste artigo, vamos montar uma aplicação completa em tempo real com TypeScript. Aprenderemos a trabalhar com um servidor WebSocket em Node.js, configurar o cliente e até adicionar tratamento de erros. Ao final, você será capaz de escrever seu próprio chat, sistema de notificações ou jogo multijogador.

O que são WebSockets e para que servem?

WebSocket é um protocolo sobre TCP que fornece uma conexão permanente entre o navegador e o servidor. Ao contrário do HTTP, onde cada requisição abre e fecha a conexão, o WebSocket a mantém aberta.

Onde isso é crítico?

\n
• Chats e mensageiros — as mensagens chegam sem atraso.
\n
• Jogos online — as posições dos jogadores são atualizadas em tempo real.
\n
• Cotações de bolsa — os preços mudam a cada milissegundo.
\n
• Edição colaborativa — como o Google Docs.
\n

O TypeScript adiciona a isso a tipagem estrita. Você não enviará acidentalmente uma string em vez de um número — o compilador detectará o erro na fase de desenvolvimento. Isso evita bugs em produção.

Configuração do projeto: Node.js + TypeScript + WebSocket

Vamos começar com a inicialização. Certifique-se de ter Node.js (versão 18+) e npm instalados.

mkdir websocket-ts-chat\ncd websocket-ts-chat\nnpm init -y\nnpm install ws @types/ws typescript ts-node @types/node\nnpx tsc --init

No tsconfig.json, ative o modo estrito e defina outDir: "./dist". Esta é a base para qualquer projeto TypeScript.

Escrevendo o servidor WebSocket em TypeScript

Crie o arquivo server.ts. Aqui, levantaremos o servidor WebSocket na porta 8080.

import { WebSocketServer, WebSocket } from 'ws';\n\nconst wss = new WebSocketServer({ port: 8080 });\n\ninterface CustomWebSocket extends WebSocket {\n    id: string;\n    username?: string;\n}\n\nwss.on('connection', (ws: CustomWebSocket) => {\n    ws.id = generateId();\n    console.log(`Cliente conectado: ${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`Recebido: ${message}`);\n\n        // Envia para todos, exceto o remetente\n        wss.clients.forEach((client) => {\n            if (client !== ws && client.readyState === WebSocket.OPEN) {\n                client.send(`[${ws.id}]: ${message}`);\n            }\n        });\n    });\n\n    ws.on('close', () => {\n        console.log(`Cliente desconectado: ${ws.id}`);\n    });\n\n    ws.send('Bem-vindo ao chat!');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('Servidor iniciado em ws://localhost:8080');

Vamos analisar os pontos-chave:

\n
• WebSocketServer — cria o servidor.
\n
• connection — evento quando um novo cliente se conecta.
\n
• message — recebemos dados do cliente.
\n
• send — enviamos dados de volta.
\n

Inicie o servidor com o comando npx ts-node server.ts. Ele ficará ouvindo na porta 8080.

Parte do cliente: conectando-se ao WebSocket

Agora, crie client.ts. Será um script simples que se conecta ao servidor e envia mensagens.