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 durch eine Ereignisquelle empfangen werden.

Dieses Ereignis ist nicht abbruchfähig und wird nicht weitergegeben.

Syntax

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

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

onmessage = (event) => {};

Ereignistyp

Ein MessageEvent. Erbt von Event.

Ereigniseigenschaften

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 repräsentiert.
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 assoziiert sind, über den die Nachricht gesendet wird (wo zutreffend, z. B. beim Kanal-Messaging oder beim Senden einer Nachricht an einen gemeinsamen Worker).

Beispiele

In diesem einfachen Beispiel wird eine EventSource erstellt, um Ereignisse vom Server zu empfangen; eine Seite mit dem Namen sse.php ist dafür verantwortlich, die Ereignisse zu generieren.

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);
});

onmessage Äquivalent

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

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser