frontend-docs/docs/api/08-websocket.md

sidebar_position

sidebar_position
8

Websockets

WebSocket — это протокол связи, который обеспечивает двустороннюю (full-duplex) связь между клиентом и сервером в реальном времени. В отличие от HTTP, который работает по модели "запрос-ответ", WebSocket поддерживает постоянное соединение, позволяя серверу и клиенту обмениваться данными в любой момент без необходимости повторного установления соединения.

Основные особенности WebSocket:

1. Двусторонняя связь: Клиент и сервер могут отправлять данные друг другу одновременно.
2. Реальное время: Данные передаются мгновенно, как только они доступны.
3. Эффективность: Меньше накладных расходов по сравнению с HTTP-запросами.
4. Поддержка браузеров: WebSocket поддерживается всеми современными браузерами.

Как работает WebSocket:

1. Клиент и сервер устанавливают соединение через HTTP-запрос (handshake).
2. После успешного handshake соединение переключается на протокол WebSocket.
3. Клиент и сервер могут отправлять данные друг другу в реальном времени.
4. Соединение остается открытым, пока одна из сторон не закроет его.

Использование WebSocket в React:

В React WebSocket можно использовать с помощью встроенного объекта WebSocket. Ниже приведен пример реализации.

Пример использования WebSocket в React:

import React, { useState, useEffect } from 'react';

function WebSocketDemo() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // Создаем WebSocket-соединение
    const socket = new WebSocket('wss://api.example.com/socket');

    // Обработчик открытия соединения
    socket.onopen = () => {
      console.log('WebSocket connection established');
    };

    // Обработчик входящих сообщений
    socket.onmessage = (event) => {
      const newMessage = event.data;
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

    // Обработчик ошибок
    socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    // Обработчик закрытия соединения
    socket.onclose = () => {
      console.log('WebSocket connection closed');
    };

    // Очистка при размонтировании компонента
    return () => {
      socket.close();
    };
  }, []);

  // Отправка сообщения на сервер
  const sendMessage = () => {
    const socket = new WebSocket('wss://api.example.com/socket');
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(inputValue);
      setInputValue('');
    } else {
      console.error('WebSocket is not open');
    }
  };

  return (
    <div>
      <h1>WebSocket Demo</h1>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default WebSocketDemo;

Объяснение:

1. Создание WebSocket-соединения:
   • Используется объект WebSocket, который подключается к серверу по URL (например, wss://api.example.com/socket).
2. События WebSocket:
   • onopen: Срабатывает при успешном установлении соединения.
   • onmessage: Срабатывает при получении данных от сервера.
   • onerror: Срабатывает при возникновении ошибки.
   • onclose: Срабатывает при закрытии соединения.
3. Отправка данных:
   • Метод socket.send() используется для отправки данных на сервер.
4. Очистка:
   • При размонтировании компонента соединение закрывается с помощью socket.close().

Пример серверной реализации (Node.js + ws):

Для работы с WebSocket на сервере можно использовать библиотеку ws.

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('New client connected');

  // Отправка сообщения клиенту
  socket.send('Welcome to the WebSocket server!');

  // Обработка входящих сообщений
  socket.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Отправка ответа клиенту
    socket.send(`You said: ${message}`);
  });

  // Обработка закрытия соединения
  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

Объяснение серверной части:

1. Создание сервера:
   • Используется библиотека ws для создания WebSocket-сервера.
2. Обработка соединений:
   • Сервер прослушивает входящие соединения и обрабатывает сообщения.
3. Отправка данных:
   • Сервер отправляет данные клиенту с помощью socket.send().

Преимущества WebSocket:

1. Реальное время: Данные передаются мгновенно.
2. Двусторонняя связь: Клиент и сервер могут обмениваться данными одновременно.
3. Эффективность: Меньше накладных расходов по сравнению с HTTP.

Недостатки WebSocket:

1. Сложность: Требуется больше усилий для реализации и поддержки.
2. Ограничения: Не все прокси и брандмауэры поддерживают WebSocket.
3. Поддержка браузеров: Хотя WebSocket поддерживается всеми современными браузерами, могут быть проблемы с устаревшими версиями.

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

1. Чат-приложения: Для мгновенного обмена сообщениями.
2. Онлайн-игры: Для синхронизации действий игроков.
3. Финансовые приложения: Для отображения котировок в реальном времени.
4. Коллаборативные инструменты: Например, совместное редактирование документов.

Альтернативы WebSocket:

1. Server-Sent Events (SSE): Для односторонней связи (сервер → клиент).
2. Long Polling: Когда WebSocket недоступен.
3. Polling: Для простых сценариев.

🚀 Источник: DeepSeek