WebSocket библиотеки TypeScript: обзор и примеры

WebSocket библиотеки TypeScript: полный обзор и практические примеры

В современной веб-разработке технология WebSocket стала стандартом для создания реального времени (real-time) приложений. Благодаря постоянному двустороннему соединению между клиентом и сервером, WebSocket идеально подходит для чатов, онлайн-игр, биржевых трейдеров, систем мониторинга и любых других проектов, где требуется мгновенная передача данных. В этой статье мы подробно разберём три основные WebSocket библиотеки для TypeScript: ws, Socket.IO и uWebSockets.js, включая их установку, настройку и примеры кода.

1. Библиотека ws — лёгкий и быстрый WebSocket для Node.js

Библиотека ws — это самая популярная и минималистичная реализация протокола WebSocket для Node.js. Она не добавляет никаких дополнительных абстракций, работает напрямую с нативным протоколом и обеспечивает максимальную производительность. TypeScript поддерживается через типы, которые можно установить отдельно.

Установка

npm install ws
npm install -D @types/ws

Пример простого сервера на TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

wss.on('connection', (ws: WebSocket) => {
  console.log('Клиент подключился');

  ws.on('message', (message: Buffer) => {
    console.log('Получено сообщение:', message.toString());
    // Отправляем ответ всем подключённым клиентам
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`Эхо: ${message.toString()}`);
      }
    });
  });

  ws.on('close', () => {
    console.log('Клиент отключился');
  });
});

console.log('WebSocket сервер запущен на ws://localhost:8080');

Клиентский код (браузер)

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

ws.onopen = () => {
  console.log('Соединение установлено');
  ws.send('Привет, сервер!');
};

ws.onmessage = (event: MessageEvent) => {
  console.log('Ответ от сервера:', event.data);
};

Плюсы: минимальный оверхед, полный контроль над протоколом, отлично подходит для высоконагруженных систем.

Минусы: нет встроенной поддержки комнат, автоматического переподключения или fallback на HTTP-транспорт.

2. Socket.IO — универсальное решение с богатым API

Socket.IO — это не просто WebSocket, а полноценный фреймворк для real-time коммуникаций. Он использует WebSocket как основной транспорт, но автоматически переключается на HTTP long-polling, если WebSocket недоступен (например, за прокси или старыми браузерами). Socket.IO предоставляет готовые механизмы: комнаты, пространства имён (namespaces), автоматическое переподключение, подтверждение доставки сообщений (acknowledgements) и многое другое.

Установка

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

Пример сервера с комнатами на TypeScript

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

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

io.on('connection', (socket: Socket) => {
  console.log('Пользователь подключился:', socket.id);

  // Присоединение к комнате
  socket.on('join_room', (roomName: string) => {
    socket.join(roomName);
    socket.to(roomName).emit('user_joined', socket.id);
  });

  // Отправка сообщения в комнату
  socket.on('room_message', (data: { room: string; message: string }) => {
    io.to(data.room).emit('new_message', {
      user: socket.id,
      text: data.message
    });
  });

  socket.on('disconnect', () => {
    console.log('Пользователь отключился:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Socket.IO сервер запущен на порту 3000');
});

Клиентский код

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

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

socket.on('connect', () => {
  console.log('Подключено к серверу');
  socket.emit('join_room', 'game-room-1');
});

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

Плюсы: богатый функционал, автоматическое переподключение, поддержка комнат и пространств имён, отличная документация.

Минусы: больше накладных расходов, чем у чистого WebSocket, зависимость от собственного протокола (несовместимо с обычными WebSocket-клиентами).