目錄
我們將學習
- 如何在 WebRTC端點之間進行數據交換。
這步的完整版本在 step-03 目錄下。
更新 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目錄下。
查找更多的信息
下一步
您已經學會了如何在同一頁面上的端點之間交換數據，但是如何在不同的機器之間進行此操作？
首先，您需要設置信令通道來交換元數據消息。瞭解下一步的工作方式！