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() Veraltet

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

Beispiele

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:

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:

[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.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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