MessageEvent - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

MessageEvent

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

Das MessageEvent-Interface repräsentiert eine Nachricht, die von einem Zielobjekt empfangen wurde.

Dies wird verwendet, um Nachrichten in folgenden Kontexten zu repräsentieren:

Server-sent events (siehe das message-Ereignis von EventSource).
WebSockets (siehe das message-Ereignis von WebSocket).
Dokumentübergreifende Nachrichtenübermittlung (siehe Window.postMessage() und das message-Ereignis von Window).
Channel messaging (siehe MessagePort.postMessage() und das message-Ereignis von MessagePort).
Nachrichtenübermittlung zwischen Workern/Dokumenten (siehe die oben erwähnten zwei Einträge, aber auch Worker.postMessage(), das message-Ereignis von Worker, das message-Ereignis von ServiceWorkerGlobalScope, etc.)
Broadcast channels (siehe BroadcastChannel.postMessage() und das message-Ereignis von BroadcastChannel).
WebRTC-Datenkanäle (siehe das message-Ereignis von RTCDataChannel).

Die durch dieses Ereignis ausgelöste Aktion wird in einer Funktion definiert, die als Ereignis-Handler für das betreffende message-Ereignis gesetzt ist.

Event MessageEvent

In diesem Artikel

Konstruktor

MessageEvent()

Erstellt ein neues MessageEvent.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Elternobjekt, Event.

MessageEvent.data Schreibgeschützt

Die Daten, die vom Nachrichten-Emitter gesendet wurden.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichten-Emitters repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

Ein String, der eine eindeutige ID für das Ereignis repräsentiert.

MessageEvent.source Schreibgeschützt

Ein MessageEventSource (das ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), das den Nachrichten-Emitter repräsentiert.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, das alle mit der Nachricht gesendeten MessagePort-Objekte in der richtigen Reihenfolge enthält.

Instanz-Methoden

Dieses Interface erbt auch Methoden von seinem Elternobjekt, Event.

initMessageEvent()

Initialisiert ein Nachrichtenevent. Verwenden Sie dies nicht mehr — verwenden Sie stattdessen den MessageEvent()-Konstruktor.

In unserem Grundlegenden Beispiel für Shared Worker (Shared Worker ausführen), haben wir zwei HTML-Seiten, von denen jede ein JavaScript verwendet, um eine Berechnung durchzuführen. Die verschiedenen Skripte verwenden dieselbe Worker-Datei, um die Berechnung durchzuführen – sie können beide darauf zugreifen, selbst wenn ihre Seiten in unterschiedlichen Fenstern ausgeführt werden.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts mithilfe des SharedWorker()-Konstruktors. Beide Skripte enthalten dieses:

const myWorker = new SharedWorker("worker.js");

Beide Skripte greifen dann über ein MessagePort-Objekt zu, das mithilfe der SharedWorker.port-Eigenschaft erstellt wurde. Wenn das onmessage-Ereignis mit addEventListener angehängt wird, wird der Port manuell mit seiner start()-Methode gestartet:

myWorker.port.start();

Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und behandeln Nachrichten, die von diesem mit port.postMessage() und port.onmessage gesendet werden:

js
[first, second].forEach((input) => {
  input.onchange = () => {
    myWorker.port.postMessage([first.value, second.value]);
    console.log("Message posted to worker");
  };
});

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

Im Inneren des Workers verwenden wir den onconnect-Handler, um die Verbindung zum oben beschriebenen Port herzustellen. Die mit diesem Worker verbundenen Ports sind über die ports-Eigenschaft des connect-Ereignisses zugänglich – wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um Nachrichten von den Haupt-Threads zu bearbeiten.

js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

ExtendableMessageEvent — ähnlich dieses Interface, aber in Interfaces verwendet, die den Autoren mehr Flexibilität bieten müssen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
MessageEvent
Konstruktor
1. MessageEvent()
Instanzeigenschaften
Vererbung
1. Event
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

MessageEvent

In diesem Artikel

Konstruktor

Instanz-Eigenschaften

Instanz-Methoden

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN