通過WebRTC進行實時通信- 使用RTCDataChannel交換數據

2020 年 4 月 2 日
筆記

更新 HTML

對於這一步，我們將使用WebRTC的 data channel 在同一頁中的兩個 textarea之間發送文本。這個例子本身並沒什麼價值，但它證明了 WebRTC除了傳輸視頻外，還能用於共享數據。

從index.html中移除video和button元素，使用下面的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 輸入文本，另一個顯示對端傳過來的文本。 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="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。

證明前面的步驟，在codelab里的大塊代碼做剪切複製不是一個好的想法，但（證如RTCPeerConnection）別無選擇。

償試在端點之間傳輸數據：打開index.html，按 Start建立一個對等連接，輸入一些文本在左邊的textarea，點擊 Send使用 WebRTC數據channel傳輸文本。

它是如何工作的

這個代碼使用 RTCPeerConnection 和 RTCDataChannel 交換文本消息。在這一步中，大部分代碼與RTCPeerChannection 例子是一樣的。

`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的使用。數據channel能配置成開啟不同類型的數據共享 — 例如，優先考慮可靠的交付而不是性能。在Mozilla Developer Network你能發現更多關於選項的信息

三種類型的約束不同類型的WebRTC呼叫設置選項通常都被稱為「約束」。了解有關約束和選項的更多信息：

點滴

SCTP,它是WebRTC 數據通道使用的協議, 默認是可考和有序的數據投遞。何時RTCDataChannel可能需要提供可靠的數據傳輸，何時性能可能更重要 – 即使這意味着丟失一些數據?
使用CSS改進頁面布局，並將「佔位符」屬性添加到「dataChannelReceive」textarea 。
在移動設備上測試本頁。

我們學到了什麼

在這一步我們學習了如何：

在兩個 WebRTC 端點之間建立連接。
在端點之間交換文本數據。

這一步完整的版本在 step-03目錄下。

查找更多的信息

WebRTC data channels (很多年了，但仍然值得讀)
Why was SCTP Selected for WebRTC's Data Channel?

下一步

您已經學會了如何在同一頁面上的端點之間交換數據，但是如何在不同的機器之間進行此操作？首先，您需要設置信令通道來交換元數據消息。了解下一步的工作方式！