WebSocket em TypeScript: criando aplicações em tempo real

WebSocket em TypeScript: Criando aplicações em tempo real

As aplicações web modernas cada vez mais exigem transferência instantânea de dados entre cliente e servidor. A tecnologia WebSocket tornou-se o padrão para criar aplicações em tempo real — desde chats e notificações até jogos online e plataformas de negociação. Neste artigo, vamos entender como usar WebSocket com TypeScript e mostrar exemplos de código para criar uma aplicação completa em tempo real.

O que é WebSocket e por que TypeScript?

WebSocket é um protocolo que fornece uma conexão bidirecional contínua entre cliente e servidor. Diferente do HTTP, onde o cliente envia uma requisição e recebe uma resposta, o WebSocket permite que ambos os lados iniciem a transferência de dados a qualquer momento. Isso é ideal para aplicações em tempo real, onde a baixa latência é crucial.

TypeScript adiciona tipagem estática ao JavaScript, o que é criticamente importante para projetos com WebSocket. Os tipos ajudam a evitar erros ao processar mensagens e tornam o código mais previsível. Por exemplo, você pode definir uma interface para mensagens de entrada e saída:

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

interface ServerResponse {    status: 'ok' | 'error';    data?: ChatMessage;    error?: string;}

Essa abordagem simplifica significativamente a depuração e a manutenção do código.

Configurando o servidor WebSocket com TypeScript

Para criar o servidor, usaremos a biblioteca ws — uma implementação popular de WebSocket para Node.js. Vamos instalar as dependências:

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

Crie o arquivo server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

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

    // Envia mensagem de boas-vindas    ws.send(JSON.stringify({        type: 'system',        message: 'Bem-vindo ao chat!'    }));

    // Processa mensagens recebidas    ws.on('message', (data: Buffer) => {        try {            const message = JSON.parse(data.toString());            console.log('Recebido:', message);

            // Transmite a mensagem para todos os clientes conectados            wss.clients.forEach((client) => {                if (client.readyState === WebSocket.OPEN) {                    client.send(JSON.stringify({                        type: 'broadcast',                        user: message.user,                        text: message.text,                        timestamp: Date.now()                    }));                }            });        } catch (error) {            ws.send(JSON.stringify({                type: 'error',                message: 'Formato de mensagem inválido'            }));        }    });

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

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

Execute o servidor com o comando npx ts-node server.ts. O servidor está pronto para aceitar conexões e transmitir mensagens.

Cliente WebSocket em TypeScript

Agora vamos criar a parte do cliente. TypeScript funciona perfeitamente no navegador, então escreveremos um cliente em TypeScript puro que será compilado para JavaScript.

Arquivo client.ts:

interface ChatMessage {    type: string;    user?: string;    text?: string;    message?: string;    timestamp?: number;}

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

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