BroadcastChannel API 允許相同來源的指令碼將訊息傳送至其他瀏覽環境。這可以視為簡單的訊息匯流排,可在視窗/分頁、iframe、Web 工作人員和服務 Worker 之間進行 Pub/Sub 語意。
API 基本資訊
Broadcast Channel API 是一種簡單的 API,可簡化瀏覽環境之間的通訊。也就是視窗/分頁、iframe、網路工作站和服務工作站之間的通訊。發布至特定頻道的訊息會傳送給該頻道的所有聽眾。
BroadcastChannel
建構函式使用單一參數:管道名稱。
名稱可用來識別頻道和各種瀏覽環境。
// Connect to the channel named "my_bus".
const channel = new BroadcastChannel('my_bus');
// Send a message on "my_bus".
channel.postMessage('This is a test message.');
// Listen for messages on "my_bus".
channel.onmessage = function(e) {
console.log('Received', e.data);
};
// Close the channel when you're done.
channel.close();
傳送訊息
訊息可以是字串,或結構化本機副本演算法支援的任何項目 (String、Objects、Arrays、Blobs、ArrayBuffer、Map)。
範例 - 傳送 Blob 或檔案
channel.postMessage(new Blob(['foo', 'bar'], {type: 'plain/text'}));
頻道不會向自己播送。如果您有 onmessage
事件監聽器
與 postMessage()
在同一頁面上、該 message
事件
都不會觸發
與其他技術的差異
現在您可能想知道,這與其他傳遞訊息的技術相關,例如 WebSocket、SharedWorkers、MessageChannel
API 和 window.postMessage()
。Broadcast Channel API 不會取代這些 API。兩者都有各自的用途Broadcast Channel API 適合用來在「相同來源」上的指令碼之間輕鬆進行一對多通訊。
廣播頻道的幾項用途:
- 偵測其他分頁中的使用者動作
- 得知使用者在其他視窗/分頁中登入帳戶的時間。
- 指示 worker 執行部分背景工作
- 瞭解服務何時執行了某些動作。
- 使用者在一個視窗中上傳相片時,將相片傳遞到其他開啟的頁面。
範例 - 顯示使用者登出的網頁,包括同一個網站上另一個已開啟的分頁:
<button id="logout">Logout</button>
<script>
function doLogout() {
// update the UI login state for this page.
}
const authChannel = new BroadcastChannel('auth');
const button = document.querySelector('#logout');
button.addEventListener('click', e => {
// A channel won't broadcast to itself so we invoke doLogout()
// manually on this page.
doLogout();
authChannel.postMessage({cmd: 'logout', user: 'Eric Bidelman'});
});
authChannel.onmessage = function(e) {
if (e.data.cmd === 'logout') {
doLogout();
}
};
</script>
在另一個範例中,假設您想要指示 Service Worker 移除
使用者變更「離線儲存空間設定」後快取的內容。
您可以使用 window.caches
刪除其快取,但 Service Worker 可能會
已經包含執行此動作的公用程式。我們可以使用 Broadcast Channel API
可重複使用該程式碼!如果沒有 Broadcast Channel API,您就必須循環處理 self.clients.matchAll()
的結果並對每個用戶端呼叫 postMessage()
,才能讓服務工作處理程序與所有用戶端進行通訊 (執行這項作業的實際程式碼)。使用廣播頻道會讓這部O(1)
,而不是 O(N)
。
範例 - 指示 Service Worker 移除快取,重複使用其內部公用程式方法。
在 index.html 中
const channel = new BroadcastChannel('app-channel');
channel.onmessage = function(e) {
if (e.data.action === 'clearcache') {
console.log('Cache removed:', e.data.removed);
}
};
const messageChannel = new MessageChannel();
// Send the service worker a message to clear the cache.
// We can't use a BroadcastChannel for this because the
// service worker may need to be woken up. MessageChannels do that.
navigator.serviceWorker.controller.postMessage({
action: 'clearcache',
cacheName: 'v1-cache'
}, [messageChannel.port2]);
在 sw.js 中
function nukeCache(cacheName) {
return caches.delete(cacheName).then(removed => {
// ...do more stuff (internal) to this service worker...
return removed;
});
}
self.onmessage = function(e) {
const action = e.data.action;
const cacheName = e.data.cacheName;
if (action === 'clearcache') {
nukeCache(cacheName).then(removed => {
// Send the main page a response via the BroadcastChannel API.
// We could also use e.ports[0].postMessage(), but the benefit
// of responding with the BroadcastChannel API is that other
// subscribers may be listening.
const channel = new BroadcastChannel('app-channel');
channel.postMessage({action, removed});
});
}
};
與postMessage()
的差異
與 postMessage()
不同的是,您不再需要保留 iframe 或 worker 的參照,就能與 iframe 或 worker 通訊:
// Don't have to save references to window objects.
const popup = window.open('https://another-origin.com', ...);
popup.postMessage('Sup popup!', 'https://another-origin.com');
window.postMessage()
也可讓您跨來源進行通訊。Broadcast Channel API 與來源相同。由於訊息保證會來自相同來源,因此不必像我們習慣 window.postMessage()
一樣驗證訊息:
// Don't have to validate the origin of a message.
const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
if (e.origin !== 'https://expected-origin.com') {
return;
}
e.source.postMessage('Ack!', e.origin);
};
只需「訂閱」以及安全雙向通訊!
與 SharedWorkers 的差異
如果需要將訊息傳送到多個視窗/分頁或工作站,請使用 BroadcastChannel
在簡單的情況下。
對於更複雜的使用情境,像是管理鎖定、共用狀態、在伺服器和多個用戶端之間同步處理資源,或是與遠端主機共用 WebSocket 連線,共用工作站會是最適當的解決方案。
與 MessageChannel API 的差異
Channel Messaging API 和 BroadcastChannel
的主要差異在於,後者是將訊息分派給多個事件監聽器 (一對多) 的方式。MessageChannel
適用於指令碼之間的一對一通訊,而且也需要設定頻道每一端的通訊埠。
功能偵測和瀏覽器支援
Chrome 54、Firefox 38 和 Opera 41 目前支援 Broadcast Channel API。
if ('BroadcastChannel' in self) {
// BroadcastChannel API supported!
}
至於 polyfill 的例子,這裡分為:
- https://gist.github.com/alexis89x/041a8e20a9193f3c47fb
- https://gist.github.com/inexorabletash/52f437d1451d12145264
我還沒試過這些方法,因此你的里程數可能會有所不同。