摘要：如果要多人會話，就要單對單建立多個連接。同樣的步驟執行多次就可以了客戶端代碼開始結束發送打開頁面即開啟等待模式服務端代碼

webRTC是英文Web Real-Time Communication的縮寫，中文翻譯網頁實時通信，是瀏覽器不需要服務器的中轉，可以直接通信的技術

網上的很多教程都會包含實時視頻的介紹，不過我感覺視頻看起來很酷，不過卻不是webRTC的使用難點，卻明顯增加webRTC的使用復雜度，可以略過

webRTC是客戶端對客戶端的單對單實時通信，但是還是需要服務器，就好比一個婚介所的作用

下面我們通過socket.io作為服務器端實現簡單的聊天功能

實現步驟

發起方向服務器發出通知并初始化RTCPeerConnection

服務器接收到通知通知接收并初始化RTCPeerConnection

雙方都監聽onicecandidate事件，并在回調里面把event.candidate上傳到服務器

雙發都監聽ondatachannel事件，并在回調里面給event.channel監聽onmessage事件

發起方調用createOffer方法，并在這個方法的回調中給自己的RTCPeerConnection實例設置setLocalDescription，并向服務器發送自己的Description

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

發起方接收到服務器推送給自己的Description,設置為LocalDescription，至此雙方連接建立

雙方可以調用自己的channel的send方法發送文本消息

至于調用視頻和音頻，我覺著這部分使用起來比較簡單，不繞

步驟就是一方的開啟視頻，獲取視頻流，添加到RTCPeerConnection實例中，連接的另外一方監聽onaddstream事件，獲取視頻流，OK

多人會話的話，同一個RTCPeerConnection實例是不能夠多人會話的。如果要多人會話，就要單對單建立多個連接。同樣的步驟執行多次就可以了

  
  







開始
結束
發送

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

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

// 打開頁面即開啟等待模式
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)
  })


})