Зачем в HTML5 были введены события server-sent?

Server-Sent Events (SSE) были введены в HTML5 для создания однонаправленного соединения с сервером, позволяющего серверу отправлять данные клиенту в режиме реального времени, не требуя постоянных запросов со стороны клиента (polling).

Преимущества SSE по сравнению с традиционным polling:

• Эффективность: Сервер поддерживает одно постоянное соединение, что уменьшает накладные расходы по сравнению с множеством короткоживущих HTTP-запросов при polling.
• Уменьшение задержки: Информация поступает клиенту сразу после ее генерации на сервере, без необходимости ожидания следующего интервала polling.
• Простота использования: Браузерные API для работы с SSE просты и интуитивно понятны.

Сценарии использования SSE:

• Оповещения в реальном времени (например, новые сообщения, комментарии).
• Получение обновлений данных (например, котировки акций, спортивные результаты).
• Логирование и мониторинг активности на сервере.

Пример использования SSE:

Клиентский код:

// Создаем объект EventSource для установления соединения с сервером
const eventSource = new EventSource('/events');

// Обработчик события 'message' (получение данных от сервера)
eventSource.onmessage = function(event) {
  console.log('Получены данные от сервера:', event.data);
};

// Обработчик события 'open' (соединение установлено)
eventSource.onopen = function() {
  console.log('Соединение с сервером установлено.');
};

// Обработчик события 'error' (при возникновении ошибки)
eventSource.onerror = function(error) {
  console.error('Произошла ошибка в соединении с SSE:', error);
  eventSource.close(); // Закрываем соединение при ошибке
};

// Закрытие соединения (например, при уходе с страницы)
// eventSource.close();

Серверный код (пример на Node.js с использованием Express):

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

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream'); // Устанавливаем заголовок Content-Type
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders(); // Отправляем заголовки немедленно

  // Каждые 2 секунды отправляем клиенту сообщение
  const intervalId = setInterval(() => {
    const data = `data: Это сообщение от сервера ${new Date().toISOString()}\n\n`;
    res.write(data);
  }, 2000);

  // Обработка закрытия соединения клиентом
  req.on('close', () => {
    clearInterval(intervalId); // Останавливаем отправку сообщений
    res.end();
  });
});

app.listen(3000, () => {
  console.log('Сервер SSE запущен на порту 3000');
});

SSE является альтернативой WebSocket в случаях, когда необходима только однонаправленная передача данных от сервера клиенту. WebSocket, в свою очередь, предоставляет двунаправленное соединение, подходящее для сценариев, где клиент также должен отправлять сообщения на сервер (например, чаты, многопользовательские игры).