MessageEvent

MessageEvent()

Erstellt ein neues MessageEvent.

Dieses Interface erbt auch Eigenschaften von seinem Elternteil, Event.

MessageEvent.data Schreibgeschützt

Die von dem Nachrichten-Emitter gesendeten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichten-Emitters darstellt.

MessageEvent.lastEventId Schreibgeschützt

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

MessageEvent.source Schreibgeschützt

Eine MessageEventSource (dies kann ein WindowProxy, MessagePort oder ServiceWorker Objekt sein), das den Nachrichten-Emitter darstellt.

MessageEvent.ports Schreibgeschützt

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

Dieses Interface erbt auch Methoden von seinem Elternteil, Event.

initMessageEvent() Veraltet

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

In unserem einfachen Beispiel mit einem geteilten Worker (geteilten Worker ausführen) haben wir zwei HTML-Seiten, von denen jede ein bisschen JavaScript verwendet, um eine Berechnung durchzuführen. Die verschiedenen Skripte benutzen dieselbe Worker-Datei, um die Berechnung durchzuführen — sie können beide darauf zugreifen, selbst wenn ihre Seiten in verschiedenen Fenstern ausgeführt werden.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts unter Verwendung des SharedWorker()-Konstruktors. Beide Skripte enthalten dies:

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

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

myWorker.port.start();

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

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

second.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");
};

Innerhalb des Workers verwenden wir den onconnect-Handler, um eine Verbindung zum oben genannten Port herzustellen. Die mit diesem Worker assoziierten Ports sind im ports-Eigentum des connect-Ereignisses zugänglich — wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um Nachrichten zu bearbeiten, die von den Haupt-Threads gesendet werden.

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 diesem Interface, wird aber in Interfaces verwendet, die den Autoren mehr Flexibilität bieten müssen.