Какие события доступны для событий, отправляемых с сервера (Server-Sent Events)?nodejs-195

В технологии Server-Sent Events существует несколько типов событий, которые можно обрабатывать на клиентской стороне. Рассмотрим все доступные события и их особенности.

Основные события EventSource

1. Стандартные события

  1. message - основное событие для данных:

    eventSource.onmessage = (event) => {
  console.log('Получены данные:', event.data);
};

    Срабатывает для сообщений без указанного типа или с типом event: message

  2. open - при успешном подключении:

    eventSource.onopen = (event) => {
  console.log('Соединение установлено');
};

  3. error - при ошибках соединения:

    eventSource.onerror = (event) => {
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Соединение закрыто');
  } else {
    console.error('Ошибка соединения');
  }
};

2. Пользовательские события

Можно создавать любые именованные события:

eventSource.addEventListener('stockUpdate', (event) => {
  const data = JSON.parse(event.data);
  updateStockPrice(data);
});

Пример серверной отправки:

event: stockUpdate\ndata: {"symbol":"AAPL","price":182.34}\n\n

Специальные системные события

  1. Повторное подключение (retry): Сервер может указать интервал переподключения:

    retry: 10000\n\n

    Клиент автоматически использует этот интервал при разрыве соединения

  2. Идентификатор события (id):

    id: 42\ndata: Обновление\n\n

    Позволяет отслеживать последнее полученное сообщение

Объект события

Все обработчики получают объект события со следующими свойствами:

eventSource.onmessage = (event) => {
  console.log('Данные:', event.data); // содержимое сообщения
  console.log('Тип события:', event.type); // "message" для onmessage
  console.log('ID события:', event.lastEventId); // последний полученный ID
  console.log('Время создания:', new Date(event.timeStamp));
};

Пример комплексной обработки

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

// Стандартные обработчики
eventSource.onopen = () => showStatus('Подключено');
eventSource.onerror = () => showStatus('Ошибка подключения');

// Пользовательские события
eventSource.addEventListener('userNotification', (e) => {
  showNotification(JSON.parse(e.data));
});

eventSource.addEventListener('systemAlert', (e) => {
  alert(`СИСТЕМА: ${e.data}`);
});

// Обработка всех входящих сообщений
eventSource.onmessage = (e) => {
  if (e.lastEventId) {
    console.log(`Последний ID: ${e.lastEventId}`);
  }
  updateFeed(e.data);
};

Особенности работы с событиями

  1. Приоритет обработки:

    • Специфичные обработчики (addEventListener) имеют приоритет над общими (onmessage)
    • Если есть обработчик для конкретного типа события, onmessage не сработает

  2. Типы данных:

    • Все данные приходят как строка (даже если сервер отправил JSON)
    • Необходимо парсить вручную: JSON.parse(event.data)

  3. Множественные обработчики: Можно назначить несколько обработчиков для одного типа события:

    eventSource.addEventListener('update', handler1);
eventSource.addEventListener('update', handler2);

Резюмируем:


Server-Sent Events предоставляют гибкую систему обработки событий, включая стандартные (message, open, error) и пользовательские события. Клиент может реагировать на разные типы сообщений отдельными обработчиками, а сервер - управлять поведением соединения через специальные поля (retry, id). Правильное использование событий SSE позволяет создавать эффективные системы реального времени с минимальной нагрузкой на клиент.

Вопросы

Собеседования