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:
- Eventos enviados por el servidor (ver
EventSource.message_event
). - Web sockets (ver la propiedad
onmessage
de la interfaz WebSocket). - Mensajes entre documentos (ver
Window.postMessage()
yWindow.message_event
). - Canal de mensajería (ver
MessagePort.postMessage()
yMessagePort.message_event
). - Mensajes entre workers y/o documentos (consulte las dos entradas anteriores, pero también
Worker.postMessage()
,Worker.message_event
,ServiceWorkerGlobalScope.message_event
, etcetera). - Canales de difusión (ver
Broadcastchannel.postMessage()
) yBroadcastChannel.message_event
). - Canales de datos WebRTC (consulte
onmessage
).
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.
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
oServiceWorker
) 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 esto — usa 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:
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.
};
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.