今日の 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 (
        

            
Authentication Manager
            Log In
            Log Out
        
    );
};

export default AuthManager;

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

結論

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

さらに読む

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

連絡してください

• リンクトイン

• ツイッター

• GitHub