Server Side Events (SSE)

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

Основные особенности SSE:

1. Односторонняя связь: Сервер отправляет данные клиенту.
2. Простота: Использует стандартный HTTP-протокол.
3. Автоматическое восстановление соединения: Если соединение разрывается, клиент автоматически пытается восстановить его.
4. Поддержка браузеров: SSE поддерживается большинством современных браузеров.

Как работает SSE:

1. Клиент создает соединение с сервером с помощью EventSource.
2. Сервер отправляет данные в формате текстового потока.
3. Клиент обрабатывает данные с помощью событий.

Использование SSE в React:

В React SSE можно использовать с помощью встроенного объекта EventSource. Ниже приведен пример реализации.

import React, { useState, useEffect } from 'react';

function SSEDemo() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // Создаем соединение с сервером
    const eventSource = new EventSource('https://api.example.com/sse');

    // Обработчик события "message"
    eventSource.onmessage = (event) => {
      const newMessage = event.data;
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

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

    // Очистка при размонтировании компонента
    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <h1>Server-Sent Events (SSE) Demo</h1>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default SSEDemo;

Объяснение:

1. EventSource:
   • Создается объект EventSource, который подключается к серверу по указанному URL.
   • Сервер должен поддерживать SSE и отправлять данные в формате текстового потока.
2. События:
   • onmessage: Обрабатывает данные, полученные от сервера.
   • onerror: Обрабатывает ошибки соединения.
3. Очистка:
   • При размонтировании компонента соединение закрывается с помощью eventSource.close().

Пример серверной реализации (Node.js + Express):

Для работы SSE сервер должен поддерживать отправку данных в формате текстового потока.

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

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

  // Отправляем данные клиенту каждые 2 секунды
  const intervalId = setInterval(() => {
    const data = `Server time: ${new Date().toLocaleTimeString()}`;
    res.write(`data: ${JSON.stringify(data)}\n\n`); // Формат SSE
  }, 2000);

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

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

Объяснение серверной части:

1. Заголовки:
   • Content-Type: text/event-stream: Указывает, что это поток событий.
   • Cache-Control: no-cache: Отключает кэширование.
   • Connection: keep-alive: Поддерживает соединение открытым.
2. Формат данных:
   • Данные отправляются в формате data: <message>\n\n.
3. Интервал:
   • Сервер отправляет данные клиенту каждые 2 секунды.

Преимущества SSE:

1. Простота: Легко реализовать как на клиенте, так и на сервере.
2. Автоматическое восстановление: Клиент автоматически переподключается при разрыве соединения.
3. Эффективность: Меньше нагрузки на сервер по сравнению с polling.

Недостатки SSE:

1. Односторонняя связь: Клиент не может отправлять данные серверу через SSE.
2. Ограниченная поддержка браузеров: Не поддерживается в Internet Explorer.
3. Ограничения протокола: Только текстовые данные.

Когда использовать SSE:

1. Уведомления: Например, уведомления о новых сообщениях.
2. Обновления статуса: Например, статус заказа или задачи.
3. Потоковая передача данных: Например, ленты новостей или обновления котировок.

Альтернативы SSE:

1. WebSockets: Для двусторонней связи в реальном времени.
2. Long Polling: Когда SSE недоступен.
3. Polling: Для простых сценариев.

🚀 Источник: DeepSeek