React でブロードキャスト チャネル API を使用する方法

今日の Web アプリケーションでは、複数のタブまたはウィンドウにわたって情報を常に最新の状態に保つことで、ユーザー エクスペリエンスを大幅に向上させることができます。たとえば、ユーザーが 1 つのタブでログアウトした場合、そのアクションを他のすべてのタブに反映したいとします。 ブロードキャスト チャネル API は、同じオリジンの異なる閲覧コンテキスト間の通信を可能にすることでこれを容易にします。この記事では、React アプリケーションでこの API を使用する方法について説明します。

ブロードキャスト チャネル API とは何ですか?

ブロードキャスト チャネル API は、同じ Web サイトの異なるタブ、ウィンドウ、または iframe 間の通信を可能にする簡単な方法です。これにより、同じチャネルでリッスンしている他のすべてのコンテキストにメッセージをブロードキャストできるため、リアルタイムの更新と同期に最適です。

なぜ使用するのですか?

• リアルタイム更新: 異なるタブ間でユーザー セッションなどのデータを同期します。

• 統合の容易さ: 既存の React アプリに簡単に追加できます。

• 追加ライブラリなし: 追加の依存関係がなく、最新のブラウザでネイティブに機能します。

React でのブロードキャスト チャネル API のセットアップ

通信を管理するカスタム フックを作成して、React アプリケーションでブロードキャスト チャネル API を使用する方法を見てみましょう。

カスタムフックを作成する

まず、useBroadcastChannel という名前のカスタム フックを作成して、ブロードキャスト チャネル ロジックをカプセル化します。

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 コンポーネントでフックを使用する

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 (
        <div>
            <h1 id="Authentication-Manager">Authentication Manager</h1>
            <button onclick="{handleLogin}">Log In</button>
            <button onclick="{handleLogout}">Log Out</button>
        </div>
    );
};

export default AuthManager;

この AuthManager コンポーネントは、useBroadcastChannel フックを使用して、複数のタブにわたるユーザー認証状態を処理します。ユーザーがログインまたはログアウトすると、auth_channel チャネル上の他のすべてのタブにメッセージが送信されます。いずれかのタブでログアウト メッセージを受信すると、アラートがトリガーされてユーザーに通知されます。

結論

ブロードキャスト チャネル API は、Web アプリケーションの複数のタブまたはウィンドウ間でデータを同期する簡単な方法を提供します。カスタム React フックを使用すると、リアルタイム メッセージングを簡単に管理し、ユーザー エクスペリエンスを向上させることができます。ログイン状態を処理している場合でも、他のタイプのデータを同期している場合でも、ブロードキャスト チャネル API を使用すると、クロス集計通信が簡素化されます。

続きを読む

• ブロードキャスト チャネル API に関する MDN Web ドキュメント

私とつながりましょう

• LinkedIn

• ツイッター

• GitHub

以上がReact でブロードキャスト チャネル API を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。