In heutigen Webanwendungen kann die Aktualisierung der Informationen über mehrere Registerkarten oder Fenster hinweg das Benutzererlebnis erheblich verbessern. Wenn sich beispielsweise ein Benutzer auf einer Registerkarte abmeldet, soll diese Aktion auf allen anderen Registerkarten widergespiegelt werden. Die Broadcast Channel API macht dies einfach, indem sie die Kommunikation zwischen verschiedenen Browsing-Kontexten desselben Ursprungs ermöglicht. In diesem Artikel erfahren Sie, wie Sie diese API in einer React-Anwendung verwenden.

Was ist die Broadcast Channel API?

Die Broadcast Channel API ist eine einfache Methode, um die Kommunikation zwischen verschiedenen Registerkarten, Fenstern oder Iframes derselben Website zu ermöglichen. Es ermöglicht Ihnen, Nachrichten an alle anderen Kontexte zu senden, die denselben Kanal hören, was es ideal für Aktualisierungen und Synchronisierung in Echtzeit macht.

Warum es verwenden?

• Echtzeitaktualisierungen: Synchronisieren Sie Daten wie Benutzersitzungen über verschiedene Registerkarten hinweg.

• Einfache Integration: Einfaches Hinzufügen zu Ihrer vorhandenen React-App.

• Keine zusätzlichen Bibliotheken: Funktioniert nativ in modernen Browsern ohne zusätzliche Abhängigkeiten.

Einrichten der Broadcast Channel API in React

Sehen wir uns an, wie Sie die Broadcast Channel API in einer React-Anwendung verwenden, indem Sie einen benutzerdefinierten Hook zum Verwalten der Kommunikation erstellen.

Benutzerdefinierten Hook erstellen

Erstellen Sie zunächst einen benutzerdefinierten Hook mit dem Namen useBroadcastChannel, um die Broadcast-Channel-Logik zu kapseln.

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;

Dieser Hook erstellt einen neuen BroadcastChannel, lauscht auf eingehende Nachrichten und stellt eine Funktion zum Senden von Nachrichten bereit.

Verwenden Sie den Hook in einer React-Komponente

Lassen Sie uns unseren benutzerdefinierten Hook in einer React-Komponente verwenden, um Anmeldesitzungen über verschiedene Registerkarten hinweg zu verwalten.

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;

Diese AuthManager-Komponente verwendet den useBroadcastChannel-Hook, um den Benutzerauthentifizierungsstatus über mehrere Registerkarten hinweg zu verwalten. Wenn sich ein Benutzer an- oder abmeldet, wird eine Nachricht an alle anderen Registerkarten im Kanal auth_channel gesendet. Wenn in einer Registerkarte eine Abmeldenachricht empfangen wird, wird eine Warnung ausgelöst, um den Benutzer zu benachrichtigen.

Abschluss

Die Broadcast Channel API bietet eine einfache Möglichkeit, Daten über mehrere Registerkarten oder Fenster in Ihren Webanwendungen hinweg zu synchronisieren. Durch die Verwendung eines benutzerdefinierten React-Hooks können Sie Echtzeitnachrichten einfach verwalten und die Benutzererfahrung verbessern. Unabhängig davon, ob Sie Anmeldestatus verwalten oder andere Datentypen synchronisieren, vereinfacht die Broadcast Channel API die tabübergreifende Kommunikation.

Weiterführende Literatur

• MDN-Webdokumente zur Broadcast Channel API

Verbinden Sie sich mit mir

• LinkedIn

• Twitter

• GitHub