MessageEvent
============

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` (en-US)).
* Web sockets (ver la propiedad `onmessage` de la interfaz WebSocket).
* Mensajes entre documentos (ver `Window.postMessage()` (en-US) y `Window.message_event` (en-US)).
* Canal de mensajería (en-US) (ver `MessagePort.postMessage()` (en-US) y `MessagePort.message_event` (en-US)).
* Mensajes entre *workers* y/o documentos (consulte las dos entradas anteriores, pero también `Worker.postMessage()` (en-US), `Worker.message_event` (en-US), `ServiceWorkerGlobalScope.message_event` (en-US), etcetera).
* Canales de difusión (en-US) (ver `Broadcastchannel.postMessage()` (en-US)) y `BroadcastChannel.message_event` (en-US)).
* Canales de datos WebRTC (consulte `onmessage` (en-US)).

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

MessageEventConstructor
-----------

`MessageEvent()` (en-US)

Crea un nuevo `MessageEvent`.

Propiedades de instancia
------------------------

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

`MessageEvent.data` (en-US) Read only 

Los datos enviados por el emisor del mensaje.

`MessageEvent.origin` (en-US) Read only 

Una cadena que representa el origen del emisor del mensaje.

`MessageEvent.lastEventId` (en-US) Read only 

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

`MessageEvent.source` (en-US) Read only 

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

`MessageEvent.ports` (en-US) Read only 

Un arreglo de objetos `MessagePort` (en-US) 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-US) 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` (en-US) mediante el constructor `SharedWorker()` (en-US). Ambos *scripts* contienen esto:


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


Ambos *scripts* luego acceden al *worker* a través de un objeto `MessagePort` (en-US) creado usando la propiedad `SharedWorker.port` (en-US). 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` (en-US) para conectarnos al mismo puerto mencionado anteriormente. Se puede acceder a los puertos asociados con ese *worker* en la propiedad `ports` del evento `connect` (en-US) — luego usamos `MessagePort` (en-US) `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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `ExtendableMessageEvent` (en-US) — similar a esta interfaz pero utilizada en interfaces que necesitan dar más flexibilidad a los autores.