From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/api/messageevent/index.html | 205 +++++++++++++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 files/de/web/api/messageevent/index.html (limited to 'files/de/web/api/messageevent') diff --git a/files/de/web/api/messageevent/index.html b/files/de/web/api/messageevent/index.html new file mode 100644 index 0000000000..5f3bc4c4c8 --- /dev/null +++ b/files/de/web/api/messageevent/index.html @@ -0,0 +1,205 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Nachrichten + - Referenz + - WebSockets + - Window + - Workers + - messaging +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

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 {{event("message")}} Event definiert wurde. Beispielsweise durch das setzen eines onmessage handlers. 

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Creates a new MessageEvent.
+
+ +

Eigenschaften

+ +

Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.

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

+ +
+
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
+
Initialisiert ein Message Objekt. Bitte nicht mehr benutzen — benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "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 {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:

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

Beide Skripte greifen durch ein {{domxref("MessagePort")}} Objekt auf den Worker zu, welcher mit der {{domxref("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 {{domxref("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 {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9{{CompatUnknown}}{{CompatSafari('10.0+')}}
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.0+
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf