摘要：如果要多人會(huì)話(huà)，就要單對(duì)單建立多個(gè)連接。同樣的步驟執(zhí)行多次就可以了客戶(hù)端代碼開(kāi)始結(jié)束發(fā)送打開(kāi)頁(yè)面即開(kāi)啟等待模式服務(wù)端代碼

webRTC是英文Web Real-Time Communication的縮寫(xiě)，中文翻譯網(wǎng)頁(yè)實(shí)時(shí)通信，是瀏覽器不需要服務(wù)器的中轉(zhuǎn)，可以直接通信的技術(shù)

網(wǎng)上的很多教程都會(huì)包含實(shí)時(shí)視頻的介紹，不過(guò)我感覺(jué)視頻看起來(lái)很酷，不過(guò)卻不是webRTC的使用難點(diǎn)，卻明顯增加webRTC的使用復(fù)雜度，可以略過(guò)

webRTC是客戶(hù)端對(duì)客戶(hù)端的單對(duì)單實(shí)時(shí)通信，但是還是需要服務(wù)器，就好比一個(gè)婚介所的作用

下面我們通過(guò)socket.io作為服務(wù)器端實(shí)現(xiàn)簡(jiǎn)單的聊天功能

實(shí)現(xiàn)步驟

發(fā)起方向服務(wù)器發(fā)出通知并初始化RTCPeerConnection

服務(wù)器接收到通知通知接收并初始化RTCPeerConnection

雙方都監(jiān)聽(tīng)onicecandidate事件，并在回調(diào)里面把event.candidate上傳到服務(wù)器

雙發(fā)都監(jiān)聽(tīng)ondatachannel事件，并在回調(diào)里面給event.channel監(jiān)聽(tīng)onmessage事件

發(fā)起方調(diào)用createOffer方法，并在這個(gè)方法的回調(diào)中給自己的RTCPeerConnection實(shí)例設(shè)置setLocalDescription，并向服務(wù)器發(fā)送自己的Description

接收方在服務(wù)器推送給自己的消息里面把5中的Description設(shè)置為自己的RTCPeerConnection實(shí)例的RemoteDescription，并調(diào)用createAnswer方法，在此方法的回調(diào)之中設(shè)置setLocalDescription，并把自己的Description上傳到服務(wù)器

發(fā)起方接收到服務(wù)器推送給自己的Description,設(shè)置為LocalDescription，至此雙方連接建立

雙方可以調(diào)用自己的channel的send方法發(fā)送文本消息

至于調(diào)用視頻和音頻，我覺(jué)著這部分使用起來(lái)比較簡(jiǎn)單，不繞

步驟就是一方的開(kāi)啟視頻，獲取視頻流，添加到RTCPeerConnection實(shí)例中，連接的另外一方監(jiān)聽(tīng)onaddstream事件，獲取視頻流，OK

多人會(huì)話(huà)的話(huà)，同一個(gè)RTCPeerConnection實(shí)例是不能夠多人會(huì)話(huà)的。如果要多人會(huì)話(huà)，就要單對(duì)單建立多個(gè)連接。同樣的步驟執(zhí)行多次就可以了

  
  







開(kāi)始
結(jié)束
發(fā)送

var video = document.getElementById("video")
var localPeerConnection, remotePeerConnection
var localChannel

var socket = io.connect("http://localhost:8181")

// 打開(kāi)頁(yè)面即開(kāi)啟等待模式
startWaiting()

function startWaiting() {
  
  var servers = {
    "iceServers": [{
      "url": "stun:stun.l.google.com:19302"
    }]
  }

  var pc_constraints = {
    optional: [{
      DtlsSrtpKeyAgreement: true
    }]
  }

  localPeerConnection = new RTCPeerConnection(servers, pc_constraints)

  localChannel = localPeerConnection.createDataChannel("sendDataChannel", { reliable: true })

  localPeerConnection.onicecandidate = function(event) {
    if (event.candidate) {
      socket.emit("onicecandidate", event.candidate)
    }
  }

  localChannel.onopen = function() {
    console.log("open")
  }

  localChannel.onclose = function() {
    console.log("close")
  }

  localPeerConnection.ondatachannel = function(event) {
    console.log(event.channel)

    event.channel.onmessage = function(msg) {
      console.log("event msg", msg)
    }
  }


  socket.on("offer", function(desc) {
    console.log("offer: ", desc)
    localPeerConnection.setRemoteDescription(desc)
    setRemote = true
    localPeerConnection.createAnswer(function(desc) {
       localPeerConnection.setLocalDescription(desc)
       socket.emit("answer", desc)
    }, function(error){console.log(error)})
  })

  socket.on("answer", function(desc) {
    console.log("answer: ", desc)
    localPeerConnection.setRemoteDescription(desc)
    console.log("answer end")
    setRemote = true
  })

  socket.on("onicecandidate", function(icecandidate) {
    localPeerConnection.addIceCandidate(icecandidate)
  })




}

document.getElementById("start").onclick = function() {
  localPeerConnection.createOffer(function(desc) {
    localPeerConnection.setLocalDescription(desc)
    socket.emit("offer", desc)
  }, function(error){console.log(error)})
}

document.getElementById("send").onclick = function() {
  var value = document.getElementById("textarea").value
  localChannel.send(value)
}

var static = require("node-static")

var http = require("http")

var file = new(static.Server)()

var app = http.createServer(function (req, res) {
  file.serve(req, res);
}).listen(8181);

var io = require("socket.io").listen(app)

io.sockets.on("connection", function(socket) {

  socket.on("offer",function(desc) {
    socket.broadcast.emit("offer", desc)
  })

  socket.on("answer",function(desc) {
    socket.broadcast.emit("answer", desc)
  })

  socket.on("onicecandidate", function(candidate) {
    socket.broadcast.emit("onicecandidate", candidate)
  })

  socket.on("message", function(message) {
    socket.broadcast.to(message.channel).emit("message", message.message)
  })


})