Что такое Long Pooling

1️⃣ Как кратко ответить

Long Polling — это техника, используемая в веб-разработке для поддержания постоянного соединения между клиентом и сервером. Клиент отправляет запрос на сервер и держит соединение открытым до тех пор, пока сервер не отправит ответ. Это позволяет серверу отправлять данные клиенту, как только они становятся доступны, без необходимости постоянного опроса.

2️⃣ Подробное объяснение темы

Long Polling — это метод, который позволяет клиенту получать обновления от сервера в реальном времени, не прибегая к постоянному опросу. В отличие от обычного HTTP-запроса, где клиент отправляет запрос и сразу получает ответ, Long Polling предполагает, что клиент отправляет запрос и сервер держит это соединение открытым до тех пор, пока не появятся новые данные для отправки клиенту.

Как это работает

1. Клиент отправляет запрос на сервер.

   • Клиент инициирует HTTP-запрос к серверу, ожидая, что сервер будет держать соединение открытым.

2. Сервер обрабатывает запрос и ждет.

   • Сервер не отвечает сразу, а ждет, пока не появятся новые данные или событие, которое нужно передать клиенту.

3. Сервер отправляет ответ.

   • Как только данные становятся доступными, сервер отправляет их клиенту в ответ на запрос.

4. Клиент обрабатывает ответ и отправляет новый запрос.

   • После получения данных клиент обрабатывает их и сразу же отправляет новый запрос, чтобы снова ждать обновлений.

Пример кода

function longPolling() {
  // Создаем новый XMLHttpRequest
  const xhr = new XMLHttpRequest();
​
  // Открываем соединение с сервером
  xhr.open('GET', '/server-endpoint', true);
​
  // Устанавливаем обработчик события на получение ответа
  xhr.onreadystatechange = function() {
    // Проверяем, что запрос завершен и сервер вернул успешный ответ
    if (xhr.readyState === 4 && xhr.status === 200) {
      // Обрабатываем полученные данные
      console.log('Received data:', xhr.responseText);
​
      // После обработки данных, снова отправляем запрос
      longPolling();
    }
  };
​
  // Отправляем запрос
  xhr.send();
}
​
// Инициализируем long polling
longPolling();

Комментарии к коду

• Создание XMLHttpRequest: const xhr = new XMLHttpRequest(); — создается новый объект для отправки HTTP-запросов.
• Открытие соединения: xhr.open('GET', '/server-endpoint', true); — открывается соединение с сервером. Параметр true указывает, что запрос асинхронный.
• Обработчик события: xhr.onreadystatechange = function() {...} — устанавливается функция, которая будет вызвана при изменении состояния запроса.
• Проверка состояния: if (xhr.readyState === 4 && xhr.status === 200) {...} — проверяется, что запрос завершен и сервер вернул успешный ответ.
• Обработка данных: console.log('Received data:', xhr.responseText); — выводятся полученные данные.
• Повторный запрос: longPolling(); — после обработки данных, функция вызывается снова для отправки нового запроса.

Зачем это нужно

Long Polling позволяет создавать приложения, которые реагируют на изменения данных в реальном времени, например, чаты, уведомления или обновления ленты новостей. Это улучшает пользовательский опыт, так как пользователи получают актуальную информацию без необходимости обновлять страницу или постоянно опрашивать сервер.