クライアントはBroadcastChannel オブジェクトを作成することで、特定のブロードキャストチャンネルに参加します。コンストラクターは一つだけ引数として、チャンネルの名前を取ります。 ブロードキャストチャンネルに最初に接続した場合は、基になるリソースが作成されます。

// ブロードキャストチャンネルへの接続const bc = new BroadcastChannel("test_channel");

作成したBroadcastChannel オブジェクトのpostMessage() メソッドを呼び出すだけで十分です。 このメソッドは任意のオブジェクトを引数として取ります。文字列のメッセージの例を示します。

// 非常に単純なメッセージの送信例bc.postMessage("This is a test message.");

チャンネルに送信されたデータは、構造化複製アルゴリズムを使用してシリアライズされます。つまり、多種多様なデータオブジェクトを自分でシリアライズすることなく、安全に送信することができるのです。

API はメッセージに意味づけをしないので、どのようなメッセージを期待し、それをどう処理するかはコード次第です。

メッセージが投稿されると、message イベントがこのチャンネルに接続されているそれぞれのBroadcastChannel オブジェクトに送出されます。このイベントに対してonmessage イベントハンドラーを使用して関数を実行することができます。

// イベントをコンソールに出力するだけのハンドラーbc.onmessage = (event) => {  console.log(event);};

チャンネルを去るには、オブジェクトのclose() メソッドを呼び出す必要があります。 これにより、オブジェクトと基になるチャンネル間のリンクを切断し、ガベージコレクションをすることができます。

// チャンネルの切断bc.close();

ブロードキャストチャンネル API は、自己完結型のインターフェイスによってコンテキスト間通信が可能です。ユーザーがログインしたときやログアウトしたときなど、同じオリジン内の他のタブでのユーザーの操作を検出するために使用することができます。

メッセージングプロトコルは定義されておらず、様々な閲覧コンテキストがそれ自体を実装する必要があります。 ネゴシエーションも仕様からの要件もありません。

• BroadcastChannel: これを実装するインターフェイス。