WebRTC数据通道基础知识(webrtc入门五)

本文分享 WebRTC入门系列的第 5 部分内容，在这一部分中，我将介绍数据通道的基础知识。

什么是数据通道？数据通道代表一个网络通道，可用于双向的点对点数据传输。该 API 类似于 WebSocket，尽管如描述所述，你无需通过服务器即可相互发送消息。DataChannel 对于诸如文件共享之类的事情很有用。此外，WebSocket 也受 TCP 限制，而数据通道可以使用 TCP 和 UDP。

这就引出了下一个问题，你应该使用 TCP 还是 UDP ？使用 TCP，数据的传输是可靠和有序的，但如果发生丢包等情况，就会造成 “阻塞”。使用 UDP，数据的传输是不可靠或有序的，然而，如果数据包丢失发生，数据包将被发送。哪种方式最好，主要取决于你想创建什么类型的应用程序，如果是聊天应用程序，你最有可能使用 TCP，如果是游戏应用程序，你可能需要更多的 “实时 “数据传输，所以我推荐UDP。

另外，你可以创建的数据通道的数量限制也因浏览器而异，限制大约是65,534，尽管我认为你不需要这么多。

要创建一个数据通道，我们需要传递一些选项。最常用的选项是：

ordered：如果为真，数据包将以与发送时相同的顺序接收。

maxPacketLifetime：在不可靠模式下，尝试传输一个信息可能需要的最大毫秒数。

maxRetransmits：在不可靠模式下，用户代理应尝试重新传输第一次失败的消息的最大次数。

数据通道是通过 RTCPeerConnection 的 “createDataChannel “方法创建的，它将数据通道添加到RTCPeerConnection 中，并在远程对等的 RTCPeerConnection 上触发 “ondatachannel ” 事件。

好吧，现在无聊的事情已经解决了，让我们来实现吧！

我们将在之前的例子中加入发送和接收聊天信息的功能，所以首先我们需要编辑 public_index.html。打开它，在屏幕共享按钮下面添加以下内容：

<br />
<input type="text" id="chatMessage" placeholder="Enter message"/>
<button id="sendMessageButton" onclick="sendMessage();">Send</button>

这是 HTML 的有趣部分，打开 public/main.js。

首先，我们为数据通道创建变量。

let dataChannel;

接下来在“call”方法中，在“initializePeerConnection”之后添加以下内容：

initializeDataChannel();

接下来我们将创建该方法，在“initializePeerConnection”方法之后添加以下内容：

const initializeDataChannel = () => {
  const config = { ordered: true };

  dataChannel = peerConnection.createDataChannel('dataChannel', config);
  initializeDataChannelListeners();
};

这里我们初始化数据通道的选项。我们正在创建一个简单的消息传输，所以我希望对数据包进行排序，否则对话可能会变得很奇怪。接下来我们初始化数据通道，“dataChannel”是该通道的标签，在这里我们传递配置选项。

完成后，“ondatachannel”事件应该在远程对等端触发，所以让我们实现它。在“initializePeerConnection”方法中，在“ontrack”事件之后添加以下监听器。

peerConnection.ondatachannel = ({ channel }) => {
  console.log('peerConnection::ondatachannel');
  dataChannel = channel;

  initializeDataChannelListeners();
};

这里我们将全局数据通道设置为接收通道，然后初始化数据通道监听器。让我们在“initializeDataChannel”之后创建这个方法：

const initializeDataChannelListeners = () => {
  dataChannel.onopen = () => console.log('dataChannel opened');
  dataChannel.onclose = () => console.log('dataChannel closed');
  dataChannel.onerror = (error) => console.error('dataChannel error:', error);

  dataChannel.onmessage = ({ data }) => {
    console.log('dataChannel data', data);
  };
};

在这里我们监听数据通道事件，你可以看到它与 WebSocket API 非常相似。当我们收到一条消息时，我们只是将其记录到控制台。

接下来，我们需要一种方法来发送用户不遗余力为我们写的消息。在文件的末尾添加以下内容：

const sendMessage = () => {
  const message = document.getElementById('chatMessage').value;

  if (!message) {
    alert('no message entered');

    return;
  }

  if (!dataChannel || dataChannel.readyState !== 'open') {
    alert('data channel is undefined or is not connected');

    return;
  }

  console.log('sending message', message);
  const data = {
    message,
    time: new Date()
  };

  dataChannel.send(JSON.stringify(data));
  document.getElementById('chatMessage').value = '';
};

在这里，我们得到文本输入的值，并检查它是否为空，如果是空的，我们就提醒用户。之后，我们检查 dataChannel 是否已经被设置，状态是否为 “打开”，就像 WebSocket 一样，如果没有打开/连接，就不能发送任何东西。最后，我们添加一个时间戳，并将其发送给远程对等方，这应该会触发其数据通道的 “onmessage “事件。

最后我们需要在会话结束时关闭数据通道，在“stop”方法中添加上面的 peerConnection.close()：