RTCDataChannel：消息事件

当从远程对等体接收到消息时，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 只读

对消息发射器的引用，可以是WindowProxy、MessagePort或ServiceWorker。

MessageEvent.ports 只读

一个MessagePort对象的数组，表示与消息正在通过的通道关联的端口（在适当的情况下，例如在通道消息传递中或向共享工作线程发送消息时）。

示例

对于给定的RTCDataChannel（dc），它是使用其createDataChannel()方法为对等连接创建的，此代码设置了传入消息的处理程序，并通过将消息中包含的数据作为新的<p>（段落）元素添加到当前文档中来对其进行处理。

js
dc.addEventListener(
  "message",
  (event) => {
    let newParagraph = document.createElement("p");
    let textNode = document.createTextNode(event.data);
    newParagraph.appendChild(textNode);

    document.body.appendChild(newParagraph);
  },
  false,
);

我们首先创建新的段落元素，并将消息数据作为新的文本节点添加到其中。然后，我们将新段落附加到文档主体末尾。

您还可以使用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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅