EventSource

Интерфейс EventSource — это интерфейс веб-контента для событий, отправляемых сервером.

Экземпляр EventSource открывает постоянное соединение с сервером HTTP, который отправляет события в формате text/event-stream. Соединение остается открытым до тех пор, пока его не закроют, вызвав EventSource.close().

После открытия соединения входящие сообщения с сервера доставляются вашему коду в виде событий. Если в входящем сообщении есть поле event, то сгенерированное событие совпадает со значением поля event. Если поле event отсутствует, то генерируется общее событие message.

В отличие от WebSockets, события, отправляемые сервером, являются однонаправленными; то есть, данные передаются в одном направлении, от сервера к клиенту (например, веб-браузеру пользователя). Это делает их отличным выбором, когда нет необходимости отправлять данные от клиента к серверу в виде сообщений. Например, EventSource — полезный подход для обработки таких вещей, как обновления статуса в социальных сетях, ленты новостей или доставка данных в механизм хранения на стороне клиента, такой как IndexedDB или хранилище веб-данных.

EventSource()

Создает новый EventSource для обработки приема событий, отправляемых сервером, с указанного URL-адреса, необязательно в режиме аутентификации.

Этот интерфейс также наследует свойства от своего родителя, EventTarget.

EventSource.readyState Только для чтения

Число, представляющее состояние соединения. Возможные значения: CONNECTING (0), OPEN (1), или CLOSED (2).

EventSource.url Только для чтения

Строка, представляющая URL-адрес источника.

EventSource.withCredentials Только для чтения

Булево значение, указывающее, был ли объект EventSource создан с параметрами аутентификации между доменами (CORS) (true), или нет (false, значение по умолчанию).

Этот интерфейс также наследует методы от своего родителя, EventTarget.

EventSource.close()

Закрывает соединение, если оно есть, и устанавливает значение атрибута readyState в CLOSED. Если соединение уже закрыто, метод ничего не делает.

error

Срабатывает, когда открытие соединения с источником событий не удалось.

message

Срабатывает при получении данных от источника событий.

open

Срабатывает, когда соединение с источником событий было открыто.

Кроме того, сам источник событий может отправлять сообщения с полем event, что создаст событийные обработчики с ключом, соответствующим значению этого поля.

В этом базовом примере создается EventSource для получения безымянных событий с сервера; страница с именем sse.php отвечает за генерацию событий.

const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

Каждое полученное событие приводит к выполнению обработчика событий EventSource объекта onmessage. В свою очередь, он создает новый элемент <li> и записывает данные сообщения в него, а затем добавляет новый элемент в список, уже существующий в документе.

Для прослушивания именованных событий вам потребуется обработчик для каждого типа отправленного события.

const sse = new EventSource("/api/v1/sse");

/*
 * This will listen only for events
 * similar to the following:
 *
 * event: notice
 * data: useful data
 * id: some-id
 */
sse.addEventListener("notice", (e) => {
  console.log(e.data);
});

/*
 * Similarly, this will listen for events
 * with the field `event: update`
 */
sse.addEventListener("update", (e) => {
  console.log(e.data);
});

/*
 * The event "message" is a special case, as it
 * will capture events without an event field
 * as well as events that have the specific type
 * `event: message` It will not trigger on any
 * other event type.
 */
sse.addEventListener("message", (e) => {
  console.log(e.data);
});

• Server-sent events
• Использование server-sent events