你将学到

  • 如何在WebRTC peer之间交换数据

本节的所有内容位于 step-03 文件夹

更新HTML代码

在本节，你将使用WebRTC数据通道(RTCDataChannel)在同一个页面的两个textarea元素之间传输文本。这不是非常实用，但是能演示怎怎样使用WebRTC来共享数据(类似于上节视频流传输)。

移出video和button标签，将 index.html 使用如下HTML代码替换:

1
2
3
4
5
6
7
8
9

<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将用于输入text，另一个如peer之间传输流一样展示text。

index.html 内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

更新JavaScript，使用 step-03/js/main.js 替换 main.js

尝试peer之间传输数据：打开 index.html, 点击 Start 建立peer之间连接，在左边的textarea内输入一些文本，然后点击 Send 使用WebRTC数据通道传输文本。

How it works?

本示例代码使用RTCPeerConnection和RTCDataChannel来完成文本消息的交换。本示例的代码与RTCPeerConnection例子的代码有很大部分相同。

sendData()和createConnection()函数包含了大部分新的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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类似，都是使用send()方法和消息事件。

注意使用的dataConstraint。数据通道可以配置为使用不同类型的数据分享–例如：可靠传输优先于性能。你可以在Mozilla Developer Network查找更多该选项的信息。

三中类型的约束选项

比较容易混淆。 不同类型的WebRTC调用设置选项通常都称为“约束(constraints)”。 发现更多关于约束和选项的内容:

加分项(Bonus points)

  1. WebRTC数据通道使用 SCTP 协议，可靠和有序数据传输默认开启。RTCDataChannel何时需要提供可靠的数据传递，何时性能更重要——即使这意味着丢失一些数据？
  2. 使用CSS来改善页面布局，将占位符属性添加到dataChannelReceive文本区域。
  3. 在移动设备上测试页面。

Find out more

下一步

你已经学习了如何在同一页面的peer之间交换数据，但是怎样在不同的机器上实现这些呢？首先，你需要建立一个信令通道来交换metadata消息。下一节见分晓。