WebSocket библиотека на TypeScript: ws, Socket.IO и SockJS

WebSocket библиотека TypeScript: полный обзор для образовательного сайта

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

Почему WebSocket важен для образования?

На образовательных сайтах часто требуются функции реального времени: чаты, совместное редактирование кода, уведомления, live-трансляции. WebSocket позволяет избежать постоянного опроса сервера и обеспечивает мгновенную передачу данных. TypeScript добавляет типизацию, что критично для поддержки больших проектов.

1. Библиотека ws — минималистичный WebSocket для Node.js

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

Установка

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

Пример сервера на TypeScript

import { WebSocketServer } from 'ws';

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

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

  ws.send('Добро пожаловать на образовательный сайт!');

  ws.on('message', (data) => {
    console.log(`Получено: ${data}`);
    ws.send(`Эхо: ${data}`);
  });

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

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

Пример клиента на TypeScript

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

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

ws.onmessage = (event) => {
  console.log('Сообщение от сервера:', event.data);
};

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

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

2. Socket.IO — мощная библиотека для real-time приложений

Socket.IO — это де-факто стандарт для real-time приложений. Она предоставляет автоматическое переподключение, комнаты, пространства имен и поддержку fallback-транспортов (например, long polling).

Установка

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

Пример сервера на 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('Пользователь подключен:', 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('Пользователь отключен:', socket.id);
  });
});

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

Пример клиента на TypeScript

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

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

socket.on('connect', () => {
  console.log('Подключено к серверу, ID:', socket.id);
  socket.emit('join_room', 'javascript-lesson');
});

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

socket.emit('send_message', {
  room: 'javascript-lesson',
  message: 'Привет всем!'
});

Плюсы: автоматическое переподключение, комнаты, пространства имен, fallback.
Минусы: больший размер, сложнее настройка.

3. SockJS — WebSocket с fallback для сложных сетей

SockJS — это библиотека, которая эмулирует WebSocket API, но использует различные транспорты (XHR, JSONP, EventSource) для обеспечения совместимости с прокси, файрволами и старыми браузерами.

Установка

npm install sockjs sockjs-client
npm install @types/sockjs --save-dev

Пример сервера на TypeScript