MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/es/web/api/html_dom_api/index.md)

La interfaz MessageEvent representa un mensaje recibido por un objeto de destino.

Esto se utiliza para representar mensajes en:

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

Nota: Esta característica está disponible en Web Workers.

Event MessageEvent

Constructor

MessageEvent()

Crea un nuevo MessageEvent.

Propiedades de instancia

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).

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

Ejemplos

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:

js
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():

js
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:

js
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.

js
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

Specification
HTML Standard
# the-messageevent-interface

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

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