ブロードキャスト チャネル API を使用してブラウザ Windows 間でリアルタイム通信を行う方法

最新の Web アプリケーションでは、特にユーザー セッションの一貫性の維持、更新のブロードキャスト、または有効化のために、異なるブラウザー コンテキスト (タブ、ウィンドウ、フレーム、iframe など) 間の通信が不可欠です。連携機能。ブロードキャスト チャネル API は、開発者が最小限のオーバーヘッドでこれらのコンテキスト間でのリアルタイム通信を実現できる、簡単かつ強力なツールです。

このブログでは、ブロードキャスト チャネル API がどのように機能するかを調査し、実際の使用例を詳しく調べ、その実装を示す実践的な例を提供します。

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

ブロードキャスト チャネル API は、同じオリジン内の異なるブラウジング コンテキスト間の通信を可能にするメッセージング API です。特定のウィンドウやフレームへの参照を維持する必要がある postMessage などの他のメッセージング手法とは異なり、ブロードキャスト チャネル API は、あらゆるコンテキストが自由に参加または離脱できるチャネルを作成することで通信を簡素化します。

この API は、開いている複数のウィンドウまたはタブ間の接続の管理を気にせずに、それらに情報をブロードキャストする必要があるシナリオに特に役立ちます。

仕組みは?

ブロードキャスト チャネル API の使用には、次の 3 つの重要な手順が含まれます:

1.チャンネルの作成: BroadcastChannel コンストラクターを使用して、チャンネル名を渡して新しいブロードキャスト チャンネルを作成します。

2.メッセージのリッスン: チャネル上でブロードキャストされるメッセージをリッスンするイベント リスナーを設定します。

3.メッセージの送信: チャンネルに登録しているすべてのコンテキストにメッセージをブロードキャストします。

これらの手順を説明するための簡単な例を次に示します。

例: タブ間でのテーマ設定の同期

ユーザーが明るいテーマと暗いテーマを切り替えることができる Web アプリケーションがあるとします。ユーザーが 1 つのタブでテーマを変更した場合、その変更は開いている他のすべてのタブに即座に反映されるようにしたいと考えます。

// Step 1: Create a Broadcast Channel
const themeChannel = new BroadcastChannel('theme');

// Step 2: Listen for messages on the channel
themeChannel.onmessage = (event) => {
    document.body.className = event.data; // Apply the received theme
    console.log(`Theme changed to: ${event.data}`);
};

// Function to toggle between themes
function toggleTheme() {
    const currentTheme = document.body.className;
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    document.body.className = newTheme;

    // Step 3: Broadcast the new theme to other tabs
    themeChannel.postMessage(newTheme);
}

// Example of toggling theme
document.getElementById('themeToggle').addEventListener('click', toggleTheme);

制限事項

ブロードキャスト チャネル API は非常に便利ですが、次の点に注意することが重要です。

• 同じオリジン内のコンテキスト間でのみ機能します。
• 大規模で高頻度のデータ転送 (WebSocket や Service Worker の使用を検討することもできます) 向けに設計されていません。

ブロードキャスト チャネル API は、さまざまなブラウザー コンテキスト間でのリアルタイム通信を可能にする強力かつシンプルなツールです。使いやすいため、複雑なメッセージング設定を行うことなく、複数のウィンドウやタブの同期を維持する必要があるシナリオに最適です。

以上がブロードキャスト チャネル API を使用してブラウザ Windows 間でリアルタイム通信を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。