---
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:**
```jsx
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.
```js
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:** Для простых сценариев.