Channel Messaging API

Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 SharedWorker、或兩個 worker),也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。

註: This feature is available in Web Workers.

Channel 訊息概念與使用情境

MessageChannel() 建構子產生 channel, 一但生成了,便可以存取 channel 兩端的 port: MessageChannel.port1MessageChannel.port2,這兩個屬性會回傳 domxref("MessagePort")}} objects.)。建立 channel 的 app 使用 port1,另一端用 port2,利用 window.postMessage 方法帶入參數,向 port2 傳送訊息以及移轉物件 (這裡也就是只 port)。

一但可移轉物件被移轉後,前任擁有者便失去所有權,例如當 port 移轉出去後,原本持有該 port 的環境便不能再使用之。目前可移轉物件只有 ArrayBuffer 以及 MessagePort

另一端的瀏覽環境則藉由 MessagePort.onmessage 監聽訊息、從訊息事件物件的 data 屬性擷取訊息資料,然後再呼叫 MessagePort.postMessage 回傳訊息。

如果想關閉訊息 channel,則呼叫 MessagePort.close

更多 API 使用細節請見 Using channel messaging

Channel 訊息介面

MessageChannel
生成一個新的 message channel。
MessagePort
控制 port,用來傳送和監聽訊息。
PortCollection
MessagePorts 陣列,實驗性質方案;用來同時廣播到多個訊息 port。

範例

標準規範

Specification Status Comment
WHATWG HTML Living Standard Living Standard Channel messaging defined in section 9.5. No difference to the the HTML5 Web Messaging spec.
HTML5 Web Messaging Recommendation W3C version of the spec.

瀏覽器相容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 41 (41) 10.0 10.6 5
PortCollection Not supported Not supported Not supported Not supported Not supported
Available in workers (Yes) 41 (41) (Yes) (Yes) (Yes)
Feature Android Chrome Mobile Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 4 41.0 (41) Not supported 10.0 11.5 5.1
PortCollection Not supported Not supported Not supported Not supported Not supported Not supported Not supported
Available in workers (Yes) (Yes) 41.0 (41) (Yes) (Yes) (Yes) (Yes)

延伸閱讀

文件標籤與貢獻者

 此頁面的貢獻者: foxbrush
 最近更新: foxbrush,