We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Es wird verwendet in in:

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. 

Hinweis: Dieses Feature ist in Web Workers verfügbar.

Constructor

MessageEvent()
Creates a new MessageEvent.

Eigenschaften

Dieses Interface erbt auch Eigenschaften seines parents, Event.

MessageEvent.data Read only
Die Daten die vom message emitter gesendet wurden.
MessageEvent.origin Read only
Ein USVString der den Ursprung (Origin) des message emitters repräsentiert.
MessageEvent.lastEventId Read only
Ein DOMString der die einzigartige ID des Events repräsentiert.
MessageEvent.source Read only
Eine MessageEventSource (welch ein WindowProxy, MessagePort, or ServiceWorker Objekt sein kann) welche den message emitter repräsentiert.
MessageEvent.ports Read only
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).

Methoden

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.

Examples

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

Specifikationen

Specification Status Comment
HTML Living Standard
Die Definition von 'MessageEvent' in dieser Spezifikation.
Lebender Standard  

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1 (Ja) 4.0 (2.0) 9 ? 10.0+
origin als USVString und source als MessageEventSource (Ja) ? 55.0 (55.0) Nicht unterstützt ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? (Ja) ? ? ? 3.0+
origin als USVString und source als MessageEventSource ? ? 55.0 (55.0) Nicht unterstützt ? ?

Siehe auch

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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: sv3m0r
Zuletzt aktualisiert von: sv3m0r,