MessageEvent

Das MessageEvent Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.

Es wird verwendet in in:

• Server-sent events (siehe EventSource.onmessage).
• Web sockets (siehe onmessage Eigentschaft des WebSocket Interface).
• Cross-document messaging (siehe Window.postMessage() und Window.onmessage).
• Channel messaging (siehe MessagePort.postMessage() und MessagePort.onmessage).
• Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in Worker.postMessage(), Worker.onmessage, ServiceWorkerGlobalScope.onmessage, usw.)
• Broadcast channels (siehe Broadcastchannel.postMessage()) und BroadcastChannel.onmessage).
• WebRTC data channels (siehe RTCDataChannel.onmessage).

Welche Aktion durch dieses Event ausgeführt wird, entscheidet die Funktion die als entsprechender Eventhandler für das message Event definiert wurde. Beispielsweise durch das setzen eines onmessage handlers. 

MessageEvent()

Creates a new MessageEvent.

Dieses Interface erbt auch Eigenschaften seines parents, Event.

MessageEvent.data Schreibgeschützt

Die Daten die vom message emitter gesendet wurden.

MessageEvent.origin Schreibgeschützt

Ein USVString der den Ursprung (Origin) des message emitters repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

Ein DOMString der die einzigartige ID des Events repräsentiert.

MessageEvent.source Schreibgeschützt

Eine MessageEventSource (welch ein WindowProxy, MessagePort, or ServiceWorker Objekt sein kann) welche den message emitter repräsentiert.

MessageEvent.ports Schreibgeschützt

Ein Array bestehend aus MessagePort Objekten, welche die Ports repräsentieren, welche mit dem channel verbunden sind durch die die Nachricht gesendet wurde (Bespielsweise in channel messaging oder wenn eine Nachricht zu einem shared worker gesendet wird).

Dieses Interface erbt auch Methoden von seinem parent, Event.

MessageEvent.initMessageEvent()

Initialisiert ein Message Objekt. Bitte nicht mehr benutzen — benutzen Sie bitte den MessageEvent() constructor stattdessen.

In unserem  Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen jede eine einfache Berechnung ausführt. Die unterschiedlichen Skripte benutzen die gleiche Worker Datei um die Berechnungen auszuführen — sie können beide darauf zugreifen, selbst wenn sich ihre Seiten in verschiedenen Fenstern befinden.

Der folgende Ausschnitt zeigt wie man ein SharedWorker Objekt mit dem SharedWorker() constructor erzeugen kann. Beide Skripte enthalten dies:

var myWorker = new SharedWorker('worker.js');

Beide Skripte greifen durch ein MessagePort Objekt auf den Worker zu, welcher mit der SharedWorker.port Eigenschaft erstellt wurde. Wenn das onmessage event mittels addEventListener hinzugefügt wird, wird der port automatisch mittels seiner start() Methode gestartet:

myWorker.port.start();

Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels  port.postMessage() und port.onmessage:

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

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

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

In dem Worker benutzen wir den SharedWorkerGlobalScope.onconnect Handler um uns mit dem oben erwähnten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die ports Eigenschaft des connect Events erreichbar — dann benutzen wir die MessagePort start() Methode um den Port zu starten, und den onmessage Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });

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

• ExtendableMessageEvent — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.