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

Introdução ao WebSocket e TypeScript para aplicações em tempo real

As aplicações web modernas exigem cada vez mais a troca instantânea de dados entre cliente e servidor. O protocolo HTTP tradicional, que funciona no princípio de "requisição-resposta", não é adequado para tarefas onde a velocidade de entrega da informação é crítica: chats online, cotações de bolsa, jogos multijogador ou sistemas de monitoramento. É aqui que o WebSocket entra em cena — um protocolo que fornece uma conexão bidirecional contínua.

Em combinação com o TypeScript — um superconjunto estritamente tipado do JavaScript — o desenvolvimento de aplicações WebSocket torna-se não apenas eficiente, mas também seguro. O TypeScript permite identificar erros em tempo de compilação, melhora a legibilidade do código e simplifica a refatoração. Neste artigo, abordaremos o ciclo completo de criação de uma aplicação em tempo real com WebSocket e TypeScript: da teoria aos exemplos práticos.

Fundamentos do WebSocket: como o protocolo funciona

O que é WebSocket?

WebSocket (RFC 6455) é um protocolo que estabelece uma conexão permanente entre o cliente (navegador) e o servidor. Após o handshake, os dados podem ser transmitidos em ambas as direções sem requisições HTTP repetidas. Isso reduz a latência e a carga na rede.

Diferença do HTTP

• HTTP: o cliente inicia uma requisição → o servidor responde → a conexão é fechada (ou permanece aberta para as próximas requisições, mas ainda assim é iniciada pelo cliente).
• WebSocket: após o estabelecimento da conexão, o servidor pode enviar dados ao cliente a qualquer momento (notificações push).

Ciclo de vida de uma conexão WebSocket

1. Handshake: o cliente envia uma requisição HTTP com o cabeçalho Upgrade: websocket. O servidor responde com o código 101 Switching Protocols.
2. Troca de dados: após o handshake bem-sucedido, a conexão muda para o protocolo WebSocket. Os dados são transmitidos na forma de frames.
3. Fechamento: qualquer uma das partes pode iniciar o fechamento da conexão, enviando um frame de controle especial.

Criação de um servidor WebSocket com TypeScript

Escolha da biblioteca

Para a parte do servidor, usaremos a biblioteca popular ws — uma implementação leve e rápida do WebSocket para Node.js. Vamos instalá-la junto com os tipos para TypeScript:

npm install wsnpm install -D @types/ws

Servidor básico

Criaremos o arquivo server.ts:

import { WebSocketServer, WebSocket } from 'ws';

const PORT = 8080;const wss = new WebSocketServer({ port: PORT });

console.log(`Servidor WebSocket iniciado em ws://localhost:${PORT}`);

wss.on('connection', (ws: WebSocket) => {  console.log('Nova conexão');

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

  // Processamento de mensagens recebidas  ws.on('message', (message: Buffer) => {    const text = message.toString();    console.log(`Recebido: ${text}`);

    // Resposta de eco    ws.send(`Eco: ${text}`);  });

  // Processamento de fechamento da conexão  ws.on('close', () => {    console.log('Cliente desconectado');  });

  // Processamento de erros  ws.on('error', (error: Error) => {    console.error('Erro no WebSocket:', error);  });});

Processamento de diferentes tipos de mensagens

Em aplicações reais, as mensagens são frequentemente estruturadas no formato JSON. Vamos criar um manipulador tipado:

interface ChatMessage {  type: 'message' | 'join' | 'leave';  username: string;  content?: string;  timestamp: number;}

wss.on('connection', (ws: WebSocket) => {  ws.on('message', (data: Buffer) => {    try {      const msg: ChatMessage = JSON.parse(data.toString());            switch (msg.type) {        case 'join':          console.log(`${msg.username} entrou`);