La interfazMessageEvent representa un mensaje recibido por un objeto de destino.

Esto se utiliza para representar mensajes en:

• Eventos enviados por el servidor (verEventSource.message_event).
• Web sockets (ver la propiedadonmessage de la interfazWebSocket).
• Mensajes entre documentos (verWindow.postMessage() yWindow.message_event).
• Canal de mensajería (verMessagePort.postMessage() yMessagePort.message_event).
• Mensajes entreworkers y/o documentos (consulte las dos entradas anteriores, pero tambiénWorker.postMessage(),Worker.message_event,ServiceWorkerGlobalScope.message_event, etcetera).
• Canales de difusión (verBroadcastchannel.postMessage()) yBroadcastChannel.message_event).
• Canales de datos WebRTC (consulteonmessage).

La acción desencadenada por este evento se define en un conjunto de funciones como el manejador de eventos para el eventomessage relevante (por ejemplo, usandoonmessage como se indica arriba).

Constructor

MessageEvent()

Crea un nuevoMessageEvent.

Propiedades de instancia

Esta interfaz también hereda propiedades de su padre,Event.

MessageEvent.dataRead only

Los datos enviados por el emisor del mensaje.

MessageEvent.originRead only

Una cadena que representa el origen del emisor del mensaje.

MessageEvent.lastEventIdRead only

Una cadena que representa un ID único para el evento.

MessageEvent.sourceRead only

UnMessageEventSource (que puede ser un objetoWindowProxy,MessagePort oServiceWorker) que representa el emisor del mensaje.

MessageEvent.portsRead only

Un arreglo de objetosMessagePort que representan los puertos asociados con el canal a través del cual se envía el mensaje (cuando corresponda, por ejemplo, en la mensajería del canal o cuando se envía un mensaje a unworker compartido).

Métodos de instancia

Esta interfaz también hereda métodos de su padre,Event.

initMessageEvent()Obsoleto

Inicializa un evento de mensaje.No uses más esto —usa el constructorMessageEvent() en su lugar.

Ejemplos

En nuestroEjemplo de unworker compartido básico (ejecutarworker compartido), tenemos dos páginas HTML, cada una de las cuales usa algo de JavaScript para realizar un cálculo simple. Los diferentesscripts usan el mismo archivo de trabajo para realizar el cálculo; ambos pueden acceder a él, incluso si sus páginas se ejecutan dentro de ventanas diferentes.

El siguiente fragmento de código muestra la creación de un objetoSharedWorker mediante el constructorSharedWorker(). Ambosscripts contienen esto:

const myWorker = new SharedWorker("worker.js");

Ambosscripts luego acceden alworker a través de un objetoMessagePort creado usando la propiedadSharedWorker.port. Si el eventoonmessage se adjunta usandoaddEventListener, el puerto se inicia manualmente usando su métodostart():

myWorker.port.start();

Cuando se inicia el puerto, ambosscripts envían mensajes alworker y manejan los mensajes enviados desde él usandoport.postMessage() yport.onmessage, respectivamente:

first.onchange = () => {  myWorker.port.postMessage([first.value, second.value]);  console.log("Mensaje publicado al worker");};second.onchange = () => {  myWorker.port.postMessage([first.value, second.value]);  console.log("Mensaje publicado al worker");};myWorker.port.onmessage = (e) => {  result1.textContent = e.data;  console.log("Mensaje recibido del worker");};

Dentro delworker usamos el manejadoronconnect para conectarnos al mismo puerto mencionado anteriormente. Se puede acceder a los puertos asociados con eseworker en la propiedadports del eventoconnect — luego usamosMessagePortstart() para iniciar el puerto, y el manejadoronmessage para manejar los mensajes enviados desde los hilos principales.

onconnect = (e) => {  const port = e.ports[0];  port.addEventListener("message", (e) => {    const workerResult = `Resultado: ${e.data[0] * e.data[1]}`;    port.postMessage(workerResult);  });  port.start(); // Requerido cuando se usa addEventListener. De lo contrario, lo llama implícitamente onmessage setter.};

Especificaciones

Compatibilidad con navegadores

Véase también

• ExtendableMessageEvent — similar a esta interfaz pero utilizada en interfaces que necesitan dar más flexibilidad a los autores.