6.使用RTCDataChannel交换数据

你会学到什么

  • 建立两个WebRTC对等体之间的连接。

  • 在WebRTC对等体之间交换数据。

此步骤的完整版本在步骤-03文件夹中。

更新您的HTML

对于此步骤，我们将使用WebRTC数据通道在同一页面上的两个textarea元素之间发送文本。这不是很有用，但是它演示了如何使用WebRTC像流媒体视频那样来共享数据。

从index.html中删除视频和按钮元素，并使用以下HTML替换它们：

<textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>

<div id="buttons">
  <button id="startButton">Start</button>
  <button id="sendButton">Send</button>
  <button id="closeButton">Stop</button>
</div>

一个textarea将用于输入文本，另一个textarea将显示在对等体之间流式传输的文本。

index.html现在应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <h1>Realtime communication with WebRTC</h1>

  <textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>
  <div id="buttons">
    <button id="startButton">Start</button>
    <button id="sendButton">Send</button>
    <button id="closeButton">Stop</button>
  </div>

  <script src="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

更新您的JavaScript

将main.js替换为步骤-03/js/main.js的内容。

与上一步一样，在codelab中使用大块代码进行剪切和粘贴并不理想，但是（与RTCPeerConnection一样）没有其他选择。

尝试在对等体之间传输数据：打开index.html，按开始设置对等连接，在左侧的文本区域中输入一些文本，然后单击发送以使用WebRTC数据通道传输文本。

怎么运行的

该代码使用RTCPeerConnection和RTCDataChannel来实现文本消息交换。

本步骤中的大部分代码与RTCPeerConnection示例相同。

sendData()和createConnection()函数有大部分新代码：

function createConnection() {
  dataChannelSend.placeholder = '';
  var servers = null;
  pcConstraint = null;
  dataConstraint = null;
  trace('Using SCTP based data channels');
  // For SCTP, reliable and ordered delivery is true by default.
  // Add localConnection to global scope to make it visible
  // from the browser console.
  window.localConnection = localConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created local peer connection object localConnection');

  sendChannel = localConnection.createDataChannel('sendDataChannel',
      dataConstraint);
  trace('Created send data channel');

  localConnection.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  // Add remoteConnection to global scope to make it visible
  // from the browser console.
  window.remoteConnection = remoteConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = iceCallback2;
  remoteConnection.ondatachannel = receiveChannelCallback;

  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );
  startButton.disabled = true;
  closeButton.disabled = false;
}

function sendData() {
  var data = dataChannelSend.value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}

RTCDataChannel的语法故意类似于WebSocket，使用sen()方法和消息事件。

注意dataConstraint的使用。可以将数据通道配置为启用不同类型的数据共享 - 例如，优先考虑可靠的交付，而不是性能。您可以在Mozilla开发人员网络中找到有关选项的更多信息。

三种约束条件

这很混乱！

不同类型的WebRTC呼叫建立选项通常被称为“约束”。 了解有关约束和选项的更多信息：

加分点

  1. 使用SCTP，默认情况下，WebRTC数据通道使用的协议，可靠和有序的数据传输。什么时候RTCDataChannel可能需要提供可靠的数据传递，什么时候性能更重要 - 即使这意味着丢失一些数据？

  2. 使用CSS来改进页面布局，并将一个占位符属性添加到“dataChannelReceive”textarea。

  3. 测试移动设备上的页面。

了解更多

接下来

您已经学习了如何在同一页面上的对等体之间交换数据，但是如何在不同的机器之间进行交互？首先，您需要设置一个信令通道来交换元数据信息。在下一步了解该怎么做！

Previous5.使用RTCPeerConnection流式传输视频Next7.设置信令服务来交换消息

Last updated