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: Dieses Feature ist verfügbar in Web Workers.

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.

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

onmessage = (event) => {};

Ereignistyp

Ein MessageEvent. Erbt von Event.

Event MessageEvent

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Nur lesbar

Die vom Nachrichtensender gesendeten Daten.

MessageEvent.origin Nur lesbar

Ein String, der den Ursprung des Nachrichtensenders repräsentiert.

MessageEvent.lastEventId Nur lesbar

Ein String, der eine eindeutige ID für das Ereignis darstellt.

MessageEvent.source Nur lesbar

Eine MessageEventSource (die ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), die den Nachrichtensender darstellt.

MessageEvent.ports Nur lesbar

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.

js
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

js
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

Siehe auch