EventSource: message event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das message-Ereignis der EventSource-Schnittstelle wird ausgelöst, wenn Daten über eine Ereignisquelle empfangen werden.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("message", (event) => {});

onmessage = (event) => {};

Ereignistyp

Ein MessageEvent. Erbt von Event.

Eigenschaften des Ereignisses

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Schreibgeschützt: Die vom Nachrichtensender gesendeten Daten.
MessageEvent.origin Schreibgeschützt: Ein String, der den Ursprung des Nachrichtensenders darstellt.
MessageEvent.lastEventId Schreibgeschützt: Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Schreibgeschützt: Eine MessageEventSource (die ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), die den Nachrichtensender darstellt.
MessageEvent.ports Schreibgeschützt: Ein Array von MessagePort-Objekten, die die Ports darstellen, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (wo zutreffend, z. B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen Shared Worker).

Beispiele

In diesem grundlegenden Beispiel wird eine EventSource erstellt, um Ereignisse vom Server zu empfangen; eine Seite mit dem Namen sse.php ist für die Generierung der Ereignisse verantwortlich.

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

evtSource.addEventListener("message", (e) => {
  const newElement = document.createElement("li");

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

Äquivalent zu onmessage

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

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

Spezifikationen

Specification
HTML # event-message
HTML # handler-eventsource-onmessage