RTCDataChannel:message 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

當從遠端對等方接收到訊息時,WebRTC message 事件會發送到 RTCDataChannel 物件上的 onmessage 事件處理程式。

注意: message 事件使用 HTML 規範定義的 MessageEvent 介面作為其事件物件型別。

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("message", (event) => { })

onmessage = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event

Event MessageEvent

事件屬性

還繼承了其父介面 Event 的屬性。

MessageEvent.data 只讀

由訊息傳送者傳送的資料。

MessageEvent.origin 只讀

一個字串,表示訊息傳送者的源。

MessageEvent.lastEventId 只讀

一個字串,表示事件的唯一 ID。

MessageEvent.source 只讀

指向訊息的發射器,它是 WindowProxyMessagePortServiceWorker 之一。

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

瀏覽器相容性

另見