--- title: MessageEvent slug: Web/API/MessageEvent tags: - API - Canais - Interface - Mensagens - Referencia - WebSockets - Window - Workers translation_of: Web/API/MessageEvent ---
{{APIRef("HTML DOM")}}

A interface MessageEvent representa a mensagem recebida pelo objeto alvo.

É usado para representar mensagens em:

A ação acionada por este evento é definida na função escolhida para ser o event handler do evento {{event("message")}} relevante (e.x. usar um handler onmessage como é menciondo antriormente).

{{AvailableInWorkers}}
{{InheritanceDiagram(600, 80)}}

Construtor

{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
Cria um MessageEvent.

Propriedades

Esta interface também herda propriedades da interface {{domxref("Event")}}, de qual se deriva.

{{domxref("MessageEvent.data")}} {{readonlyInline}}
Os dados enviados pelo emissor da mensagem.
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
Uma {{domxref("USVString")}} que representa a origem do emissor da mensagem.
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
Uma {{domxref("DOMString")}} que representa um ID único para o evento.
{{domxref("MessageEvent.source")}} {{readonlyInline}}
Uma MessageEventSource (que pode ser um objeto {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) que representa o emissor da mensagem.
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
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 worker partilhado).

Métodos

Esta interface também herda métodos de {{domxref("Event")}}, de qual se deriva.

{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
Inicializa um evento de mensagem. Não use — use antes o construtor {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}.

Exemplos

No nossoexemplo básico dum worker partilhado, temos duas páginas de HTML, cada qual usa JavaScript para fazer um simples cálculo. Os scripts diferentes estão a utilizar o mesmo ficheiro de worker para fazer os cálculos — ambos podem-no aceder, mesmo se as páginas estiverem a correr em janelas diferentes.

O seguinte snippet de código demonstra a criação dum objeto {{domxref("SharedWorker")}} usando o construtor {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Ambas scripts contêm isto:

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

Ambas scripts acedem ao worker através dum objeto {{domxref("MessagePort")}} criado usando a propriedade {{domxref("SharedWorker.port")}}. Se o evento onmessage foi adicionado usando addEventListener, a porta é manualmente criada usando o seu método start():

myWorker.port.start();

Quando a porta é iniciada, ambos scripts enviam mensagens ao worker e processão mensagens vindas do worker usando port.postMessage() e port.onmessage, respetivamente:

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');
}

Dentro do worker usamos o handler {{domxref("SharedWorkerGlobalScope.onconnect")}} para nos ligarmos à mesma porta a que referimos antes. As portas associadas a esse worker são acessíveis através da propriedade ports do evento {{event("connect")}} — nós depois usamos o método start() de {{domxref("MessagePort")}} para iniciar a porta, e o handler onmessage para lidar com as mensagens enviadas dos threads principais.

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.
}

Especificações

Especificação Estado Comentário
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}} {{Spec2('HTML WHATWG')}}

Compatibilidade

{{Compat("api.MessageEvent")}}

Ver também