【ブロードキャストチャネルエーピーアイ】
Broadcast Channel API とは？
最終更新:
💡 ブラウザー内の仲間へ、同じチャネル名で知らせる
同じ名前のチャネルを通じ、ブラウザー内のタブやWorkerなどへメッセージを送るAPI。同一オリジンに加えた分離条件、送信元の除外、保存との違いを解説します。
📌 このページのポイント
ひよこ 別のタブへ、お知らせを送れる？
ペンギン先生 BroadcastChannelを使うと、ブラウザー内のタブやWorkerなどへメッセージを送れるよ。同じチャネル名で参加している、条件に合う相手が受信するんだ。
ひよこ 同じサイトなら、必ずつながる？
ペンギン先生 同一オリジンであることに加え、同じストレージ分離区画である必要があるよ。たとえば別サイトに埋め込まれたページは、同じオリジンの通常のタブと通信できない場合があるんだ。
ひよこ 送る側と受け取る側は、何をする？
ペンギン先生 両方で同じ名前のBroadcastChannelを作る。送り手はpostMessageでデータを送り、受け手はmessageイベントで受け取るよ。送信したオブジェクト自身は、受信対象から外されるんだ。
ひよこ あとで開いたタブも、前のお知らせを読める？
もっと詳しく知りたい人へ
文字列しか送れない？
構造化クローンによって、オブジェクトなど対応するデータを送れます。ただし、何でもそのまま共有するわけではありません。受信側が分かるデータ形式を決め、シリアライズできない値や受信時のエラーも考えます。
送信したタブには、絶対に届かない？
除外されるのは、送信したBroadcastChannelオブジェクト自身です。同じタブ内でも別のオブジェクトが同じチャネル名と通信条件を満たしていれば、受信対象になり得ます。
まとめ：ざっくりこれだけ覚えればOK！
「Broadcast Channel API」って出てきたら「ブラウザー内の仲間へ同じチャネル名でメッセージを送る仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「BroadcastChannel」 ＝ メッセージを同報するチャネル
💬 Web APIの名称です。遠くの利用者へ通信するサーバーの仕組みとは、役割が異なります。