RTCDataChannel 简单示例

RTCDataChannel 接口是 WebRTC API 的一个功能，可以让你在两个对等点之间打开一个通道，你可以通过该通道发送和接收任意数据。API 有意地类似于 WebSocket API，因此可以为每个 API 使用相同的编程模型。

在本示例中，我们会在一个页面内建立一条 RTCDataChannel 连接。这个场景是为了演示如何连接两个 Peer，实际场景并不常见。在本示例中解释了协商和建立连接的过程，定位和连接另外一台主机的场景在另外的一个示例中。

HTML

首先让我们看看我们需要的 HTML 代码。其实很简单，我们先有两个按钮用来链接和断开连接。

html

<button id="connectButton" name="connectButton" class="buttonleft">
  Connect
</button>
<button
  id="disconnectButton"
  name="disconnectButton"
  class="buttonright"
  disabled>
  Disconnect
</button>

然后我们还有一个输入框，用来输入消息。一个按钮，来触发发送事件。这个 <div> 是给 channel 中第一个节点使用的。

html

<div class="messagebox">
  <label for="message"
    >Enter a message:
    <input
      type="text"
      name="message"
      id="message"
      placeholder="Message text"
      inputmode="latin"
      size="60"
      maxlength="120"
      disabled />
  </label>
  <button id="sendButton" name="sendButton" class="buttonright" disabled>
    Send
  </button>
</div>

最后，还有一个小 DIV 用来显示收到的内容。这个 <div> 是给 channel 中第二个 peer 使用的。

html

<div class="messagebox" id="receivebox">
  <p>Messages received:</p>
</div>

JavaScript 代码

你可以