1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
---
title: MessageEvent
slug: Web/API/MessageEvent
tags:
- API
- Channels
- Interface
- Nachrichten
- Referenz
- WebSockets
- Window
- Workers
- messaging
translation_of: Web/API/MessageEvent
---
<div>{{APIRef("HTML DOM")}}</div>
<p>Das <code><strong>MessageEvent</strong></code> Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.</p>
<p>Es wird verwendet in in:</p>
<ul>
<li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a> (siehe {{domxref("EventSource.onmessage")}}).</li>
<li><a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (siehe <code>onmessage</code> Eigentschaft des <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> Interface).</li>
<li>Cross-document messaging (siehe {{domxref("Window.postMessage()")}} und {{domxref("Window.onmessage")}}).</li>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> (siehe {{domxref("MessagePort.postMessage()")}} und {{domxref("MessagePort.onmessage")}}).</li>
<li>Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, usw.)</li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> (siehe {{domxref("Broadcastchannel.postMessage()")}}) und {{domxref("BroadcastChannel.onmessage")}}).</li>
<li>WebRTC data channels (siehe {{domxref("RTCDataChannel.onmessage")}}).</li>
</ul>
<p>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 <code>onmessage</code> handlers. </p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
<dd>Creates a new <code>MessageEvent</code>.</dd>
</dl>
<h2 id="Eigenschaften">Eigenschaften</h2>
<p><em>Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.</em></p>
<dl>
<dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
<dd>Die Daten die vom message emitter gesendet wurden.</dd>
<dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
<dd>Ein {{domxref("USVString")}} der den Ursprung (Origin) des message emitters repräsentiert.</dd>
<dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
<dd>Ein {{domxref("DOMString")}} der die einzigartige ID des Events repräsentiert.</dd>
<dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
<dd>Eine <code>MessageEventSource</code> (welch ein {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} Objekt sein kann) welche den message emitter repräsentiert.</dd>
<dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
<dd>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).</dd>
</dl>
<h2 id="Methoden">Methoden</h2>
<p><em>Dieses Interface erbt auch Methoden von seinem parent, {{domxref("Event")}}.</em></p>
<dl>
<dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
<dd>Initialisiert ein Message Objekt. <strong>Bitte nicht mehr benutzen</strong> — <strong>benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} constructor stattdessen.</strong></dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker"> Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), 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.</p>
<p>Der folgende Ausschnitt zeigt wie man ein <code>SharedWorker</code> Objekt mit dem {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:</p>
<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
</pre>
<p>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 <code>start()</code> Methode gestartet:</p>
<pre class="brush: js">myWorker.port.start();</pre>
<p>Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels <code>port.postMessage()</code> und <code>port.onmessage</code>:</p>
<pre class="brush: js">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');
}</pre>
<p>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 <code>ports</code> Eigenschaft des {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten, und den <code>onmessage</code> Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.</p>
<pre class="brush: js">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.
}</pre>
<h2 id="Specifikationen">Specifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>1</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>9</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatSafari('10.0+')}}</td>
</tr>
<tr>
<td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("55.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>3.0+</td>
</tr>
<tr>
<td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("55.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{domxref("ExtendableMessageEvent")}} — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.</li>
</ul>
|
