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
|
---
title: MessageEvent
slug: Web/API/MessageEvent
tags:
- API
- Canais
- Interface
- Mensagens
- Referencia
- WebSockets
- Window
- Workers
translation_of: Web/API/MessageEvent
---
<div>{{APIRef("HTML DOM")}}</div>
<p>A interface <code><strong>MessageEvent</strong></code> representa a mensagem recebida pelo objeto alvo.</p>
<p>É usado para representar mensagens em:</p>
<ul>
<li><a href="/en-US/docs/Web/API/Server-sent_events">Eventos enviados pelo servidor</a> (ver {{domxref("EventSource.onmessage")}}).</li>
<li><a href="/pt-PT/docs/Web/API/WebSockets_API">Web sockets</a> (ver a propriedade <code>onmessage</code> da interface <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a>).</li>
<li>Envio de mensagens entre-documentos (ver {{domxref("Window.postMessage()")}} e {{domxref("Window.onmessage")}}).</li>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Mensagens em canal</a> (ver {{domxref("MessagePort.postMessage()")}} e {{domxref("MessagePort.onmessage")}}).</li>
<li>Envio de mensagens entre-documentos e entre-<em>workers</em> (ver as duas entradas acima, e tembém {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Canais de transmissão</a> (ver {{domxref("Broadcastchannel.postMessage()")}}) e {{domxref("BroadcastChannel.onmessage")}}).</li>
<li>Canais de transmissão de WebRTC (ver {{domxref("RTCDataChannel.onmessage")}}).</li>
</ul>
<p>A ação acionada por este evento é definida na função escolhida para ser o <em>event handler</em> do evento {{event("message")}} relevante (e.x. usar um <em>handler</em> <code>onmessage</code> como é menciondo antriormente).</p>
<p>{{AvailableInWorkers}}<br>
{{InheritanceDiagram(600, 80)}}</p>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
<dd>Cria um <code>MessageEvent</code>.</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<p><em>Esta interface também herda propriedades da interface {{domxref("Event")}}, </em> <em>de qual se deriva</em><em>.</em></p>
<dl>
<dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
<dd>Os dados enviados pelo emissor da mensagem.</dd>
<dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
<dd>Uma {{domxref("USVString")}} que representa a origem do emissor da mensagem.</dd>
<dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
<dd>Uma {{domxref("DOMString")}} que representa um ID único para o evento.</dd>
<dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
<dd>Uma <code>MessageEventSource</code> (que pode ser um objeto {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) que representa o emissor da mensagem.</dd>
<dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
<dd>Uma matriz de objetos {{domxref("MessagePort")}} que representam as portas ao canal por qual as mensagens são enviadas (onde for apropriado, por exemplo em mensagens via canais ou ao enviar uma mensagem a um <em>worker</em> partilhado).</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<p><em>Esta interface também herda métodos de {{domxref("Event")}}, de qual se deriva.</em></p>
<dl>
<dt>{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}</dt>
<dd>Inicializa um evento de mensagem. <strong>Não use</strong> — <strong>use antes o construtor {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}.</strong></dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>No nosso<a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">exemplo básico dum <em>worker</em> partilhado</a>, temos duas páginas de HTML, cada qual usa JavaScript para fazer um simples cálculo. Os <em>scripts</em> diferentes estão a utilizar o mesmo ficheiro de <em>worker</em> para fazer os cálculos — ambos podem-no aceder, mesmo se as páginas estiverem a correr em janelas diferentes.</p>
<p>O seguinte <em>snippet</em> de código demonstra a criação dum objeto {{domxref("SharedWorker")}} usando o construtor {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Ambas <em>scripts</em> contêm isto:</p>
<pre class="brush: js notranslate">var myWorker = new SharedWorker('worker.js');
</pre>
<p>Ambas <em>scripts</em> acedem ao <em>worker</em> através dum objeto {{domxref("MessagePort")}} criado usando a propriedade {{domxref("SharedWorker.port")}}. Se o evento <code>onmessage</code> foi adicionado usando <code>addEventListener</code>, a porta é manualmente criada usando o seu método <code>start()</code>:</p>
<pre class="brush: js notranslate">myWorker.port.start();</pre>
<p>Quando a porta é iniciada, ambos <em>scripts</em> enviam mensagens ao <em>worker</em> e processão mensagens vindas do <em>worker</em> usando <code>port.postMessage()</code> e <code>port.onmessage</code>, respetivamente:</p>
<pre class="brush: js notranslate">first.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Mensagem enviada ao worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Mensagem enviada ao worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log('Mensagem recebida do worker');
}</pre>
<p>Dentro do <em>worker</em> usamos o <em>handler</em> {{domxref("SharedWorkerGlobalScope.onconnect")}} para nos ligarmos à mesma porta a que referimos antes. As portas associadas a esse <em>worker</em> são acessíveis através da propriedade <code>ports</code> do evento {{event("connect")}} — nós depois usamos o método <code>start()</code> de {{domxref("MessagePort")}} para iniciar a porta, e o <em>handler</em> <code>onmessage</code> para lidar com as mensagens enviadas dos <em>threads</em> principais.</p>
<pre class="brush: js notranslate">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(); // Necessário quando se usa addEventListener. Senão é chamado implicitamente pelo setter onmessage.
}</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade">Compatibilidade</h2>
<p>{{Compat("api.MessageEvent")}}</p>
<h2 id="Ver_também">Ver também</h2>
<ul>
<li>{{domxref("ExtendableMessageEvent")}} — parecida a esta interface, mas usada como base de outras interfaces que necessitam dar mais flexibilidade aos seus utilizadores ou autores.</li>
</ul>
|
