2015-08-23 2 views
8

Цель состоит в том, чтобы стать Community Wiki должным образом обновленным, поэтому разработчики заинтересованы в реализации обмена сообщениями JSON с браузером-браузером (p2p) с помощью WebCTC DataChannels имеют простые, но функциональные примеры.Работа с Hello World WebRTC Примеры DataChannel с сигнальной реализацией

WebRTC DataChannels являются экспериментальными и все еще в проекте. Похоже, что в настоящее время Интернет является минным полем устаревших примеров WebRTC и тем более, если разработчик пытается изучить API RTCDataChannel.

Простые, но функциональные 1-страничные примеры, которые работают сегодня через WebRTC compliant browsers, кажутся очень трудными для поиска. Например, some examples не учитывают реализацию сигнализации, others работают только для одного браузера (например, Chrome-Chrome), many устарели из-за недавних изменений API и others настолько сложны, что создают препятствия для начала работы.

Пожалуйста, пост примеры, которые удовлетворяют следующим критериям (если что-то не выполняется, пожалуйста, укажите):

  1. стороне клиента код 1-страничный (200 линий или меньше)
  2. Серверный код 1-страничный и технология ссылки (например, Node.js, PHP, Python и т.д.)
  3. Сигнальный механизм реализован и ссылается технология протокола (например, WebSockets, long polling, GCM и т.д.)
  4. Рабочий код, который работает кросс-браузер (Chrome, Firefox, Opera, и/или Bowser)
  5. Минимальные параметры, обработка ошибок, abstraction и т.д. - намерение является элементарным примером

ответ

4

Вот рабочий пример, который использует HTML5 WebSockets для сигнализации и узел .js бэкэнд

сигнализации технологии: WebSockets
клиента: pure html/javascript
сервера: node.js, ws
Последнее тестирование на: Firefox 40.0.2, Chrome 44.0.2403.157 m, Opera 31.0.1889.174


стороне клиента код:

<html> 
<head> 
</head> 
<body> 
    <p id='msg'>Click the following in different browser windows</p> 
    <button type='button' onclick='init(false)'>I AM Answerer Peer (click first)</button> 
    <button type='button' onclick='init(true)'>I AM Offerer Peer</button> 

<script> 
    (function() { 
     var offererId = 'Gandalf', // note: client id conflicts can happen 
      answererId = 'Saruman', //  no websocket cleanup code exists 
      ourId, peerId, 
      RTC_IS_MOZILLA = !!window.mozRTCPeerConnection, 
      RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection, 
      RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.msRTCSessionDescription, 
      RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.msRTCIceCandidate, 
      rtcpeerconn = new RTCPeerConnection(
        {iceServers: [{ 'url': 'stun:stun.services.mozilla.com'}, {'url': 'stun:stun.l.google.com:19302'}]}, 
        {optional: [{RtpDataChannels: false}]} 
       ), 
      rtcdatachannel, 
      websocket = new WebSocket('ws://' + window.location.hostname + ':8000'), 
      comready, onerror; 

     window.init = function(weAreOfferer) { 
      ourId = weAreOfferer ? offererId : answererId; 
      peerId = weAreOfferer ? answererId : offererId; 

      websocket.send(JSON.stringify({ 
       inst: 'init', 
       id: ourId 
      })); 

      if(weAreOfferer) { 

       rtcdatachannel = rtcpeerconn.createDataChannel(offererId+answererId); 
       rtcdatachannel.onopen = comready; 
       rtcdatachannel.onerror = onerror; 

       rtcpeerconn.createOffer(function(offer) { 
        rtcpeerconn.setLocalDescription(offer, function() { 
         var output = offer.toJSON(); 
         if(typeof output === 'string') output = JSON.parse(output); // normalize: RTCSessionDescription.toJSON returns a json str in FF, but json obj in Chrome 

         websocket.send(JSON.stringify({ 
          inst: 'send', 
          peerId: peerId, 
          message: output 
         })); 
        }, onerror); 
       }, onerror); 
      } 
     }; 

     rtcpeerconn.ondatachannel = function(event) { 
      rtcdatachannel = event.channel; 
      rtcdatachannel.onopen = comready; 
      rtcdatachannel.onerror = onerror; 
     }; 

     websocket.onmessage = function(input) { 
      var message = JSON.parse(input.data); 

      if(message.type && message.type === 'offer') { 
       var offer = new RTCSessionDescription(message); 

       rtcpeerconn.setRemoteDescription(offer, function() { 
        rtcpeerconn.createAnswer(function(answer) { 
         rtcpeerconn.setLocalDescription(answer, function() { 
          var output = answer.toJSON(); 
          if(typeof output === 'string') output = JSON.parse(output); // normalize: RTCSessionDescription.toJSON returns a json str in FF, but json obj in Chrome 

          websocket.send(JSON.stringify({ 
           inst: 'send', 
           peerId: peerId, 
           message: output 
          })); 
         }, onerror); 
        }, onerror);     
       }, onerror); 
      } else if(message.type && message.type === 'answer') {    
       var answer = new RTCSessionDescription(message); 
       rtcpeerconn.setRemoteDescription(answer, function() {/* handler required but we have nothing to do */}, onerror); 
      } else if(rtcpeerconn.remoteDescription) { 
       // ignore ice candidates until remote description is set 
       rtcpeerconn.addIceCandidate(new RTCIceCandidate(message.candidate)); 
      } 
     }; 

     rtcpeerconn.onicecandidate = function (event) { 
      if (!event || !event.candidate) return; 
      websocket.send(JSON.stringify({ 
       inst: 'send', 
       peerId: peerId, 
       message: {candidate: event.candidate} 
      })); 
     }; 

     /** called when RTC signaling is complete and RTCDataChannel is ready */ 
     comready = function() { 
      rtcdatachannel.send('hello world!'); 
      rtcdatachannel.onmessage = function(event) { 
       document.getElementById('msg').innerHTML = 'RTCDataChannel peer ' + peerId + ' says: ' + event.data;  
      } 
     }; 

     /** global error function */ 
     onerror = websocket.onerror = function(e) { 
      console.log('====== WEBRTC ERROR ======', arguments); 
      document.getElementById('msg').innerHTML = '====== WEBRTC ERROR ======<br>' + e; 
      throw new Error(e); 
     }; 
    })(); 
</script> 
</body> 
</html>

код на стороне сервера:

var server = require('http').createServer(), 
    express = require('express'),  
    app = express(), 
    WebSocketServer = require('ws').Server, 
    wss = new WebSocketServer({ server: server, port: 8000 }); 

app.use(express.static(__dirname + '/static')); // client code goes in static directory 

var clientMap = {}; 

wss.on('connection', function (ws) { 
    ws.on('message', function (inputStr) { 
     var input = JSON.parse(inputStr); 
     if(input.inst == 'init') { 
      clientMap[input.id] = ws; 
     } else if(input.inst == 'send') { 
      clientMap[input.peerId].send(JSON.stringify(input.message)); 
     } 
    }); 
}); 

server.on('request', app); 
server.listen(80, YOUR_HOSTNAME_OR_IP_HERE, function() { console.log('Listening on ' + server.address().port) });
+0

Получение WebSocket ошибки уже в ЗАКРЫТИЯ или закрытом состоянии – Wajihurrehman

+0

получение WebSocket ошибка уже в состоянии CLOSING или CLOSED. на этой строке кода могли бы вы сказать мне, почему websocket.send (JSON.stringify ({ инст: 'инициализации', ID: ourId })); Я новичок в websockets и wrtc создаю два двух файла один сервер fore и один html-файл для клиента и открываем в двух разных браузерах. – Wajihurrehman