文章目录

1. RTCDataChannel基本介绍
2. RTCDataChannel实战

即时通讯中我们除了媒体数据的发送需求外，有时候需要发送非媒体数据；WebRTC提供了一种发送非音视频数据的方式就是打他RTCDataChannel，在之前的版本里是使用rtp来传输数据，在最新的版本里已经采用sctp协议来发送数据；这篇文章主要介绍js端的实现；

1. RTCDataChannel基本介绍

RTCDataChannel 接口是WebRTC API的一个功能，可以在两个设备间建立一个对等的通道（ice穿透通道），然后就可以通过该通道发送和接收任意数据。
RTCDataChannel 可以通过RTCPeerconnection 创建，接口函数定义如下：

   createDataChannel(label: string, dataChannelDict?: RTCDataChannelInit): RTCDataChannel;

其中label是一个标识表示两边的通道是一个，dataChannelDict是一个可选参数用来配置datachannal的一个设置项目，定义如下：

{
    
    
    id?: number;
    maxPacketLifeTime?: number;
    maxRetransmits?: number;
    negotiated?: boolean;
    ordered?: boolean;
    protocol?: string;
 }

这些参数一般不用设置，也能使用，如果特殊要求需要设置，这里介绍一下参数的含义：

ordered 表示通过 RTCDataChannel 的发送的信息的到达顺序需要和发送顺序一致(true), 或者到达顺序不需要和发送顺序一致 (false).也就是是否保证包的顺序性；属性的默认值是: true.
maxPacketLifeTime 最大存活时间，在不可靠模式下尝试传输消息的最大毫秒数，也就是一个包持续尝试发送的超时时间，默认是null；
maxRetransmits 消息尝试重新发送的次数，这个和maxPacketLifeTime只能同时设置一个，默认值是null；
protocol datachanal 使用的字协议名称，默认是空字符串；
negotiated false的时候其中一方调用createDataChannel创建通道，另一方在peerConnection的onDataChannal事件中处理另外一方的datachannal，如果是true那么两端都可以使用createDataChannel来创建数据通道，使用ID来标识数据通道；默认是false；
id 通道的唯一标识ID ，如果不设置会默认设置一个作为标识；
接下来，看下实际项目中的使用；

2. RTCDataChannel实战

2.1 negotiated=false 创建及事件处理

在之前的demo中新增两个变量：

let sendDC = null;
let recvDC = null;

sendDC是发送方的ID通过peer的create方法生成：

 sendDC = peerconnetion.createDataChannel('my channal');
    sendDC.onopen = function () {
    
    
        console.log("sendDC datachannel open");
    };
  
    sendDC.onclose = function () {
    
    
        console.log("sendDC datachannel close");
    };

通过设置两个监听用于接收数据通道的状态变化；
recvDC是在对方创建成功后，用于接收远端的消息的，通过peerconnection的ondatachannel可以获取到：

peerconnetion.ondatachannel = (ev)=>{
    
    
        recvDC = ev.channel;
        recvDC.onmessage = function (event) {
    
    
            console.log(" recvDC received: " + event.data);
        };
    
        recvDC.onopen = function () {
    
    
            console.log("recvDC datachannel open");
        };
      
        recvDC.onclose = function () {
    
    
            console.log("recvDC datachannel close");
        };
    };

上述代码中同senDC一样监听的打开和关闭的方法；同时需要监听收消息的方法，用来处理对方发送过来的数据；

2.2 negotiated= true 创建及事件处理

同上一节不同的是这里本地和远端的dataChannal都可以使用createDataChanal来创建；创建及监听的设置如下：

const opt = {
    
    
        negotiated: true,
        id : 0
    };
    sendDC = peerconnetion.createDataChannel('my channal',opt);
    sendDC.onopen = function () {
    
    
        console.log("sendDC datachannel open");
    };
  
    sendDC.onclose = function () {
    
    
        console.log("sendDC datachannel close");
    };
    sendDC.onmessage = function (event) {
    
    
            console.log(" recvDC received: " + event.data);
        };

运行后在收消息里断点，如下：
在这里插入图片描述

2.3 发送消息

RTCDataChannel支持发送文本，二进制数据等内容的数据，其接口定义如下：

    send(data: string): void;
    send(data: Blob): void;
    send(data: ArrayBuffer): void;
    send(data: ArrayBufferView): void;

在demo中为了便于测试先发送文本数据，如： sendDC.send('你好我是 ' + selfid);；这样就将数据发送出去，在两外一端的recvDC的onmessage中就能收到消息；
如果需要关闭数据通道直接调用close方法就可以关闭，如下：

sendDC.close();
recvDC.close();
sendDC = null;
recvDC = null;

datachannal的基本使用就是以上的接口；

WebRTC系列-RTCDataChannel发送非音视频数据