WebSocket библиотеки TypeScript: ws и Socket.IO – полное руководство

WebSocket библиотеки TypeScript: ws и Socket.IO

WebSocket — это протокол, обеспечивающий двустороннюю связь в реальном времени между клиентом и сервером. В экосистеме TypeScript/Node.js наиболее популярными библиотеками для работы с WebSocket являются ws (легковесная) и Socket.IO (с дополнительными возможностями). В этой статье мы подробно рассмотрим обе библиотеки, их установку, базовое использование и примеры кода на TypeScript.

1. Библиотека ws

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

Установка

npm install ws
npm install -D @types/ws

Создание WebSocket сервера на TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  // Отправка сообщения клиенту
  ws.send('Добро пожаловать!');

  // Обработка входящих сообщений
  ws.on('message', (data: Buffer) => {
    const message = data.toString();
    console.log(`Получено: ${message}`);

    // Отправка ответа всем подключенным клиентам
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`Эхо: ${message}`);
      }
    });
  });

  // Обработка закрытия соединения
  ws.on('close', () => {
    console.log('Клиент отключен');
  });
});

console.log('WebSocket сервер запущен на порту 8080');

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

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

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

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

ws.onclose = () => {
  console.log('Соединение закрыто');
};

2. Библиотека Socket.IO

Socket.IO — это более высокоуровневая библиотека, построенная поверх WebSocket. Она добавляет:

• Автоматическое переподключение при обрыве связи
• Поддержка комнат и пространств имен (namespaces)
• Механизм fallback (переход на HTTP long-polling, если WebSocket недоступен)
• Встроенная поддержка событий (events)

Установка

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

Сервер на TypeScript с 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(`Пользователь подключен: ${socket.id}`);

  // Присоединение к комнате
  socket.on('join_room', (room: string) => {
    socket.join(room);
    console.log(`Socket ${socket.id} присоединился к комнате ${room}`);
  });

  // Обработка пользовательского события
  socket.on('chat_message', (data: { room: string; message: string }) => {
    // Отправка сообщения всем в комнате, кроме отправителя
    socket.to(data.room).emit('chat_message', {
      userId: socket.id,
      message: data.message
    });
  });

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

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

Клиент на TypeScript с Socket.IO

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

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

socket.on('connect', () => {
  console.log('Подключено к серверу');

  // Присоединиться к комнате
  socket.emit('join_room', 'room_1');
});

socket.on('chat_message', (data: { userId: string; message: string }) => {
  console.log(`Сообщение от ${data.userId}: ${data.message}`);
});

// Отправка сообщения
socket.emit('chat_message', {
  room: 'room_1',
  message: 'Всем привет!'
});

3. Сравнение ws и Socket.IO

Характеристика	ws	Socket.IO
Размер	Маленький (~30 KB)	Боль Также в библиотеке Отправка SMS на Swift (iOS/macOS): библиотека MessageUI и альтернативы Arcade – альтернатива Pygame Работа с датами в TypeScript: популярные библиотеки и примеры Работа с Kafka в TypeScript: библиотека KafkaJS для Node.js PyNaCl – библиотека криптографии Рекомендаций Кэширование в Swift (iOS/macOS): Redis, NSCache и Core Data Миграции баз данных в Java: обзор популярных инструментов Валидация данных в C# (.NET): библиотеки, атрибуты и FluentValidation Работа с S3 и облачными хранилищами в Rust: библиотека aws-sdk-s3 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые