BroadcastChannel API

En algunas situaciones, nos puede interesar enviar información a otros contextos del navegador. Aunque se considera contexto a diferentes ventanas, pestañas, iframes o incluso workers del mismo origen (de la misma página), en este artículo vamos a centrarnos en el caso de pestañas o ventanas de navegador diferentes.

¿Qué es BroadcastChannel API?

La API BroadcastChannel permite crear un canal maestro de mensajes donde pueden enviar y recibir datos todos los mencionados contextos del navegador. De esta forma, podríamos realizar tareas en una pestaña o ventana del navegador, y enviar datos a otra pestaña o ventana diferente.

Utilizar esta API es muy sencillo. Sólo tenemos que crear un canal de broadcast y darle un nombre:

const broadcast = new BroadcastChannel("test");

En este caso lo he llamado test, pero se le puede llamar de cualquier otra forma. De este modo, identificamos de forma única a ese canal maestro.

Propiedades y métodos

En esta instanacia broadcast, podemos acceder a la propiedad name para consultar su nombre, pero también podemos utilizar los métodos close() para cerrar la conexión con el canal y el método postMessage() para enviar información:

El parámetro data del método postMessage() puede ser tanto un , como un de datos, por lo que no hace falta hacer un JSON.stringify() para convertirlo a texto, como suele ser habitual.

const broadcast = new BroadcastChannel("test");
broadcast.postMessage("Hello world!!");
broadcast.close();

En este sencillo ejemplo, simplemente hemos abierto una conexión de broadcast al canal test, enviamos un mensaje de texto y cerramos la conexión.

Escucha de eventos

Sin embargo, lo interesante de Broadcast Channel es cuando lo combinamos con la escucha de eventos. Tenemos tanto messageerror para escuchar errores de procesamiento de mensajes o message, para recibir los mensajes enviados al canal de Broadcast:

Para ver un ejemplo concreto en acción, prueba a abrir esta página en otra pestaña y pulsar en ambas en la pestaña Demo del siguiente ejemplo. Al pulsar sobre el botón Send de una, verás como se comunica con la otra y se ilumina el cuadrado gris:

<div class="box"></div>
<button class="send">Send</button>

<script>
const box = document.querySelector(".box");
const sendButton = document.querySelector("button.send");
const broadcast = new BroadcastChannel("test");

broadcast.addEventListener("message", ({ data }) => {
  box.classList.add("danger");
  setTimeout(() => box.classList.remove("danger"), 250);
});

sendButton.addEventListener("click", () => {
  broadcast.postMessage("Esto es una prueba");
});
</script>

.box {
  width: 100px;
  height: 100px;
  background: grey;
}

.danger {
  background: red;
  box-shadow: 0 0 10px red;
}

Recuerda que Broadcast Channel API no sólo se comunica entre ventanas o pestañas, también puede hacerlo en iframes o workers, siempre y cuando se encuentren el mismo navegador que estás utilizando y estén en el mismo origen (sitio web, dominio, protocolo...).