Что такое SSE

• Content-Type: text/event-stream
• Формат: data: {json}\n\n
• event: custom event name, id: для resume после disconnect
• Reconnection: automatic с Last-Event-ID header
• Limit 6 connections per-domain в Chrome (HTTP/1.1). HTTP/2 убирает limit

const es = new EventSource('/stream');
es.onmessage = e => console.log(JSON.parse(e.data));
es.addEventListener('user-login', e => {...});

• WebSocket
• Webhook

Server-Sent Events (SSE) — это технология, позволяющая веб-серверам отправлять обновления в режиме реального времени на клиентские браузеры через HTTP-соединение. Это удобно для приложений, где необходима постоянная связь с сервером, например, для отображения новостей, уведомлений или данных о состоянии. SSE использует стандартный текстовый формат и поддерживает автоматическое восстановление соединения, что делает его простым в использовании.

Для настройки Server-Sent Events на сервере необходимо выполнить несколько шагов. Рассмотрим пример на Node.js. Сначала установите необходимый пакет:

npm install express

Затем создайте простой сервер, который будет отправлять события:

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

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

    const sendEvent = () => {
        const data = JSON.stringify({ message: 'Hello from server!', timestamp: new Date() });
        res.write(`data: ${data}\n\n`);
    };

    const intervalId = setInterval(sendEvent, 1000);

    req.on('close', () => {
        clearInterval(intervalId);
        res.end();
    });
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

В этом примере сервер отправляет событие каждую секунду. Обратите внимание на заголовки, которые необходимы для корректной работы SSE. Теперь, чтобы получить события на клиенте, используйте следующий JavaScript-код:

const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log(data);
};

Server-Sent Events имеют несколько преимуществ по сравнению с другими технологиями, такими как WebSockets или AJAX:

• Простота реализации: SSE использует стандартный HTTP-протокол, что упрощает настройку и интеграцию.
• Автоматическое восстановление соединения: Если клиент теряет соединение, браузер автоматически попытается восстановить его без дополнительных усилий со стороны разработчика.
• Поддержка текстового формата: SSE отправляет данные в текстовом формате, что делает их легко читаемыми и простыми в обработке.

Однако у технологии есть и свои ограничения:

• Однонаправленность: SSE поддерживает только поток данных от сервера к клиенту. Для двусторонней связи необходимо использовать дополнительные технологии.
• Совместимость: Хотя большинство современных браузеров поддерживают SSE, некоторые старые версии могут не поддерживать эту технологию.
• Производительность: SSE может быть менее эффективным в условиях высокой нагрузки, так как каждое соединение требует отдельного HTTP-запроса.

В заключение, Server-Sent Events — это мощный инструмент для создания приложений с обновлениями в реальном времени. При правильной настройке и использовании они могут значительно улучшить пользовательский опыт.