RTCPeerConnection:datachannel 事件

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

当一个 RTCDataChannel 被添加到 RTCPeerConnection 实例中时,会向该实例发送一个 datachannel 事件。这通常发生在远程对等方调用 RTCPeerConnection.createDataChannel() 时。

注意: 当连接的本地端创建通道时,不会 触发此事件。

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

语法

在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。

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

ondatachannel = (event) => { }

事件类型

一个 RTCDataChannelEvent。继承自 Event

Event RTCDataChannelEvent

事件属性

也继承自 Event 的属性。

channel 只读

返回与该事件关联的 RTCDataChannel

示例

此示例设置了一个函数来处理 datachannel 事件,该函数通过收集与新添加的 RTCDataChannel 通信所需的信息,并为该通道上发生的事件添加事件处理程序。

js
pc.addEventListener("datachannel", (ev) => {
  receiveChannel = ev.channel;
  receiveChannel.onmessage = myHandleMessage;
  receiveChannel.onopen = myHandleOpen;
  receiveChannel.onclose = myHandleClose;
});

receiveChannel 被设置为事件的 channel 属性的值,该属性指定了代表连接远程对等方和本地对等方的数据通道的 RTCDataChannel 对象。

这段相同的代码也可以使用 RTCPeerConnection 接口的 ondatachannel 事件处理程序属性来实现,如下所示:

js
pc.ondatachannel = (ev) => {
  receiveChannel = ev.channel;
  receiveChannel.onmessage = myHandleMessage;
  receiveChannel.onopen = myHandleOpen;
  receiveChannel.onclose = myHandleClose;
};

规范

规范
WebRTC:浏览器中的实时通信
# dom-rtcpeerconnection-ondatachannel

浏览器兼容性

另见