webrtc使用RTCDataChannel交换数据

demo内容

<!DOCTYPE html>
<html>
<head>
    <title>demo2</title>
</head>
<style>
</style>
<body>
<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>
</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript">
    'use strict';
    
    let localConnection;
    let remoteConnection;
    let sendChannel;
    let receiveChannel;
    const dataChannelSend = document.querySelector('textarea#dataChannelSend');
    const dataChannelReceive = document.querySelector('textarea#dataChannelReceive');
    const startButton = document.querySelector('button#startButton');
    const sendButton = document.querySelector('button#sendButton');
    const closeButton = document.querySelector('button#closeButton');

    startButton.onclick = createConnection;
    sendButton.onclick = sendData;
    closeButton.onclick = closeDataChannels;

    function enableStartButton() {
      startButton.disabled = false;
    }

    function disableSendButton() {
      sendButton.disabled = true;
    }

    function createConnection() {
      dataChannelSend.placeholder = '';
      const servers = null;
      window.localConnection = localConnection = new RTCPeerConnection(servers);
      console.log('Created local peer connection object localConnection');

      sendChannel = localConnection.createDataChannel('sendDataChannel');
      console.log('Created send data channel');

      localConnection.onicecandidate = e => {
        onIceCandidate(localConnection, e);
      };
      sendChannel.onopen = onSendChannelStateChange;
      sendChannel.onclose = onSendChannelStateChange;

      window.remoteConnection = remoteConnection = new RTCPeerConnection(servers);
      console.log('Created remote peer connection object remoteConnection');

      remoteConnection.onicecandidate = e => {
        onIceCandidate(remoteConnection, e);
      };
      remoteConnection.ondatachannel = receiveChannelCallback;

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

    function onCreateSessionDescriptionError(error) {
      console.log('Failed to create session description: ' + error.toString());
    }

    function sendData() {
      const data = dataChannelSend.value;
      sendChannel.send(data);
      console.log('Sent Data: ' + data);
    }

    function closeDataChannels() {
      console.log('Closing data channels');
      sendChannel.close();
      console.log('Closed data channel with label: ' + sendChannel.label);
      receiveChannel.close();
      console.log('Closed data channel with label: ' + receiveChannel.label);
      localConnection.close();
      remoteConnection.close();
      localConnection = null;
      remoteConnection = null;
      console.log('Closed peer connections');
      startButton.disabled = false;
      sendButton.disabled = true;
      closeButton.disabled = true;
      dataChannelSend.value = '';
      dataChannelReceive.value = '';
      dataChannelSend.disabled = true;
      disableSendButton();
      enableStartButton();
    }

    function gotDescription1(desc) {
      localConnection.setLocalDescription(desc);
      console.log(`Offer from localConnection\n${desc.sdp}`);
      remoteConnection.setRemoteDescription(desc);
      remoteConnection.createAnswer().then(
        gotDescription2,
        onCreateSessionDescriptionError
      );
    }

    function gotDescription2(desc) {
      remoteConnection.setLocalDescription(desc);
      console.log(`Answer from remoteConnection\n${desc.sdp}`);
      localConnection.setRemoteDescription(desc);
    }

    function getOtherPc(pc) {
      return (pc === localConnection) ? remoteConnection : localConnection;
    }

    function getName(pc) {
      return (pc === localConnection) ? 'localPeerConnection' : 'remotePeerConnection';
    }

    function onIceCandidate(pc, event) {
      getOtherPc(pc)
        .addIceCandidate(event.candidate)
        .then(
          () => onAddIceCandidateSuccess(pc),
          err => onAddIceCandidateError(pc, err)
        );
      console.log(`${getName(pc)} ICE candidate: ${event.candidate ? event.candidate.candidate : '(null)'}`);
    }

    function onAddIceCandidateSuccess() {
      console.log('AddIceCandidate success.');
    }

    function onAddIceCandidateError(error) {
      console.log(`Failed to add Ice Candidate: ${error.toString()}`);
    }

    function receiveChannelCallback(event) {
      console.log('Receive Channel Callback');
      receiveChannel = event.channel;
      receiveChannel.onmessage = onReceiveMessageCallback;
      receiveChannel.onopen = onReceiveChannelStateChange;
      receiveChannel.onclose = onReceiveChannelStateChange;
    }

    function onReceiveMessageCallback(event) {
      console.log('Received Message');
      dataChannelReceive.value = event.data;
    }

    function onSendChannelStateChange() {
      const readyState = sendChannel.readyState;
      console.log('Send channel state is: ' + readyState);
      if (readyState === 'open') {
        dataChannelSend.disabled = false;
        dataChannelSend.focus();
        sendButton.disabled = false;
        closeButton.disabled = false;
      } else {
        dataChannelSend.disabled = true;
        sendButton.disabled = true;
        closeButton.disabled = true;
      }
    }

    function onReceiveChannelStateChange() {
      const readyState = receiveChannel.readyState;
      console.log(`Receive channel state is: ${readyState}`);
    }
</script>

</html>

工作原理

此代码使用RTCPeerConnection和RTCDataChannel来启用文本消息的交换。

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

RTCDataChannel的语法有意类似于WebSocket，带有send（）方法和消息事件。

注意dataConstraint的使用。可以配置数据通道以实现不同类型的数据共享 - 例如，优先考虑可靠的交付而不是性能。您可以在Mozilla Developer Network上找到有关选项的更多信息。

加分项

WebRTC数据通道使用的协议使用SCTP，默认使用可靠和有序的数据传输。在 RTCDataChannel 需要提供可靠的数据传输时或更重要的信息时使用它，即使这可能意味着丢失一部分数据。查阅为什么使用sctp传输?
使用CSS改进页面布局，并将“占位符”属性添加到“dataChannelReceive”textarea。
在移动设备上测试页面。