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
|
---
title: MessageEvent
slug: Web/API/MessageEvent
translation_of: Web/API/MessageEvent
---
<div>{{APIRef("HTML DOM")}}</div>
<p>La interface <code><strong>MessageEvent</strong></code> representa un mensaje recibido por un objeto de destino.</p>
<p>Este es usado para representar mensajes en : </p>
<ul>
<li><a href="/en-US/docs/Web/API/Server-sent_events">Eventos enviados por el servidor </a>(ver {{domxref("EventSource.onmessage")}}).</li>
<li><a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (ver la propiedad <code>onmessage</code> de la interface <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> ).</li>
<li>Mensajeria cruzada(ver {{domxref("Window.postMessage()")}} y {{domxref("Window.onmessage")}}).</li>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Mensajes de canal </a>(ver {{domxref("MessagePort.postMessage()")}} y {{domxref("MessagePort.onmessage")}}).</li>
<li>Trabajo cruzado / Mensajes de texto (vea las dos entradas anteriores, pero también {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Canales de Transmisión</a>(ver{{domxref("Broadcastchannel.postMessage()")}}) y {{domxref("BroadcastChannel.onmessage")}}).</li>
<li>Canal de datos WebRTC (ver {{domxref("RTCDataChannel.onmessage")}}).</li>
</ul>
<p>La acción desencadenada por este evento es definida en una función establecida como el controlador de eventos para el evento pertinente {{event("message")}} ( es decir : Usando un manejador de <code>onmessage</code> como se lista arriba).</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
<dd>Crear un nuevo <code>MessageEvent</code>.</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Esta interface tambien herada propiedadesde desde su padre {{domxref("Evento")}}.</em></p>
<dl>
<dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
<dd>La información enviada por el emisor del mensaje.</dd>
<dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
<dd>{{domxref("USVString")}} es una representacion del origen del emisor del mensaje. </dd>
<dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
<dd>{{domxref("DOMString")}} es una representación de una ID unico para el evento.</dd>
<dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
<dd>El <code>MessageEventSource</code> (El cual puede ser un {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) es ima representación del mensaje emitido.</dd>
<dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
<dd>Un array de objetos {{domxref("MessagePort")}} representa los puertos asociados al canal, el mensaje se esta enviado a traves de (donde sea apropiado, por ejemplo, en mensajes de canal o al enviar un mensaje a un trabajador compartido).</dd>
</dl>
<h2 id="Metodos">Metodos</h2>
<p><em>Esta interface tambien herada propiedadesde desde su padre, {{domxref("Evento")}}.</em></p>
<dl>
<dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
<dd>Inicializar un vento de mensaje. <strong>No use esto mas </strong>— en vez de eso use el constructor <strong>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} .</strong></dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>En nuestro <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Ejemplo basico de trabajador compartido</a>(<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Ejecutar trabajador compartdo </a>), Tenemos dos paginas HTML, cada una de las cuales usa algo de JavaScript para mejorar un calculo simple. Los diferentes scripts estan usando el mismo archivo de trabajo para mejorar el calculo — Ambos pueden accederlo, Incluso si sus paginas esta corriendo n diferentes ventanas. </p>
<p>The following code snippet shows creation of a <code>SharedWorker</code> object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:</p>
<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
</pre>
<p>Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its <code>start()</code> method:</p>
<pre class="brush: js">myWorker.port.start();</pre>
<p>When the port is started, both scripts post messages to the worker and handle messages sent from it using <code>port.postMessage()</code> and <code>port.onmessage</code>, respectively:</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>Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's <code>ports</code> property — we then use {{domxref("MessagePort")}} <code>start()</code> method to start the port, and the <code>onmessage</code> handler to deal with messages sent from the main threads.</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="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</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> as {{domxref("USVString")}} and <code>source</code> as <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>Basic support</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> as {{domxref("USVString")}} and <code>source</code> as <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="Ver_tambien">Ver tambien</h2>
<ul>
<li>{{domxref("ExtendableMessageEvent")}} — similar to this interface but used in interfaces that needs to give more flexibility to authors.</li>
</ul>
|
