Frontend | Вопросы собесов on Telegram: “🤔 Что такое лонг пулинг? Это техника, используе…”

🤔 Что такое лонг пулинг?

Это техника, используемая для реализации связи между клиентом и сервером в веб-приложениях, чтобы поддерживать обновление данных в реальном времени. В отличие от обычных HTTP-запросов, лонг-пулинг позволяет клиенту ждать ответа от сервера дольше, что помогает уменьшить задержку при получении новых данных.

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

1⃣Запрос от клиента
Клиент отправляет HTTP-запрос к серверу.
2⃣Ожидание на сервере
Сервер не отвечает сразу, а задерживает ответ до тех пор, пока не появятся новые данные или не истечет таймаут.
3⃣Ответ сервера
Когда данные становятся доступными или истекает таймаут ожидания, сервер отправляет ответ клиенту.
4⃣Обработка на клиенте
Клиент обрабатывает полученные данные и немедленно отправляет новый запрос к серверу для получения следующих обновлений.

Сервер на Node.js с использованием express

const express = require('express');
const app = express();

let messages = [];
let clients = [];

// Endpoint для отправки сообщений
app.post('/messages', (req, res) => {
  const message = req.body.message;
  messages.push(message);

  // Уведомляем всех клиентов
  clients.forEach(client => client.res.json({ message }));
  clients = [];
  res.status(200).send('Message sent');
});

// Endpoint для получения сообщений (лонг-пулинг)
app.get('/messages', (req, res) => {
  if (messages.length > 0) {
    res.json({ message: messages.pop() });
  } else {
    clients.push({ req, res });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Клиентский код на JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Long Polling Example</title>
</head>
<body>
  <h1>Long Polling Example</h1>
  <div id="messages"></div>
  <script>
    function pollMessages() {
      fetch('/messages')
        .then(response => response.json())
        .then(data => {
          const messageDiv = document.createElement('div');
          messageDiv.textContent = `New message: ${data.message}`;
          document.getElementById('messages').appendChild(messageDiv);
          pollMessages(); // Отправляем новый запрос после получения сообщения
        })
        .catch(error => {
          console.error('Error:', error);
          setTimeout(pollMessages, 5000); // Повторный запрос через 5 секунд при ошибке
        });
    }

    // Начинаем лонг-пулинг
    pollMessages();
  </script>
</body>
</html>

🚩Плюсы

➕Реальное время
Лонг-пулинг позволяет получать данные в реальном времени без необходимости постоянно проверять сервер с частыми запросами.
➕Снижение нагрузки на сервер
По сравнению с обычным пулингом (когда клиент постоянно отправляет запросы с фиксированным интервалом), лонг-пулинг уменьшает количество HTTP-запросов, что снижает нагрузку на сервер.
➕Простота реализации
Лонг-пулинг легче внедрить и поддерживать в сравнении с более сложными технологиями, такими как WebSockets.

🚩Минусы

➖Задержка
Хотя лонг-пулинг уменьшает задержку по сравнению с обычным пулингом, он все же может иметь небольшие задержки в зависимости от времени ожидания и частоты событий.
➖Ресурсоемкость
Держание соединений открытыми в течение длительного времени может быть ресурсоемким для сервера, особенно при большом количестве клиентов.
➖Неоптимальность
Лонг-пулинг менее эффективен по сравнению с WebSockets, которые предоставляют постоянное двустороннее соединение.

Ставь 👍 и забирай 📚 Базу знаний