MessageEvent

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 message relevante (e.x. usar um handler onmessage como é menciondo antriormente).

Note: This feature is available in Web Workers.


Construtor

MessageEvent() (en-US)
Cria um MessageEvent.

Propriedades

Esta interface também herda propriedades da interface Event (en-US), de qual se deriva.

MessageEvent.data (en-US) Read only
Os dados enviados pelo emissor da mensagem.
MessageEvent.origin (en-US) Read only
Uma USVString (en-US) que representa a origem do emissor da mensagem.
MessageEvent.lastEventId (en-US) Read only
Uma DOMString que representa um ID único para o evento.
MessageEvent.source (en-US) Read only
Uma MessageEventSource (que pode ser um objeto WindowProxy, MessagePort (en-US), ou ServiceWorker (en-US)) que representa o emissor da mensagem.
MessageEvent.ports (en-US) Read only
Uma matriz de objetos MessagePort (en-US) 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 Event (en-US), de qual se deriva.

initMessageEvent() This deprecated API should no longer be used, but will probably still work.
Inicializa um evento de mensagem. Não useuse antes o construtor MessageEvent() (en-US).

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 SharedWorker usando o construtor SharedWorker() (en-US). Ambas scripts contêm isto:

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

Ambas scripts acedem ao worker através dum objeto MessagePort (en-US) criado usando a propriedade SharedWorker.port (en-US). 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 SharedWorkerGlobalScope.onconnect (en-US) 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 connect — nós depois usamos o método start() de MessagePort (en-US) 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
HTML Living Standard
The definition of 'MessageEvent' in that specification.
Living Standard

Compatibilidade

BCD tables only load in the browser

Ver também

  • ExtendableMessageEvent (en-US) — parecida a esta interface, mas usada como base de outras interfaces que necessitam dar mais flexibilidade aos seus utilizadores ou autores.