Події, надіслані з сервера, пулінг та довгий пулінг: що це таке та коли їх використовувати

Що це таке?

Усі три технології є способами отримання даних з сервера в браузері. Вони дозволяють оновлювати клієнт в реальному або майже реальному часі, особливо коли WebSockets недоступні.

Пулінг (Регулярний пулінг)

Клієнт періодично запитує сервер: "Є щось нове?"

Як працює пулінг:

Клієнт надсилає GET /data
Сервер негайно відповідає (навіть якщо нічого не змінилося)
Через X секунд клієнт знову надсилає запит

setInterval(() => {
  fetch('/data')
    .then(res => res.json())
    .then(data => console.log(data));
}, 5000); // Запит кожні 5 сек

Недоліки пулінгу

Постійне навантаження на сервер (багато "порожніх" запитів)
Дані надходять із затримкою
Погана масштабованість

Довгий пулінг (Long Polling)

Покращена версія регулярного пулінгу: запит живе до появи нових даних.

Як працює довгий пулінг:

Клієнт робить запит
Сервер чекає на появу даних (або закінчується таймаут)
Повертає дані → клієнт негайно надсилає наступний запит

function longPolling() {
  fetch('/data')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      longPolling(); // Цикл продовжується
    });
}

longPolling();

Переваги довгого пулінгу

Менше "порожніх" запитів
Дані надходять майже миттєво
Не потребує нових технологій (працює через звичайний HTTP)

Недоліки довгого пулінгу

Дані надходять із затримкою
Погана масштабованість

Події, надіслані сервером (SSE)

SSE — це постійне з'єднання, через яке сервер надсилає дані клієнту, коли хоче.

Це одностороннє з'єднання: сервер → тільки клієнт

Як працює SSE

Клієнт створює EventSource
Сервер встановлює text/event-stream
Сервер може надсилати повідомлення без запиту клієнта

Приклад (Клієнт)

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log("Нове повідомлення:", event.data);
};

Приклад (Express сервер)

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: new Date() })}\n\n`);
  }, 3000);
});

Переваги SSE

Проста реалізація
Працює через одне з'єднання
Ідеально підходить для сповіщень, чатів, потокового відео
Працює навіть через проксі (підтримує HTTP/2)

Порівняння

Метод	Напрямок	Постійне з'єднання	Миттєвість	Складність	Підтримка
Пулінг	Клієнт → Сервер	Ні	Ні	Проста	Усі
Довгий пулінг	Клієнт → Сервер	Тимчасове	Майже	Середня	Усі
SSE	Сервер → Клієнт	Так	Так	Середня	Майже всі (крім IE)

Що обрати?

Пулінг: якщо ви не можете використовувати інші методи або це не критично (наприклад, оновлення кожні 30 сек)
Довгий пулінг: якщо дані повинні надходити негайно, але ви не можете використовувати SSE або WebSocket
SSE: для одностороннього реального часу (чати, сповіщення, новинні стрічки)
WebSocket: для двосторонньої комунікації — ігри, спільні редактори, відеочати, чати тощо.

Висновок:

Пулінг простий, але неефективний. Довгий пулінг — компроміс. SSE — відмінне рішення для реального часу без використання WebSocket. Вибір залежить від напрямку комунікації, навантаження, вимог до затримки та підтримки браузера.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань