Para enviar mensajes entre exploración de contextos como el de windows, fichas, frame o iframe dentro de un mismo origen, se puede utilizar el API de Canal de Difusión.

En este artículo, veremos cómo utilizarlo para enviar y recibir mensajes.

Para usar la API, tenemos que crear un objeto BroadcastChannel que escucha el canal subyacente.

Entonces podemos recibir cualquier mensaje que se haya publicado en él. No tenemos que mantener una referencia a iframes o trabajadores con los que queremos comunicarnos.

Cualquier cosa dentro del mismo origen puede suscribirse a un canal en particular creando un BroadcasChannel y luego tendrán comunicación dúplex completo entre todos ellos.

podemos utilizar de la siguiente manera:

const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();

En el código anterior, hemos creado un BroadcastChannel instancia y luego llamamos postMessage y establecer el onmessage propiedad para escuchar los mensajes que fueron enviados.

Se accede a los datos mediante la propiedad data.

Luego podemos llamar a close para cerrar el canal cuando hayamos terminado.

Podemos enviar cualquier tipo de objeto y no solo una cadena.

Evento de Mensaje

El ev parámetro en el onmessage controlador es el MessageEvent objeto.

Tiene algunas propiedades de solo lectura a las que podemos acceder:

• data — los datos enviados por el emisor de mensajes. Este será el contenido que hemos pasado en el postMessage
• origin — una cadena que representa el origen del mensaje emitido
• lastEventId — una cadena que representa un IDENTIFICADOR único para el evento
• sourceMessageEventSource objeto (que puede ser un WindowProxyMessagePort o ServiceWorker objeto), representan el mensaje del emisor
• ports — un array de MessagePort objeto que representa la puertos asociados con el canal por el que se envía el mensaje.

Manejo de errores

Para manejar errores con el envío de mensajes, podemos establecer un controlador de eventos en la propiedad onmessageerror del objeto Canal de difusión.

Por ejemplo, podemos escribir:

bc.onmessageerror = e => console.log(e);

Luego podemos registrar cualquier error que aparezca.

Nombre

se puede obtener el nombre de la canal con el name propiedad.

Para ello, podemos escribir:

const bc = new BroadcastChannel("test_channel");
console.log(bc.name);

a Continuación, podemos ver que nuestro Canal de Emisión del nombre test_channel desde el console.log .

Conclusión

La API de canal de difusión es una API muy simple que nos permite hacer comunicación entre contextos.

Se puede usar para detectar acciones de usuario en otras pestañas dentro del entorno de origen del mismo sitio, como cuando un usuario inicia sesión en una cuenta.

No hay protocolo de mensajería y los diferentes documentos en diferentes contextos necesitan implementarlo ellos mismos.

Además, tampoco hay negociación y no es requerido por la especificación.