基于DataChannel.js(WebRTC_Experiment)实现的多端点的通信

DataChannel.js是webRTC封装库的一个js对象文件，由muaz-khan发布在GitHub上，https://github.com/muazkhan/WebRTCExperiment/tree/master/DataChannel。DataChannel.js是一个用于实现多对多用户组文件/数据分享或者文本聊天Web APP的javascript库，语法简单而且易于使用，极大地简化了一些复杂的任务，例如：消息传输，用户的加入和退出，等等。同时提供了许多扩展功能：可以直接借用DataChannel的现有的funcition来处理用户的加入，会话的关闭等情形，也可以扩展DataChannel的功能，比如 可以扩展DataChannel.js的一些function来实现对在线用户的检测。
而且DataChannel.js极好地一点是，无论是文本消息，文件，还是一般数据，大小都是不限制的。
由此可以借助DataChannel来实现Cloud_TV中视频段传输的功能，当然在本文中仅仅是对DataChannel的一次验证性使用，来尝试使用其各种功能。
首先来介绍一下使用到得DataChannel.js 的一些function：
open("channel_name");// 创建或者打开一个以channel_name为名的channel
connect("channel_name");//加入一个以channel_name标示的channel，前提是该channel已经被打开
send(file|data|"text-message");//向该channel内的所有终端发送文件/数据/文本消息
onopen(userid);//当检测所某个user_id为userid的用户加入channel时的处理方法，可以被ovverride
onmessage(message,userid,latency)//当检测到某个user_id为userid的用户向channel内发送消息时的处理方法，可以被ovverride，latency是消息的延迟时间
channels[userid].send(file|data|'text message');//向channel内用user_id为userid的用户直接发送消息（文件，数据或者文本消息）
leave();离开当前channel，中止会话
onleave(userid);检测到user_id为userid 的用户离开时的处理函数
join(data_channel); //使用join的方式加入一个channel
join({id:datachannel.id,owner:datachannel.owner});//使用join的方式加入一个channel
使用上面的function，通过<script src="https://www.webrtc-experiment.com/DataChannel.js"> </script> 引入DataChannel.js, 可以很容易实现多终端通信的基础功能
在此基础上尝试加入在线channel列表功能，共有两种实现方式：
（1）override DataChannel的ondatachannel function，这个function用来处理有新的channel创建这一事件，可以用如下的代码段：

//search for existing data channels//"ondatachannel" is fired for each new data channel, and this function is provided by DataChannel.js//In our finnal designation, when ever one open a channel, the channel info will be added to the Severchannel.ondatachannel = function(data_channel) {var alreadyExist = document.getElementById(data_channel.id);if (alreadyExist) return;var tr = document.createElement('tr');tr.setAttribute('id', data_channel.owner);tr.innerHTML = '<td>' + data_channel.id + '</td>' +'<td><button class="join" id="' + data_channel.id + '">Join</button></td>';channelsList.insertBefore(tr, channelsList.firstChild);channelsList.style.display = '';// when someone clicks table-row; joining the relevant data channeltr.onclick = function() {// id:    unique identifier for the session// owner: unique identifier for the session initiatorchannel.join({id: this.querySelector('.join').id,owner: this.id});};};

可以看到函数的传入参数便是最新创建的channel，然后根据其属性值进行一些可以自定义的操作。

现在我们来看一下DataChannel.js中的几行代码：

self.config = {                ondatachannel: function (room) {                    if (!dataConnector) {                        self.room = room;                        return;                    }                    var tempRoom = {                        id: room.roomToken,                        owner: room.broadcaster                    };                    if (self.ondatachannel) return self.ondatachannel(tempRoom);                    if (self.joinedARoom) return;                    self.joinedARoom = true;                    self.join(tempRoom);                },

从代码中可以看出，当我们为channel 定义了ondatachannel方法之后，直接返回ondatachannel（temproom）。

此时后面的join(temproom)不再执行

根据其他代码可以发现，此时的connect(channel_name);函数已经无法执行了，此时只能通过调用join();函数来加入一个channel

(2) 在中心服务器数据库中建一张channel表 和一张 user 表结构大体如下:

channel 表，用于存放当前打开的channel，当channel被open时存入数据库，当owner离开时进行从数据表中delete

id                              int(10)               primary

channel_name      varchar(30)      unique 

channel_id             int(10)               

channel_owner     varchar(30)     

user表，用于存储用户的相关信息 当用户进入网页时通过登录行为验证身份并获取用户相关信息

id                              int(10)               primary

user_id                   int(10)               unique

user_name            varchar(30)      unique

…(other useful user info)

通过访问channel表获取最新的channel信息并刷新显示在web页面上

具体的代码尚未实现，基本的function如下：

var channel_list_data = new Array();      function getChannelList(){  //$post, visit the Server to get the Channel Info      return channel_list_data;  }  function getUserName(){  //$post, visit the Server to get the UserName Info          return "XiaoMing";  }  //get the children elements which classname is sClass of oParent  function getByClass(oParent, sClass)  {var aEle=oParent.getElementsByTagName('*');var aResult=[];var re=new RegExp('\\b'+sClass+'\\b', 'i');var i=0;for(i=0;i<aEle.length;i++){if(re.test(aEle[i].className)){aResult.push(aEle[i]);}}return aResult;  }  //show the ChannelList on the page  function showChannelList(){      var list = getChannelList();  //alert(0);  var count = list.length;  var table = document.getElementById('ChannelList');  //var childs = table.children;   //alert(0);  var childs = getByClass(table,"channel_list_col");  //alert(1);  //alert("childslength" + childs.length);  for(var i=0;i<childs.length;i++){  //alert(i);      $(".channel_list_col")[i].remove();  }  //alert(count);  for(var i=0;i<count;i++){  var tr = table.insertRow(1);  tr.className = "channel_list_col";  tr.innerHTML = "<td>" + list[i]['user_name'] + "</td>" + "<td>" + list[i]['channel_name'] + "</td>" + "<td>" +  "Undefine" + "</td>";   }  }  //  function addChannel(user,channel){    //visit the Server and push the addedChannel to the Server  var count_list = channel_list_data.length;            channel_list_data[count_list] = new Array();channel_list_data[count_list]['user_name']=user;channel_list_data[count_list]['channel_name']=channel;  }

*某些说明性注释部分是有待实现的访问数据库的功能