update state, api, arch

2025-03-07 14:17:37 +03:00
parent 7484909864
commit 8263e7507a
40 changed files with 1774 additions and 57 deletions
--- a/docs/api/08-websocket.md
+++ b/docs/api/08-websocket.md
@@ -0,0 +1,162 @@
+---
+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:** Для простых сценариев.