Использование потоков SSE в React с EventSource

new EventSource(url) создаёт SSE-соединение с указанным URL. Браузер немедленно открывает HTTP GET-запрос с заголовком Accept: text/event-stream. Сервер оставляет это соединение открытым и передаёт события потоком. EventSource — встроенный в браузер API; для базового использования библиотека не требуется.

EventSource имеет три состояния готовности: 0 (CONNECTING) — соединение устанавливается или восстанавливается, 1 (OPEN) — соединение установлено и события передаются, 2 (CLOSED) — соединение закрыто и повторно подключаться не будет. Проверьте eventSource.readyState, чтобы определить текущее состояние.

Обработчик eventSource.onmessage срабатывает для событий сервера, у которых явно не указан тип события (сервер отправляет data: ... без поля event:). Обработчик получает объект события, в котором event.data содержит строковые данные. Обычно сервер сериализует данные с помощью JSON.stringify, поэтому при получении вы разбираете их с помощью JSON.parse.

Сервер может отправлять именованные события: event: userJoined data: {"userId": "123"} . В браузере для прослушивания используйте eventSource.addEventListener('userJoined', handler). Это позволяет передавать несколько типов событий через одно SSE-соединение: у каждого типа есть собственный обработчик, благодаря чему код остаётся понятным и организованным.

Данные SSE поступают в виде строк. Для структурированных данных сервер отправляет JSON.stringify(payload), а клиент разбирает их: const data = JSON.parse(event.data). Всегда заключайте JSON.parse в конструкцию try/catch, чтобы корректно обрабатывать некорректный JSON от сервера: записывайте ошибку в журнал и пропускайте повреждённое событие.

Создавайте и закрывайте EventSource внутри useEffect: создайте соединение при монтировании компонента, подключите обработчики событий и верните функцию очистки, вызывающую eventSource.close(). Без очистки соединение не закрывается при размонтировании компонента, переходе пользователя на другую страницу или повторном запуске эффекта с другими зависимостями.

В обработчике eventSource.onmessage обновляйте состояние React, чтобы отразить новые данные: setMessages(prev => [...prev, JSON.parse(event.data)]). Используйте функциональную форму setState, чтобы избежать проблем с устаревшим замыканием: обработчик события сохраняет исходное значение состояния, а функциональное обновление гарантирует работу с самой свежей версией состояния.

EventSource автоматически переподключается, если соединение потеряно из-за сетевой ошибки или перезапуска сервера. Браузер ждёт небольшую задержку (обычно 3 секунды, задаваемую сервером с помощью retry: 3000 в потоке), а затем переподключается. Вам не нужно реализовывать логику переподключения — она встроена в API EventSource.

EventSource отслеживает идентификатор последнего полученного события (заданный сервером с помощью id: 123 в потоке). При переподключении браузер автоматически отправляет этот идентификатор в HTTP-заголовке Last-Event-ID. Хорошо спроектированный сервер использует его для повторной отправки пропущенных событий, благодаря чему при переподключении ни одно событие не теряется.

EventSource напрямую не поддерживает пользовательские заголовки. Для аутентификации используйте файлы cookie (new EventSource(url, { withCredentials: true }) отправляет файлы cookie) или передавайте токен аутентификации в параметре строки запроса URL. Если вам нужны заголовки Authorization, используйте API Fetch с ReadableStream вместо EventSource, чтобы вручную обрабатывать ответ SSE.

Когда EventSource обнаруживает ошибку, срабатывает обработчик ошибок. Состояние готовности будет равно CONNECTING (если будет выполнена повторная попытка) или CLOSED (если нет). В обработчике ошибок проверьте состояние готовности, чтобы отличить временную сетевую ошибку (повторная попытка будет выполнена автоматически) от постоянного сбоя (сервер вернул статус, отличный от 200). При постоянных ошибках закройте соединение и уведомите пользователя.

Что происходит, когда соединение EventSource прерывается из-за сетевой ошибки?

new EventSource(url) создаёт SSE-соединение с состояниями readyStates: CONNECTING, OPEN, CLOSED. Обычные события обрабатываются обработчиком сообщений, а именованные типы событий — с помощью addEventListener. JSON.parse(event.data) извлекает структурированную полезную нагрузку. Создавайте и освобождайте EventSource в useEffect. Автоматическое переподключение встроено: EventSource повторяет попытку после сетевых ошибок, используя Last-Event-ID для повторной отправки пропущенных событий. Для аутентификации используйте файлы cookie (withCredentials) или параметры строки запроса URL.