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 useuse 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessageEventChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.6Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 3Samsung Internet Android Full support 1.0
MessageEvent() constructorChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera ? Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android ? Opera Android ? Safari iOS Full support 3Samsung Internet Android Full support 1.0
dataChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
initMessageEvent
Deprecated
Chrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
lastEventIdChrome Full support 1Edge Full support 17Firefox Full support 4IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
originChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
portsChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
sourceChrome Full support YesEdge Full support 12Firefox Full support 55IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 55Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

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.