RTCDataChannel:message 事件
當從遠端對等方接收到訊息時,WebRTC message 事件會發送到 RTCDataChannel 物件上的 onmessage 事件處理程式。
注意: message 事件使用 HTML 規範定義的 MessageEvent 介面作為其事件物件型別。
此事件不可取消,也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件型別
一個 MessageEvent。繼承自 Event。
事件屬性
還繼承了其父介面 Event 的屬性。
MessageEvent.data只讀-
由訊息傳送者傳送的資料。
MessageEvent.origin只讀-
一個字串,表示訊息傳送者的源。
MessageEvent.lastEventId只讀-
一個字串,表示事件的唯一 ID。
MessageEvent.source只讀-
指向訊息的發射器,它是 WindowProxy、
MessagePort或ServiceWorker之一。 MessageEvent.ports只讀-
一個
MessagePort物件陣列,表示訊息傳送通道(如果適用,例如在通道訊息傳遞或向共享工作者傳送訊息時)關聯的埠。
示例
對於使用其 createDataChannel() 方法建立的對等連線,給定的 RTCDataChannel dc,此程式碼設定了傳入訊息的處理程式,並透過將訊息中包含的資料新增為新的 <p>(段落)元素來處理它們。
js
dc.addEventListener("message", (event) => {
let newParagraph = document.createElement("p");
let textNode = document.createTextNode(event.data);
newParagraph.appendChild(textNode);
document.body.appendChild(newParagraph);
});
我們首先建立新的段落元素,並將訊息資料新增為新的文字節點。然後,我們將新的段落追加到文件正文的末尾。
您也可以使用 RTCDataChannel 物件的 onmessage 事件處理程式屬性來設定事件處理程式。
js
dc.onmessage = (event) => {
let newParagraph = document.createElement("p");
let textNode = document.createTextNode(event.data);
newParagraph.appendChild(textNode);
document.body.appendChild(newParagraph);
};
規範
| 規範 |
|---|
| WebRTC:瀏覽器中的即時通訊 # event-datachannel-message |
| WebRTC:瀏覽器中的即時通訊 # dom-rtcdatachannel-onmessage |
瀏覽器相容性
載入中…