如何在 React 中使用廣播通道 API

發佈於2024-11-08

在當今的 Web 應用程式中，跨多個選項卡或視窗保持資訊更新可以大大增強使用者體驗。例如，如果使用者在一個選項卡中登出，您希望該操作反映在所有其他選項卡中。 廣播通道 API 透過允許同一來源的不同瀏覽上下文之間進行通信，使這一過程變得簡單。本文將指導您如何在 React 應用程式中使用此 API。

什麼是廣播頻道 API？

廣播頻道 API 是一種在同一網站的不同標籤、視窗或 iframe 之間實現通訊的簡單方法。它允許您向同一頻道上偵聽的所有其他上下文廣播訊息，使其成為即時更新和同步的理想選擇。

How to Use Broadcast Channel API in React

為什麼要用它？

• 即時更新：跨不同選項卡同步數據，例如使用者會話。

• 易於整合：可以輕鬆添加到現有的 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
            
            
        
    );
};

export default AuthManager;

此 AuthManager 元件使用 useBroadcastChannel 掛鉤來處理跨選項卡的使用者驗證狀態。當使用者登入或登出時，一則訊息將會傳送到 auth_channel 通道上的所有其他標籤。如果在任何標籤中收到註銷訊息，則會觸發警報以通知使用者。