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í.
Comments