详解WebRTC——网页实时通信技术

function createConnection() {
  sendButton.disabled = true;
  megsToSend.disabled = true;
  var servers = null;

  bytesToSend = Math.round(megsToSend.value) * 1024 * 1024;

  // 创建连接，servers可以传入一些描述信息，由于这个demo不需要验证连接信息，在同一个页面上可以直接连接，该参数传null即可
  localConnection = localConnection = new RTCPeerConnection(servers);
  //打印log
  trace('Created local peer connection object localConnection');

  var dataChannelParams = {ordered: false};
  if (orderedCheckbox.checked) {
    dataChannelParams.ordered = true;
  }

  //创建数据通道 语法：dataChannel = RTCPeerConnection .createDataChannel（label [，options ]）;，lable：通道的名称；optins：是个可选参数，传入数据通道配置参数，有很多参数可选，例子中的ordered:true表示有序模式，false即为无序模式，还有其他参数maxPacketLifeTime 、maxRetransmits等等
  sendChannel = localConnection.createDataChannel(
      'sendDataChannel', dataChannelParams);
  sendChannel.binaryType = 'arraybuffer';
  trace('Created send data channel');

  //绑定onopen、onclose、onicecandidate（当RTCPeerConnection被createPeerConnection()成功创建时触发，回调会返回待连接端的配置信息）
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;
  localConnection.onicecandidate = function(e) {
    onIceCandidate(localConnection, e);
  };

  //创建呼叫实例
  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );

  //创建远端接收连接实例
  remoteConnection = remoteConnection = new RTCPeerConnection(servers);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = function(e) {
    onIceCandidate(remoteConnection, e);
  };
  //当一个RTC数据通道已被远端调用createDataChannel()添加到连接中时触发
  remoteConnection.ondatachannel = receiveChannelCallback;
}

function receiveChannelCallback(event) {
  trace('Receive Channel Callback');
  receiveChannel = event.channel;
  receiveChannel.binaryType = 'arraybuffer';
  //接收到数据时触发
  receiveChannel.onmessage = onReceiveMessageCallback;

  receivedSize = 0;
}

function onReceiveMessageCallback(event) {
  receivedSize += event.data.length;
  receiveProgress.value = receivedSize;

  if (receivedSize === bytesToSend) {
    closeDataChannels();
    sendButton.disabled = false;
    megsToSend.disabled = false;
  }
}

function onSendChannelStateChange() {
  var readyState = sendChannel.readyState;
  trace('Send channel state is: ' + readyState);
  if (readyState === 'open') {
    sendGeneratedData();
  }
}

function sendGeneratedData() {
  sendProgress.max = bytesToSend;
  receiveProgress.max = sendProgress.max;
  sendProgress.value = 0;
  receiveProgress.value = 0;

  var chunkSize = 16384;
  var stringToSendRepeatedly = randomAsciiString(chunkSize);
  var bufferFullThreshold = 5 * chunkSize;
  var usePolling = true;
  if (typeof sendChannel.bufferedAmountLowThreshold === 'number') {
    trace('Using the bufferedamountlow event for flow control');
    usePolling = false;

    // 缓冲区大小限值
    bufferFullThreshold = chunkSize / 2;

    // 缓冲区大小控制
    sendChannel.bufferedAmountLowThreshold = bufferFullThreshold;
  }

  // bufferedamountlow 事件处理
  var listener = function() {
    sendChannel.removeEventListener('bufferedamountlow', listener);
    sendAllData();
  };
  var sendAllData = function() {
    // 把一堆数据排队进行处理，在数据通道被填满时停止，这里不建议每次发送后设置Timeout，这样会降低吞吐量
    while (sendProgress.value < sendProgress.max) {
      if (sendChannel.bufferedAmount > bufferFullThreshold) {
        if (usePolling) {
          setTimeout(sendAllData, 250);
        } else {
          sendChannel.addEventListener('bufferedamountlow', listener);
        }
        return;
      }
      sendProgress.value += chunkSize;
      // send方法发送数据，RTCDataChannel的语法跟WebSocket语法非常相似，都有message事件和sand方法
      sendChannel.send(stringToSendRepeatedly);
    }
  };
  setTimeout(sendAllData, 0);
}

'use strict';

var os = require('os');
var nodeStatic = require('node-static');
var http = require('http');
var socketIO = require('socket.io');

var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
  fileServer.serve(req, res);
}).listen(8080);

var io = socketIO.listen(app);
io.sockets.on('connection', function(socket) {

  // 打印日志功能
  function log() {
    var array = ['Message from server:'];
    array.push.apply(array, arguments);
    socket.emit('log', array);
  }

  socket.on('message', function(message) {
    log('Client said: ', message);
    // 本示例使用广播方式，真实项目中应该是指定房间号（Socket.IO适用于学习WebRTC信号，因为它内置了'房间'的概念）
    socket.broadcast.emit('message', message);
  });

  socket.on('create or join', function(room) {
    log('Received request to create or join room ' + room);

    var clientsInRoom = io.sockets.adapter.rooms[room];
    var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;

    log('Room ' + room + ' now has ' + numClients + ' client(s)');

    if (numClients === 0) {
      socket.join(room);
      log('Client ID ' + socket.id + ' created room ' + room);
      socket.emit('created', room, socket.id);

    } else if (numClients === 1) {
      log('Client ID ' + socket.id + ' joined room ' + room);
      io.sockets.in(room).emit('join', room);
      socket.join(room);
      socket.emit('joined', room, socket.id);
      io.sockets.in(room).emit('ready');
    } else { // 最多两个客户端
      socket.emit('full', room);
    }
  });

  socket.on('ipaddr', function() {
    var ifaces = os.networkInterfaces();
    for (var dev in ifaces) {
      ifaces[dev].forEach(function(details) {
        if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
          socket.emit('ipaddr', details.address);
        }
      });
    }
  });

});