| title | slug | l10n | ||
|---|---|---|---|---|
ブロードキャストチャンネル API |
Web/API/Broadcast_Channel_API |
|
{{DefaultAPISidebar("Broadcast Channel API")}}
ブロードキャストチャンネル API (Broadcast Channel API) を使用すると、同じ{{glossary("origin","オリジン")}}の{{glossary("browsing context", "閲覧コンテキスト")}}（つまり、ウィンドウ、タブ、フレーム、iframe）やワーカー間で、基本的な通信を行うことができます。
{{AvailableInWorkers}}
{{domxref("BroadcastChannel")}} オブジェクトを作成することで、投稿されたメッセージを受け取ることができます。通信したいフレームやワーカーへの参照を保持する必要はありません。同じ名前の {{domxref("BroadcastChannel")}} を自分自身で構築することで特定のチャンネルに「加入 (subscribe)」し、それらすべての間で双方向の通信をすることができます。
クライアントは {{domxref("BroadcastChannel")}} オブジェクトを作成することで、特定のブロードキャストチャンネルに参加します。コンストラクターは一つだけ引数として、チャンネルの名前を取ります。 ブロードキャストチャンネルに最初に接続した場合は、基になるリソースが作成されます。
// ブロードキャストチャンネルへの接続
const bc = new BroadcastChannel("test_channel");作成した BroadcastChannel オブジェクトの {{domxref("BroadcastChannel.postMessage", "postMessage()")}} メソッドを呼び出すだけで十分です。 このメソッドは任意のオブジェクトを引数として取ります。文字列のメッセージの例を示します。
// 非常に単純なメッセージの送信例
bc.postMessage("This is a test message.");チャンネルに送信されたデータは、構造化複製アルゴリズムを使用してシリアライズされます。つまり、多種多様なデータオブジェクトを自分でシリアライズすることなく、安全に送信することができるのです。
API はメッセージに意味づけをしないので、どのようなメッセージを期待し、それをどう処理するかはコード次第です。
メッセージが投稿されると、 message イベントがこのチャンネルに接続されているそれぞれの {{domxref("BroadcastChannel")}} オブジェクトに送出されます。このイベントに対して {{domxref("BroadcastChannel/message_event", "onmessage")}} イベントハンドラーを使用して関数を実行することができます。
// イベントをコンソールに出力するだけのハンドラー
bc.onmessage = (event) => {
console.log(event);
};チャンネルを去るには、オブジェクトの {{domxref("BroadcastChannel.close", "close()")}} メソッドを呼び出す必要があります。 これにより、オブジェクトと基になるチャンネル間のリンクを切断し、ガベージコレクションをすることができます。
// チャンネルの切断
bc.close();ブロードキャストチャンネル API は、自己完結型のインターフェイスによってコンテキスト間通信が可能です。ユーザーがログインしたときやログアウトしたときなど、同じオリジン内の他のタブでのユーザーの操作を検出するために使用することができます。
メッセージングプロトコルは定義されておらず、様々な閲覧コンテキストがそれ自体を実装する必要があります。 ネゴシエーションも仕様からの要件もありません。
{{Specifications}}
{{Compat}}
- {{domxref("BroadcastChannel")}}: これを実装するインターフェイス。