Broadcast Channel APIで閲覧コンテキスト間で相互通信を行う

Broadcast Channel APIを使うことで、同一デバイス、同一オリジンにおいて任意のチャンネル名を指定し閲覧コンテキスト間（※）で相互通信ができる。

※閲覧コンテキストとは、ウィンドウ、タブ、フレーム、iframeのこと

たとえば、ユーザーが別タブで別アカウントでログインしたことを検知してメッセージを表示するなどができる。

Broadcast Channel APIの使い方

const bc = new BroadcastChannel('my-channel')

// メッセージ送信
bc.postMessage(...)

// メッセージ受信
bc.onmessage = ev => console.log(ev.data)

// 切断
bc.close()

window.postMessage()との違い

window.postMessage()という、Windowオブジェクト間でやりとりできるメソッドもあるが、Broadcast Channel APIはそれをさらに安全に使いやすくしたAPIと言える。

• Broadcast Channel APIは、同一オリジンの閲覧コンテキスト間でのみ通信に限られる
  • window.postMessage()は、他サイトからもメッセージが受信できてしまう
• Broadcast Channel APIは、任意のチャンネル名を用いて通信できる
  • コンテキストごとにチャンネル名をわけて管理できる