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:

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 позволяет более удобно управлять запросами и обработкой ошибок.

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 не нужен.

🚀 Источник: DeepSeek