RTCDataChannel: open 事件

Baseline 已广泛支持

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

当用于发送和接收数据通道消息的底层传输通道打开或重新打开时,WebRTC 的 open 事件会被发送到 RTCDataChannel 对象的 onopen 事件处理程序。

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

语法

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

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

onopen = (event) => { }

事件类型

一个 RTCDataChannelEvent。继承自 Event

Event RTCDataChannelEvent

事件属性

还继承了其父接口 Event 的属性。

channel 只读

返回与该事件关联的 RTCDataChannel

示例

此示例为 RTCDataChannel dc 添加了一个 open 事件的处理程序。该处理程序在连接建立后调整用户界面,以指示聊天窗口已准备就绪可供使用。它启用了消息输入框和发送按钮,同时启用了断开连接按钮并禁用了连接按钮。最后,焦点被设置到消息输入框,以便用户可以立即开始输入。

js
dc.addEventListener("open", (ev) => {
  messageInputBox.disabled = false;
  sendMessageButton.disabled = false;
  disconnectButton.disabled = false;
  connectButton.disabled = true;

  messageInputBox.focus();
});

这也可以通过直接设置通道的 onopen 事件处理程序属性值来完成。

js
dc.onopen = (ev) => {
  messageInputBox.disabled = false;
  sendMessageButton.disabled = false;
  disconnectButton.disabled = false;
  connectButton.disabled = true;

  messageInputBox.focus();
};

规范

规范
WebRTC:浏览器中的实时通信
# event-datachannel-open
WebRTC:浏览器中的实时通信
# dom-rtcdatachannel-onopen

浏览器兼容性

另见