在当今的 Web 应用程序中，跨多个选项卡或窗口保持信息更新可以极大地增强用户体验。例如，如果用户在一个选项卡中注销，您希望该操作反映在所有其他选项卡中。 广播通道 API 通过允许同一来源的不同浏览上下文之间进行通信，使这一过程变得简单。本文将指导您如何在 React 应用程序中使用此 API。

什么是广播频道 API？

广播通道 API 是一种在同一网站的不同选项卡、窗口或 iframe 之间实现通信的简单方法。它允许您向同一频道上侦听的所有其他上下文广播消息，使其成为实时更新和同步的理想选择。

为什么使用它？

• 实时更新：跨不同选项卡同步数据，例如用户会话。

• 易于集成：可以轻松添加到现有的 React 应用程序中。

• 无附加库：在现代浏览器中原生运行，无需额外依赖。

在 React 中设置广播通道 API

让我们通过创建自定义挂钩来管理通信来演练如何在 React 应用程序中使用 Broadcast Channel API。

创建自定义 Hook

首先，创建一个名为useBroadcastChannel的自定义钩子来封装Broadcast Channel逻辑。

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;

这个钩子创建一个新的BroadcastChannel，监听传入的消息，并提供发送消息的功能。

在 React 组件中使用 Hook

让我们在 React 组件中使用自定义挂钩来管理不同选项卡之间的登录会话。

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;

此 AuthManager 组件使用 useBroadcastChannel 挂钩来处理跨选项卡的用户身份验证状态。当用户登录或注销时，一条消息将发送到 auth_channel 通道上的所有其他选项卡。如果在任何选项卡中收到注销消息，则会触发警报以通知用户。

结论

Broadcast Channel API 提供了一种在 Web 应用程序中跨多个选项卡或窗口同步数据的简单方法。通过使用自定义 React hook，您可以轻松管理实时消息传递并改善用户体验。无论您是处理登录状态还是同步其他类型的数据，广播通道 API 都可以简化跨选项卡通信。

延伸阅读

• 广播频道 API 上的 MDN Web 文档

与我联系

• 领英

• 叽叽喳喳

• GitHub