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()
Cria um MessageEvent.

Propriedades

Esta interface também herda propriedades da interface Event, de qual se deriva.

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

initMessageEvent()
Inicializa um evento de mensagem. N√£o use ‚ÄĒ use antes o construtor 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 SharedWorker usando o construtor SharedWorker(). Ambas scripts contêm isto:

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

Ambas scripts acedem ao worker através dum objeto MessagePort criado usando a propriedade 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 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 connect ‚ÄĒ n√≥s depois usamos o m√©todo start() de 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
HTML Living Standard
The definition of 'MessageEvent' in that specification.
Living Standard

Compatibilidade

BCD tables only load in the browser

Ver também

  • ExtendableMessageEvent ‚ÄĒ parecida a esta interface, mas usada como base de outras interfaces que necessitam dar mais flexibilidade aos seus utilizadores ou autores.