EventSource: message-Ereignis

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 löst keine Ereignisblase aus.

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.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element, Event.

MessageEvent.data Schreibgeschützt: Die vom Nachrichtenemitter gesendeten Daten.
MessageEvent.origin Schreibgeschützt: Eine Zeichenkette, die den Ursprung des Nachrichtenemitters darstellt.
MessageEvent.lastEventId Schreibgeschützt: Eine Zeichenkette, die eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Schreibgeschützt: Eine MessageEventSource (die ein WindowProxy, ein MessagePort oder ein ServiceWorker-Objekt sein kann) und den Nachrichtenemitter darstellt.
MessageEvent.ports Schreibgeschützt: Ein Array von MessagePort-Objekten, die die mit dem Kanal verbundenen Ports darstellen, durch den die Nachricht gesendet wird (wo zutreffend, z.B. im Kanal-Messaging oder beim Senden einer Nachricht an einen gemeinsam genutzten Worker).

Beispiele

In diesem einfachen Beispiel wird ein 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