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!
Aprovechando el poder de MessageChannel y BroadcastChannel
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.
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
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
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
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
Comments