Aprovechando el poder de MessageChannel y BroadcastChannel

Rate this content
Bookmark

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!

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

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

Install Nothing: App UIs With Native Browser APIs
JSNation 2024JSNation 2024
31 min
Install Nothing: App UIs With Native Browser APIs
You might not need as much JS as you think to accomplish common UI patterns with these new native browser APIs. Dive into new and future CSS, HTML and JS APIs that make our code leaner and faster to ship.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
Web Push Notifications Done Right
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.