Зачем нужен WebSocket?

Назначение WebSocket

WebSocket — это протокол для двусторонней коммуникации между клиентом и сервером через одно TCP соединение. В отличие от HTTP, который работает по схеме request-response, WebSocket позволяет серверу инициировать передачу данных клиенту.

Проблема, которую решает WebSocket

HTTP limitations:

// Классический HTTP подход
setInterval(async () => {
  const data = await fetch('/api/messages');
  // Запрашиваем каждые 100ms
  // Даже если нет новых сообщений - сетевой трафик
}, 100);

// Проблемы:
// 1. Лишний трафик (пустые ответы)
// 2. Задержка (новое сообщение появится только на следующей проверке)
// 3. Нагрузка на сервер (1000 клиентов = 10K запросов в секунду)

WebSocket решение:

// На клиенте
const ws = new WebSocket('ws://api.example.com');

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

ws.send('Hello, Server!');

// На сервере (Node.js с ws)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Получено:', message);
    // Отправить всем клиентам
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send('Broadcast: ' + message);
      }
    });
  });
});

Ключевые преимущества

Real-time коммуникация — сервер может отправить данные клиенту в любой момент.

Низкая задержка — одно соединение, сразу получишь ответ.

Экономия трафика — не нужны заголовки HTTP для каждого запроса.

Двусторонняя коммуникация — не только request-response, но полноценный диалог.

Когда использовать WebSocket

Чаты и мессенджеры:

// Пользователь отправляет сообщение
ws.send(JSON.stringify({
  type: 'message',
  text: 'Hello!',
  room: 'general'
}));

// Все в комнате получают сообщение в реальном времени
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  updateChatUI(msg);
};

Совместное редактирование (Google Docs):

// Когда один пользователь печатает, остальные видят символы в реальном времени
ws.on('message', (data) => {
  if (data.type === 'edit') {
    broadcastToAll({ type: 'character-inserted', char: data.char });
  }
});

Live notifications:

// Пользователь отправляет пост, все подписчики получают уведомление мгновенно
ws.send({ type: 'notification', text: 'John posted a new article' });

Игры и interactive приложения:

// Позиция игрока обновляется в реальном времени
ws.send(JSON.stringify({
  type: 'move',
  x: 100,
  y: 200,
  userId: 'player-1'
}));

Live данные (финансовые котировки, спортивные результаты):

ws.onmessage = (event) => {
  const stockPrice = JSON.parse(event.data);
  updateStockChart(stockPrice);
};

Когда НЕ использовать WebSocket

Простые REST операции — получить список пользователей, создать пост. HTTP вполне достаточно.

Файловые загрузки — используй HTTP с Content-Length.

Состояния без обновлений — если данные не меняются, нет смысла в real-time.

Сравнение с альтернативами

Polling:

// Клиент постоянно спрашивает: есть ли новые данные?
setInterval(() => fetch('/api/data'), 5000);
// Неэффективно, задержка до 5 секунд

Server-Sent Events (SSE):

const sse = new EventSource('/api/stream');
sse.onmessage = (event) => console.log(event.data);
// Только сервер -> клиент, не двусторонняя коммуникация

WebSocket:

• Двусторонняя коммуникация
• Низкая задержка
• Эффективен для real-time

Практический пример с обработкой ошибок

const ws = new WebSocket('ws://api.example.com');
const reconnectInterval = 5000;
let reconnectAttempts = 0;

ws.onopen = () => {
  console.log('Connected');
  reconnectAttempts = 0;
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  // Переподключение
  setTimeout(() => {
    reconnectAttempts++;
    if (reconnectAttempts < 10) {
      const newWs = new WebSocket('ws://api.example.com');
    }
  }, reconnectInterval * Math.pow(2, reconnectAttempts));
};

WebSocket — это незаменимый инструмент для real-time приложений, но требует правильной обработки соединения и переподключения.