Bibliotecas WebSocket TypeScript: ws e Socket.IO – guia completo

Bibliotecas WebSocket TypeScript: ws e Socket.IO

WebSocket é um protocolo que permite comunicação bidirecional em tempo real entre cliente e servidor. No ecossistema TypeScript/Node.js, as bibliotecas mais populares para trabalhar com WebSocket são ws (leve) e Socket.IO (com recursos adicionais). Neste artigo, abordaremos detalhadamente ambas as bibliotecas, sua instalação, uso básico e exemplos de código em TypeScript.

1. Biblioteca ws

ws é uma biblioteca WebSocket minimalista e rápida para Node.js, totalmente compatível com TypeScript. Ela fornece uma API WebSocket pura, sem abstrações desnecessárias.

Instalação

npm install wsnpm install -D @types/ws

Criação de servidor WebSocket em TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  // Enviar mensagem ao cliente  ws.send('Bem-vindo!');

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

    // Enviar resposta a todos os clientes conectados    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Eco: ${message}`);      }    });  });

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

console.log('Servidor WebSocket iniciado na porta 8080');

Código do cliente em TypeScript

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {  console.log('Conexão estabelecida');  ws.send('Olá, servidor!');};

ws.onmessage = (event: MessageEvent) => {  console.log(`Resposta do servidor: ${event.data}`);};

ws.onclose = () => {  console.log('Conexão fechada');};

2. Biblioteca Socket.IO

Socket.IO é uma biblioteca de nível mais alto, construída sobre o WebSocket. Ela adiciona:

• Reconexão automática em caso de queda de conexão
• Suporte a salas e namespaces
• Mecanismo de fallback (mudança para HTTP long-polling se WebSocket não estiver disponível)
• Suporte integrado a eventos (events)

Instalação

npm install socket.io socket.io-clientnpm install -D @types/socket.io @types/socket.io-client

Servidor em TypeScript com Socket.IO

import { Server } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: {    origin: '*',    methods: ['GET', 'POST']  }});

io.on('connection', (socket) => {  console.log(`Usuário conectado: ${socket.id}`);

  // Entrar em uma sala  socket.on('join_room', (room: string) => {    socket.join(room);    console.log(`Socket ${socket.id} entrou na sala ${room}`);  });

  // Processar evento personalizado  socket.on('chat_message', (data: { room: string; message: string }) => {    // Enviar mensagem a todos na sala, exceto ao remetente    socket.to(data.room).emit('chat_message', {      userId: socket.id,      message: data.message    });  });

  socket.on('disconnect', () => {    console.log(`Usuário desconectado: ${socket.id}`);  });});

server.listen(3000, () => {  console.log('Servidor Socket.IO iniciado na porta 3000');});

Cliente em TypeScript com Socket.IO

import { io, Socket } from 'socket.io-client';

const socket: Socket = io('http://localhost:3000');

socket.on('connect', () => {  console.log('Conectado ao servidor');

  // Entrar em uma sala  socket.emit('join_room', 'room_1');});

socket.on('chat_message', (data: { us