WebSocket em TypeScript: Criando Aplicações em Tempo Real

WebSocket em TypeScript: criação de aplicações em tempo real

As aplicações web modernas exigem troca instantânea de dados entre cliente e servidor. O protocolo WebSocket fornece uma conexão bidirecional permanente, tornando-o ideal para criar chats, sistemas de notificação, jogos online e outros serviços em tempo real. Neste artigo, vamos detalhar como trabalhar com WebSocket em TypeScript — desde a configuração do servidor até a implementação do cliente.

O que é WebSocket e para que serve?

WebSocket é um protocolo de comunicação que fornece um canal full-duplex sobre uma única conexão TCP. Diferentemente do HTTP tradicional, onde o cliente envia uma requisição e aguarda a resposta, o WebSocket permite que o servidor inicie o envio de dados para o cliente de forma independente.

Principais vantagens do WebSocket:

• Conexão permanente — não é necessário estabelecer uma nova conexão para cada requisição
• Baixa latência — os dados são transmitidos instantaneamente sem overhead de cabeçalhos HTTP
• Comunicação bidirecional — o servidor pode enviar dados sem requisição do cliente
• Eficiência — menos tráfego em comparação com soluções de polling

WebSocket é amplamente utilizado em aplicações financeiras (cotações de bolsa), redes sociais (curtidas, comentários em tempo real), jogos multiplayer, sistemas de monitoramento e IoT.

Configuração do servidor WebSocket em TypeScript

Para criar o servidor, usaremos a biblioteca popular ws. Instale-a via npm:

npm init -ynpm install wsnpm install -D typescript @types/ws @types/nodenpx tsc --init

Crie o arquivo server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

interface CustomMessage {  type: string;  payload: any;}

wss.on('connection', (ws: WebSocket) => {  console.log('Novo cliente conectado');

  // Envia mensagem de boas-vindas  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: 'Bem-vindo ao servidor!' }  };  ws.send(JSON.stringify(welcomeMessage));

  // Processamento de mensagens recebidas  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // Envia a mensagem para todos os clientes conectados          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('Tipo de mensagem desconhecido:', message.type);      }    } catch (error) {      console.error('Erro ao processar mensagem:', error);    }  });

  ws.on('close', () => {    console.log('Cliente desconectado');  });

  ws.on('error', (error: Error) => {    console.error('Erro WebSocket:', error);  });});

function broadcast(message: CustomMessage, sender: WebSocket) {  wss.clients.forEach((client) => {    if (client !== sender && client.readyState === WebSocket.OPEN) {      client.send(JSON.stringify(message));    }  });}

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

Execute o servidor com o comando npx ts-node server.ts. O servidor ficará ouvindo na porta 8080 e processará as conexões recebidas.

Criação do cliente WebSocket em TypeScript

A parte do cliente pode ser implementada tanto para o navegador quanto para Node.js. Vamos considerar ambas as opções.

Cliente para navegador

Crie o arquivo client.ts para uso em uma aplicação web:

class WebSocketClient {  private socket: WebSocket;  private url: string;

  constructor(url: string) {    this.url = url;    this.socket = new WebSocke
```