MessageEvent
Das MessageEvent
Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.
Es wird verwendet in in:
- Server-sent events (siehe
EventSource.onmessage
(en-US)). - Web sockets (siehe
onmessage
Eigentschaft des WebSocket Interface). - Cross-document messaging (siehe
Window.postMessage()
(en-US) undWindow.onmessage
). - Channel messaging (siehe
MessagePort.postMessage()
(en-US) undMessagePort.onmessage
(en-US)). - Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in
Worker.postMessage()
(en-US),Worker.onmessage
(en-US),ServiceWorkerGlobalScope.onmessage
(en-US), usw.) - Broadcast channels (siehe
Broadcastchannel.postMessage()
(en-US)) undBroadcastChannel.onmessage
(en-US)). - WebRTC data channels (siehe
RTCDataChannel.onmessage
(en-US)).
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()
(en-US)- Creates a new
MessageEvent
.
Eigenschaften
Dieses Interface erbt auch Eigenschaften seines parents, Event
.
MessageEvent.data
(en-US) Schreibgeschützt- Die Daten die vom message emitter gesendet wurden.
MessageEvent.origin
(en-US) Schreibgeschützt- Ein
USVString
der den Ursprung (Origin) des message emitters repräsentiert. MessageEvent.lastEventId
(en-US) Schreibgeschützt- Ein
DOMString
der die einzigartige ID des Events repräsentiert. MessageEvent.source
(en-US) Schreibgeschützt- Eine
MessageEventSource
(welch einWindowProxy
,MessagePort
(en-US), orServiceWorker
Objekt sein kann) welche den message emitter repräsentiert. MessageEvent.ports
(en-US) Schreibgeschützt- Ein Array bestehend aus
MessagePort
(en-US) 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()
Deprecated- Initialisiert ein Message Objekt. Bitte nicht mehr benutzen — benutzen Sie bitte den
MessageEvent()
(en-US) 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()
(en-US) constructor erzeugen kann. Beide Skripte enthalten dies:
var myWorker = new SharedWorker('worker.js');
Beide Skripte greifen durch ein MessagePort
(en-US) Objekt auf den Worker zu, welcher mit der SharedWorker.port
(en-US) 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
(en-US) 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
(en-US) 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
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
(en-US) — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.