WebSocket em TypeScript: técnicas avançadas para aplicações em tempo real

WebSocket em TypeScript: técnicas avançadas para aplicações em tempo real

WebSocket fornece uma conexão bidirecional permanente entre cliente e servidor, tornando-o ideal para aplicações em tempo real: chats, notificações, edição colaborativa e jogos online. Neste artigo, exploraremos técnicas avançadas de trabalho com WebSocket em TypeScript, indo além de um simples servidor echo.

1. Arquitetura com gerenciamento de salas (Rooms)

Em aplicações reais, raramente se usa transmissão global para todos os clientes. Muito mais frequente é a necessidade de divisão lógica dos clientes em salas (por exemplo, salas de chat ou sessões de jogo). Vamos considerar uma implementação em TypeScript usando a biblioteca ws.

import { WebSocketServer, WebSocket } from 'ws';

interface Room {  id: string;  clients: Set<WebSocket>;}

class RoomManager {  private rooms: Map<string, Room> = new Map();

  createRoom(roomId: string): void {    if (!this.rooms.has(roomId)) {      this.rooms.set(roomId, { id: roomId, clients: new Set() });    }  }

  joinRoom(roomId: string, client: WebSocket): void {    this.createRoom(roomId);    this.rooms.get(roomId)!.clients.add(client);    client.send(JSON.stringify({ type: 'room_joined', roomId }));  }

  leaveRoom(roomId: string, client: WebSocket): void {    const room = this.rooms.get(roomId);    if (room) {      room.clients.delete(client);      if (room.clients.size === 0) {        this.rooms.delete(roomId);      }    }  }

  broadcastToRoom(roomId: string, message: object, sender?: WebSocket): void {    const room = this.rooms.get(roomId);    if (room) {      const data = JSON.stringify(message);      room.clients.forEach(client => {        if (client.readyState === WebSocket.OPEN && client !== sender) {          client.send(data);        }      });    }  }}

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

wss.on('connection', (ws: WebSocket) => {  ws.on('message', (raw: Buffer) => {    try {      const msg = JSON.parse(raw.toString());      switch (msg.type) {        case 'join':          roomManager.joinRoom(msg.roomId, ws);          break;        case 'leave':          roomManager.leaveRoom(msg.roomId, ws);          break;        case 'message':          roomManager.broadcastToRoom(msg.roomId,             { type: 'chat', user: msg.user, text: msg.text }, ws);          break;      }    } catch (e) {      ws.send(JSON.stringify({ type: 'error', message: 'Invalid JSON' }));    }  });

  ws.on('close', () => {    // Limpeza: remove o cliente de todas as salas    roomManager.leaveRoom('*', ws);  });});

Este código demonstra o trabalho seguro com salas: criação sob demanda, limpeza automática de salas vazias e exclusão do remetente da transmissão.

2. Autenticação e gerenciamento de estado

Conexões WebSocket devem ser autenticadas. Uma abordagem avançada é verificar o token ao estabelecer a conexão e manter a sessão.

import { IncomingMessage } from 'http';import { WebSocketServer, WebSocket } from 'ws';

interface AuthenticatedSocket extends WebSocket {  userId?: string;  username?: string;}

const wss = new WebSocketServer({   port: 8080,  verifyClient: (info: { req: IncomingMessage }, callback: (res: boolean) => void) => {    const token = extractToken(info.req.url || '');    if (token && validateToken(token)) {      callback(true);    } else {      callback(false);    }  }});

function extractToken(url: string): string | null {  const params = new URLSearchParams(url.split('?')[1] || '');  return params.get('token');}

function validateToken(token: string): boolean {  // Aqui deve haver uma verificação real de JWT ou outro token  return token.length > 10;}

wss.on('co
```