diff options
Diffstat (limited to 'files/pt-pt/web/api/messageevent/index.html')
| -rw-r--r-- | files/pt-pt/web/api/messageevent/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/files/pt-pt/web/api/messageevent/index.html b/files/pt-pt/web/api/messageevent/index.html new file mode 100644 index 0000000000..f69342523b --- /dev/null +++ b/files/pt-pt/web/api/messageevent/index.html @@ -0,0 +1,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> |