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/06-long-polling.md
+++ b/docs/api/06-long-polling.md
@@ -0,0 +1,118 @@
+---
+sidebar_position: 6
+---
+
+# Long Polling
+**Long Polling** — это техника, при которой клиент отправляет запрос на сервер и ждет ответа, пока сервер не вернет новые данные или не истечет время ожидания. В отличие от обычного **polling**, где клиент периодически отправляет запросы, **long polling** позволяет серверу "удерживать" запрос до тех пор, пока не появятся новые данные. Это делает **long polling** более эффективным, чем обычный **polling**, особенно для приложений, где данные обновляются нечасто.
+
+Применяется, когда использование **WebSockets** или **SSE** невозможно. В React **long polling** можно легко реализовать с помощью fetch или Axios. Однако для более сложных сценариев лучше использовать **WebSockets** или **SSE**.
+
+## Как работает Long Polling:
+1. Клиент отправляет запрос на сервер.
+2. Сервер не отвечает сразу, а ждет, пока не появятся новые данные.
+3. Как только данные обновляются, сервер отправляет ответ клиенту.
+4. Клиент получает ответ и сразу отправляет новый запрос, чтобы продолжить ожидание.
+
+## Преимущества Long Polling:
+- **Меньше запросов:** Сервер отвечает только тогда, когда есть новые данные.
+- **Более быстрое обновление:** Данные доставляются клиенту сразу после их появления.
+- **Простота:** Легче реализовать, чем WebSockets.
+
+## Недостатки Long Polling:
+- **Высокая нагрузка на сервер:** Много соединений могут оставаться открытыми.
+- **Задержки:** Если данные не обновляются, запросы могут занимать много времени.
+- **Сложность масштабирования:** Сервер должен поддерживать множество открытых соединений.
+
+### Пример Long Polling с использованием fetch:
+```javascript jsx
+import React, { useState, useEffect } from 'react';
+
+function LongPollingExample() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch('https://api.example.com/long-polling');
+      const result = await response.json();
+      setData(result);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+      // После получения данных сразу отправляем новый запрос
+      fetchData();
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+
+  return (
+    <div>
+      <h1>Data from Long Polling:</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}
+
+export default LongPollingExample;
+```
+**Объяснение:**
+1. Запрос отправляется один раз при монтировании компонента.
+2. Сервер "удерживает" запрос до тех пор, пока не появятся новые данные.
+3. После получения данных клиент сразу отправляет новый запрос.
+
+### Реализация Long Polling с помощью Axios:
+Axios позволяет более удобно управлять запросами и обработкой ошибок.
+```javascript jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function LongPollingWithAxios() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get('https://api.example.com/long-polling');
+      setData(response.data);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+      // После получения данных сразу отправляем новый запрос
+      fetchData();
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+
+  return (
+    <div>
+      <h1>Data from Long Polling:</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}
+
+export default LongPollingWithAxios;
+```
+
+## Когда использовать Long Polling:
+1. Редкие обновления данных: Когда данные обновляются нечасто, но нужно получать их как можно быстрее.
+2. Реальное время: Когда WebSockets недоступны или их сложно реализовать.
+3. Простота: Когда нужно простое решение для обновления данных.
+
+## Альтернативы Long Polling:
+1. WebSockets: Для двусторонней связи в реальном времени.
+2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту.
+3. Обычный Polling: Когда данные обновляются часто, и long polling не нужен.
+