Dans les applications Web d'aujourd'hui, la mise à jour des informations sur plusieurs onglets ou fenêtres peut considérablement améliorer l'expérience utilisateur. Par exemple, si un utilisateur se déconnecte dans un onglet, vous souhaitez que cette action soit reflétée dans tous les autres onglets. L'API Broadcast Channel facilite cela en permettant la communication entre différents contextes de navigation de même origine. Cet article vous expliquera comment utiliser cette API dans une application React.

Qu'est-ce que l'API du canal de diffusion ?

L'API Broadcast Channel est une méthode simple permettant de permettre la communication entre différents onglets, fenêtres ou iframes d'un même site Web. Il vous permet de diffuser des messages vers tous les autres contextes écoutant sur le même canal, ce qui le rend idéal pour les mises à jour et la synchronisation en temps réel.

Pourquoi l'utiliser ?

• Mises à jour en temps réel : synchronisez les données telles que les sessions utilisateur sur différents onglets.

• Facilité d'intégration : simple à ajouter à votre application React existante.

• Aucune bibliothèque supplémentaire : fonctionne nativement dans les navigateurs modernes sans dépendances supplémentaires.

Configuration de l'API du canal de diffusion dans React

Voyons comment utiliser l'API Broadcast Channel dans une application React en créant un hook personnalisé pour gérer la communication.

Créer un crochet personnalisé

Tout d'abord, créez un hook personnalisé nommé useBroadcastChannel pour encapsuler la logique du canal de diffusion.

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;

Ce hook crée un nouveau BroadcastChannel, écoute les messages entrants et fournit une fonction pour envoyer des messages.

Utiliser le Hook dans un composant React

Utilisons notre hook personnalisé dans un composant React pour gérer les sessions de connexion sur différents onglets.

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;

Ce composant AuthManager utilise le hook useBroadcastChannel pour gérer l'état d'authentification des utilisateurs dans les onglets. Lorsqu'un utilisateur se connecte ou se déconnecte, un message est envoyé à tous les autres onglets du canal auth_channel. Si un message de déconnexion est reçu dans un onglet, il déclenche une alerte pour avertir l'utilisateur.

Conclusion

L'API Broadcast Channel offre un moyen simple de synchroniser les données sur plusieurs onglets ou fenêtres de vos applications Web. En utilisant un hook React personnalisé, vous pouvez facilement gérer la messagerie en temps réel et améliorer l'expérience utilisateur. Que vous gériez les états de connexion ou que vous synchronisiez d'autres types de données, l'API Broadcast Channel simplifie la communication entre les tableaux.

Lectures complémentaires

• Documents Web MDN sur l'API Broadcast Channel

Connectez-vous avec moi

• LinkedIn

• Gazouillement

• GitHub