RTCDataChannel交换数据（四）

你将会学到什么

如何在WebRTC端点（对等体）之间交换数据。

此步骤的完整版本位于step-03文件夹中。

更新HTML代码

对于这一步，您将使用WebRTC data channels 在同一页面上的两个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>

一个文本区域将用于输入文本，另一个文本区域将在对等点之间显示文本。

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替换为step-03/js/main.js文件中的内容。

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

尝试对等体之间传输数据流：打开index.html，按start启动对等连接，在左边的textarea中输入一些文本，然后点击发送，使用WebRTC data channels 传输文本。

工作原理

此代码使用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 类似，具有send() 方法和 message 事件。

注意使用dataConstraint。数据通道可以配置为启用不同类型的数据共享 - 例如: 优先考虑可靠传输的性能。您可以在Mozilla Developer Network上找到更多关于选项的信息。

三种constraints

这很混乱！

不同类型的WebRTC呼叫建立选项通常被称为“constraints”。

了解有关constraints的更多信息和选项：
RTCPeerConnection RTCDataChannel MediaDevices.getUserMedia()

知识扩展

WebRTC data channels 所使用的协议是SCTP，在默认情况下数据的可靠和有序性处于打开状态。什么时候RTCDataChannel需要提供可靠的数据交换，什么时候性能会更重要 —— 哪怕意味着丢失一些数据？
使用CSS来改善页面布局，并添加一个占位符属性到 “dataChannelReceive” textarea。
在移动设备上测试页面。

学到了什么

在这一步你学会了如何：

建立两个WebRTC对等体之间的连接。
交换对等体之间的文本数据。

此步骤的完整版本位于step-03文件夹中。

了解更多

WebRTC data channels (很旧，但是仍然值得一读)
Why was SCTP Selected for WebRTC's Data Channel?

下一步

你已经学会了如何在同一页面上的对等体之间交换数据，但是如何在不同的机器之间做这件事？首先，你需要建立一个信令通道来交换元数据消息。了解如何在下一步！