En las aplicaciones web actuales, mantener la información actualizada en varias pestañas o ventanas puede mejorar enormemente la experiencia del usuario. Por ejemplo, si un usuario cierra sesión en una pestaña, desea que esa acción se refleje en todas las demás pestañas. La Broadcast Channel API facilita esto al permitir la comunicación entre diferentes contextos de navegación del mismo origen. Este artículo le guiará sobre cómo utilizar esta API en una aplicación React.

¿Qué es la API del canal de transmisión?

La API del canal de transmisión es un método simple para permitir la comunicación entre diferentes pestañas, ventanas o iframes del mismo sitio web. Le permite transmitir mensajes a todos los demás contextos que escuchan en el mismo canal, lo que lo hace ideal para actualizaciones y sincronización en tiempo real.

¿Por qué usarlo?

• Actualizaciones en tiempo real: sincroniza datos como sesiones de usuario en diferentes pestañas.

• Facilidad de integración: fácil de agregar a su aplicación React existente.

• Sin bibliotecas adicionales: Funciona de forma nativa en navegadores modernos sin dependencias adicionales.

Configurando la API del canal de transmisión en React

Veamos cómo usar la API Broadcast Channel en una aplicación React creando un enlace personalizado para administrar la comunicación.

Crear un gancho personalizado

Primero, cree un enlace personalizado llamado useBroadcastChannel para encapsular la lógica del canal de transmisión.

import { useEffect, useState } from 'react';

const useBroadcastChannel = (channelName) => {
    const [message, setMessage] = useState(null);
    const channel = new BroadcastChannel(channelName);

    useEffect(() => {
        const handleMessage = (event) => {
            setMessage(event.data);
        };

        channel.onmessage = handleMessage;

        // Clean up the channel when the component unmounts
        return () => {
            channel.close();
        };
    }, [channel]);

    const sendMessage = (msg) => {
        channel.postMessage(msg);
    };

    return { message, sendMessage };
};

export default useBroadcastChannel;

Este enlace crea un nuevo BroadcastChannel, escucha los mensajes entrantes y proporciona una función para enviar mensajes.

Utilice el gancho en un componente de React

Usemos nuestro enlace personalizado en un componente de React para administrar las sesiones de inicio de sesión en diferentes pestañas.

import React, { useEffect } from 'react';
import useBroadcastChannel from './useBroadcastChannel';

const AuthManager = () => {
    const { message, sendMessage } = useBroadcastChannel('auth_channel');

    const handleLogin = () => {
        // Notify all tabs that the user has logged in
        sendMessage({ type: 'login', user: 'JohnDoe' });
    };

    const handleLogout = () => {
        // Notify all tabs that the user has logged out
        sendMessage({ type: 'logout' });
    };

    useEffect(() => {
        if (message) {
            if (message.type === 'logout') {
                alert('You have been logged out in another tab!');
            }
        }
    }, [message]);

    return (
        

            
Authentication Manager
            Log In
            Log Out
        
    );
};

export default AuthManager;

Este componente AuthManager utiliza el enlace useBroadcastChannel para manejar el estado de autenticación del usuario en todas las pestañas. Cuando un usuario inicia o cierra sesión, se envía un mensaje a todas las demás pestañas del canal auth_channel. Si se recibe un mensaje de cierre de sesión en cualquier pestaña, se activa una alerta para notificar al usuario.

Conclusión

La API Broadcast Channel proporciona una forma sencilla de sincronizar datos en varias pestañas o ventanas de sus aplicaciones web. Al utilizar un enlace de React personalizado, puede administrar fácilmente la mensajería en tiempo real y mejorar la experiencia del usuario. Ya sea que estés manejando estados de inicio de sesión o sincronizando otros tipos de datos, la API Broadcast Channel simplifica la comunicación cruzada.

Lectura adicional

• MDN Web Docs en la API del canal de transmisión

Conéctate conmigo

• LinkedIn

• Gorjeo

• GitHub