MessageEvent

MessageEvent()

Crea un nuevo MessageEvent.

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

MessageEvent.data Read only

Los datos enviados por el emisor del mensaje.

MessageEvent.origin Read only

Una cadena que representa el origen del emisor del mensaje.

MessageEvent.lastEventId Read only

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

MessageEvent.source Read only

Un MessageEventSource (que puede ser un objeto WindowProxy, MessagePort o ServiceWorker) que representa el emisor del mensaje.

MessageEvent.ports Read only

Un arreglo de objetos MessagePort 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 un worker compartido).

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 constructor MessageEvent() en su lugar.

En nuestro Ejemplo de un worker compartido básico (ejecutar worker compartido), tenemos dos páginas HTML, cada una de las cuales usa algo de JavaScript para realizar un cálculo simple. Los diferentes scripts 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 objeto SharedWorker mediante el constructor SharedWorker(). Ambos scripts contienen esto:

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

Ambos scripts luego acceden al worker a través de un objeto MessagePort creado usando la propiedad SharedWorker.port. Si el evento onmessage se adjunta usando addEventListener, el puerto se inicia manualmente usando su método start():

myWorker.port.start();

Cuando se inicia el puerto, ambos scripts envían mensajes al worker y manejan los mensajes enviados desde él usando port.postMessage() y port.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 del worker usamos el manejador onconnect para conectarnos al mismo puerto mencionado anteriormente. Se puede acceder a los puertos asociados con ese worker en la propiedad ports del evento connect — luego usamos MessagePort start() para iniciar el puerto, y el manejador onmessage 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.
};

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