Biblioteca WebSocket em TypeScript: ws, Socket.IO e SockJS

Biblioteca WebSocket TypeScript: visão geral completa para site educacional

WebSocket é um protocolo que fornece comunicação bidirecional em tempo real entre cliente e servidor. No ecossistema TypeScript, existem várias bibliotecas populares que simplificam o trabalho com WebSocket. Neste artigo, veremos três ferramentas principais: ws, Socket.IO e SockJS, além de mostrar como integrá-las em um projeto educacional em TypeScript.

Por que o WebSocket é importante para a educação?

Em sites educacionais, recursos em tempo real são frequentemente necessários: chats, edição colaborativa de código, notificações, transmissões ao vivo. O WebSocket evita a consulta constante ao servidor e garante a transmissão instantânea de dados. O TypeScript adiciona tipagem, o que é essencial para dar suporte a grandes projetos.

1. Biblioteca ws — WebSocket minimalista para Node.js

ws é a biblioteca WebSocket mais simples e rápida para o lado do servidor Node.js. Ela é perfeita para casos em que você precisa de um WebSocket puro sem recursos adicionais.

Instalação

npm install wsnpm install @types/ws --save-dev

Exemplo de servidor em TypeScript

import { WebSocketServer } from 'ws';

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

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

  ws.send('Bem-vindo ao site educacional!');

  ws.on('message', (data) => {    console.log(`Recebido: ${data}`);    ws.send(`Eco: ${data}`);  });

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

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

Exemplo de cliente em TypeScript

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

ws.onopen = () => {  console.log('Conectado ao servidor');  ws.send('Olá, servidor!');};

ws.onmessage = (event) => {  console.log('Mensagem do servidor:', event.data);};

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

Vantagens: tamanho mínimo, alta performance, controle total.
Desvantagens: sem reconexão automática, sem suporte a salas.

2. Socket.IO — biblioteca poderosa para aplicações em tempo real

Socket.IO é o padrão de facto para aplicações em tempo real. Ela fornece reconexão automática, salas, namespaces e suporte a transportes alternativos (como long polling).

Instalação

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

Exemplo de servidor em TypeScript

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);

  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: 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');});

Exemplo de cliente em TypeScript

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

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

socket.on('connect', () => {  console.log('Conectado ao servidor, ID:', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user}: ${