Aprovechando el poder de MessageChannel y BroadcastChannel

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Adéntrate en el mundo de las API's web - MessageChannel y BroadcastChannel. Explora cómo estas poderosas API facilitan la comunicación sin fisuras en web workers, iframes y entre pestañas. Únete a nosotros mientras descubrimos las técnicas para mejorar las interacciones web y desbloquear nuevas posibilidades. ¡Descubre la clave para una colaboración más fluida y una mejor conectividad en tus proyectos web!

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Daniel Jakobsen es un ingeniero de personal de pila completa que trabaja en Vim, una empresa dedicada a la salud. En la charla, él comparte sus experiencias y conocimientos sobre la comunicación entre iframes y web workers utilizando APIs web.

PostMessage es una función que permite la comunicación segura entre iframes y otros componentes web dentro del navegador. Se utiliza para enviar mensajes entre el documento principal y los iframes o web workers, facilitando la interacción entre diferentes partes de una aplicación web.

La API de canal de mensajes es una API de navegador que permite la comunicación segura y directa entre dos puntos a través de dos puertos conectados. Cuando un mensaje se envía a través de un puerto, se recibe en el otro, permitiendo una comunicación bidireccional sin interferencia externa.

La API de canal de mensajes ofrece una línea de comunicación más segura y directa, reduciendo la contaminación del controlador de eventos global y disminuyendo la sobrecarga computacional. Además, simplifica la implementación de comunicaciones complejas como las promesas y la comunicación bidireccional.

Message-channel-shake es una biblioteca en desarrollo que facilita la implementación de la API de canal de mensajes en aplicaciones React. Ofrece plantillas para configurar una comunicación bidireccional y soporte de promesas entre iframes y la página principal, usando un proveedor y hooks específicos para React.

Implementar un sistema de mensajería con soporte de promesas utilizando la API de canal de mensajes involucra crear un canal, enviar mensajes a través de sus puertos y manejar las respuestas de forma asíncrona. Esto permite que las operaciones asíncronas completen y devuelvan datos a la parte solicitante, facilitando la gestión de estados y la ejecución de lógica condicional.

Daniel Jakobsen
Daniel Jakobsen
11 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora las API web ocultas para comunicarse entre iframes y web workers. Discute las desventajas de un enfoque de mensajería ingenuo e introduce la API de canal de mensajes como una solución. El orador también presenta una biblioteca llamada message-channel-shake que simplifica la implementación del canal de mensajes. La charla cubre varias tecnologías como React, canal de transmisión y objetos transferibles.

1. Introducción a la mensajería web

Short description:

Bienvenidos a esta charla sobre mensajería web. Soy Daniel Jakobsen, un ingeniero de personal de pila completa en Vim. Exploraremos las API web ocultas para comunicarnos entre iframes y web workers. Comenzaremos con un ejemplo de mensajería ingenua y luego nos sumergiremos en la mensajería basada en canales de mensajes utilizando la API de canal de mensajes.

Hola a todos. Bienvenidos a esta charla sobre mensajería web. Soy Daniel Jakobsen. Soy un ingeniero de personal de pila completa en Vim. No el editor. Es una empresa diferente. Nos dedicamos a la salud.

Hemos encontrado muchos problemas que necesitábamos comunicar entre iframes y web workers y quería compartir con ustedes algunos de los conocimientos que hemos encontrado y realmente algunas API web ocultas que no son tan conocidas que puedes aprovechar y realmente te pueden ayudar con la comunicación entre estos web components.

¿Entonces, qué vamos a aprender? Vamos a comenzar con un ejemplo de mensajería ingenua con iframes solo para ver cómo podemos comunicarnos entre ellos con los bloques de construcción básicos. Y luego vamos a deep dive un poco en la mensajería basada en canales de mensajes. Vamos a aprovechar algo que se llama API de canal de mensajes. Es una browser API que ha estado aquí durante mucho, mucho tiempo, pero no es tan conocida, al menos no lo era para mí. Y, sí, vamos a ver esta demostración básica.

2. Ejemplo de Comunicación Ingenua

Short description:

Tenemos un ejemplo de comunicación ingenua donde un iframe incrustado envía un mensaje a la página principal. La página HTML principal espera a que se cargue el iframe y luego utiliza postMessage para enviar una carga útil. El iframe incrustado recibe el mensaje y verifica su origen antes de enviar una respuesta a la página principal.

Aquí tenemos un ejemplo de comunicación ingenua. Tenemos el sitio principal y dentro de él, hay un iframe incrustado. Y podemos ver que tenemos el mensaje de vuelta del iframe. Este es el mensaje que el iframe está enviando, y dentro del iframe incrustado hay un hola desde la página principal. Entonces veamos cómo va a funcionar esto.

Entonces, este es el principal HTML. Y dentro de aquí, lo primero que hacemos es esperar a que se cargue el iframe incrustado. Una vez que ocurre eso, usamos postMessage. PostMessage es el bloque de construcción más básico de la comunicación. Nos permite enviar mensajes a iframes, web workers, la mayoría de los web components en el navegador soportan postMessage. Y aquí es exactamente lo que hacemos, tomamos el elemento iframe y usamos postMessage, enviamos una carga útil y vamos a ver en un momento cómo el iframe incrustado recibe este mensaje.

Entonces, esta es la página HTML del iframe incrustado, y dentro de aquí tenemos un adEventListener, es un adEventListener global en la ventana, y estamos escuchando el evento de mensaje, y el postMessage anterior llega directamente, una vez más, llega directamente aquí, y dentro de aquí hay una lógica para verificar que el mensaje proviene de la página principal, porque podría haber múltiples mensajes que llegan aquí. Hacemos alguna lógica, y luego usamos nuevamente el postMessage, pero esta vez el iframe incrustado hace el postMessage en la página principal. Entonces en la window.parent también hay window.top que puedes hacer postMessage y funciona de la misma manera. Ahora en la página principal html tenemos el oyente de eventos global. Podemos manejar el

3. Desventajas del Enfoque Ingenuo

Short description:

El enfoque ingenuo para la mensajería web tiene varias desventajas. Es difícil implementar el soporte de promesas, ya que requiere construir un sistema de mensajería. Además, solo admite la comunicación directa entre el iframe incrustado y la ventana principal o superior, limitando su flexibilidad. El enfoque también contamina el controlador de eventos global, lo que puede causar sobrecarga de cálculo y posibles preocupaciones de privacidad.

lógica y hacer lo que queramos. Entonces, hay algunas desventajas en este enfoque ingenuo. Es realmente difícil implementar el soporte de promesas con esto. Necesitas realmente implementar un sistema de mensajería. Si vas a querer tener, digamos que envías un evento a un web worker, haces algunas cosas asíncronas, y quieres que regrese y quieres que la página principal prometa esperar por eso, va a ser un poco complejo implementar eso. Y también solo admite la comunicación directa, eso significa que el I-frame incrustado solo puede hablar con el padre o la ventana superior, y si el I-frame incrustado y la ventana o la página con la que quiere comunicarse está en algún lugar intermedio, no puede, así que eso es otra desventaja. Y la última es que contamina el controlador de eventos global. Muchas bibliotecas pueden usar el controlador de eventos global y pueden ver nuestros mensajes, a veces podríamos no querer eso. Puede causar una sobrecarga de cálculo significativa, por lo que hay algunas desventajas en esto.

4. API de Message Channel e Implementación

Short description:

Exploramos la API de Message Channel y su implementación en un ejemplo. El canal tiene dos puertos que están profundamente conectados, lo que permite la mensajería bidireccional. Enviamos el segundo puerto en la carga útil de postMessage, permitiendo que el iframe incrustado lo reciba. Sin embargo, el canal de mensajes todavía puede ser complejo y requerir código de plantilla. Para simplificar esto, he creado la biblioteca message-channel-shake, que proporciona un apretón de manos, comunicación bidireccional, soporte de promesas, soporte de iframe y web worker, y soporte de React. Demostramos un ejemplo con React y discutimos otras tecnologías como el canal de transmisión y los objetos transferibles.

Entonces, quiero adentrarme en la API de Message Channel y ver cómo podemos implementar el mismo ejemplo con un Message Channel. Primero vamos a crear un Message Channel, tan simple como eso. Y luego quiero hablar de estas dos cosas. Tenemos el puerto uno y el puerto dos. Estas son propiedades en el canal, y están profundamente conectadas. Cuando hago onMessage en el puerto uno, recibirá mensajes del puerto dos. Entonces, en el puerto dos, puedo hacer postMessages y llegará al onMessage del puerto uno. En el puerto uno, puedo hacer postMessage, y llegará en el onMessage del puerto dos. Entonces, están profundamente conectados y este es como el canal que está entre ellos.

Entonces, esta vez todavía estamos usando postMessage, pero hay algo especial sucediendo aquí. Estamos enviando el segundo puerto en la carga útil de postMessage, específicamente en el argumento que se llama objetos transferibles, un puerto de mensajes es uno de ellos. Y esto nos permite... Esto permite que el iframe incrustado reciba este puerto de mensajes. Entonces, podemos ver aquí el mismo iframe incrustado, pero ahora este evento que puertos cero, es en realidad el puerto dos. Entonces, ahora podemos hacer un postMessage en eso, y va a volver al onMessage en el primer puerto. Entonces, quiero hablar un poco sobre lo que pasó aquí. La línea de comunicación fue segura. Tuvimos esa línea directa del puerto dos al puerto uno. Nadie vio nada en medio. Y abre muchas posibilidades. Entonces, Message Channel es genial, pero todavía puede ser un poco complejo. Hay mucho código de plantilla que generalmente querremos crear, como un apretón de manos entre el mainframe y el iframe incrustado o el mainframe y el webworker. Esto es mucho más fácil de implementar que el enfoque ingenuo, pero aún así, requiere un poco de código de plantilla. Y estamos aquí en la Conferencia Avanzada de React, y si queremos usar refrec, también requiere un poco de envoltura. Entonces, he creado esta biblioteca, se llama message-channel-shake. Realmente está en un estado alfa, pero les insto a que miren el código fuente para ver un poco cómo se implementa la plantilla allí. Tal vez sea aún mejor y puedas usarlo tal cual, pero tiene todas esas cosas que queremos, todas las plantillas, listas para usar.

Entonces, es un apretón de manos, comunicación bidireccional, soporte de promesas, soporte de iframe y web worker, y soporte de React. Veamos un ejemplo con React, y por eso estamos aquí, y veamos cómo podemos implementar lo mismo que vimos antes, pero con message-channel-shake. Entonces, el iniciador es la página principal, y primero envolvemos nuestra aplicación con el proveedor de message-channel-shake, un proveedor de React, y luego en algún lugar dentro del árbol de componentes, vamos a usar el iframe-channel-wrapper, y las primeras propiedades son las mismas propiedades que podrías pasar a un iframe regular, y luego estas son algunas propiedades especiales que necesitas pasar a tu implementación de message-channel-shake. Entonces, primero está el ID del canal, tanto la página principal como el iframe incrustado necesitan hablar en el mismo canal, por lo que será seguro, y luego tenemos callbacks de mensajes, por lo que la página principal, el iniciador, puede manejar eventos desde el iframe incrustado o WebWalker. Quiero que noten que el callback es asíncrono, por lo que en realidad puedes hacer lógica asíncrona y devolver una respuesta, y volverá al iframe incrustado. Veamos cómo se ve en el iframe incrustado, entonces, en el iframe incrustado, tenemos un proveedor receptor, que tiene el mismo conjunto de propiedades que se necesitaban como antes, y en algún lugar dentro del componente para el receptor, puedes usar un hook que se llama useportmessenger, y en el portmessenger, podemos simplemente enviar mensajes, y eso es en realidad una promesa. En la respuesta, podemos obtener una carga útil de vuelta del manejador de mensajes de la página principal, y podemos hacer lo que queramos, así que un poco de resumen, fue rápido. ¿Qué vimos? Hemos visto cómo comunicarse de manera ingenua entre iframes, hemos visto cómo usar Message Channel, hemos visto cómo message-channel-shake puede ayudar a aprovechar Message Channel y reducir un poco la plantilla. Si quieres mejorar aún más algunos conocimientos de comunicación entre iframes, web workers, pestañas, te insto a que leas sobre estas tecnologías. Hay un canal de transmisión, también es una API web, hay un sistema, es una biblioteca que permite la comunicación entre regiones en el canal de transmisión, y hay objetos transferibles que son más que el otro puerto de mensajes. Muchas gracias, esta fue una charla relámpago sobre comunicación web, espero que te ayude como me ayudó a mí.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
Top Content
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
JSNation 2024JSNation 2024
20 min
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
Visualización de Cuellos de Botella de Rendimiento Front-End
React Summit 2020React Summit 2020
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Workshops on related topic

Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.