David A. Windham
david
/
daveo-webrtc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge pull request #2 from webRTC/websocket

Websocket
Ben Brittain 12 years ago
parent
c002a3c306 8feb2950c9
commit
36036ac218
4 changed files with 73 additions and 63 deletions
Split View Show Diff Stats
  1. 35 28
      example/index.html
  2. 35 33
      example/server.js
  3. 1 0
      example/webrtc.io.js
  4. 2 2
      package.json

+ 35 - 28
example/index.html
View File 

@@ -4,8 +4,7 @@
 
     <title>Example webrtc.io</title>
 
     <link type="text/css" href="/style.css" rel="stylesheet"></link>
 
 
-    <script src="/socket.io/socket.io.js"></script>
 
-    <script src="/webrtc.io/webrtc.io.js"></script>
 
+    <script src="/webrtc.io.js"></script>
 
   </head>
 
   <body onload="init()">
 
     <div id="videos">
 
@@ -56,7 +55,6 @@
 
         var perColumn = Math.ceil(videos.length / perRow);
 
         var width = Math.floor((window.innerWidth) / perRow);
 
         var height = Math.floor((window.innerHeight - 190) / perColumn);
 
-        console.log(width, height);
 
         video.width = width;
 
         video.height = height;
 
         video.style.position = "absolute";
 
@@ -80,28 +78,11 @@
 
         }
 
       }
 
 
-      function initChat() {
 
-
 
-        var input = document.getElementById("chatinput");
 
-        input.addEventListener('keydown', function(event) {
 
-          var key = event.which || event.keyCode;
 
-          if (key === 13) {
 
-            rtc._socket.emit('chat msg', input.value);
 
-            addToChat(input.value);
 
-            input.value = "";
 
-          }
 
-        }, false);
 
-        rtc._socket.on('receive chat msg', function(data) {
 
-          console.log(data.color);
 
-          addToChat(data.msg, data.color.toString(16));
 
-        });
 
-      }
 
-
 
       function addToChat(msg, color) {
 
         var messages = document.getElementById('messages');
 
         msg = sanitize(msg);
 
         if (color) {
 
-          msg = '<span style="color: #' + color + '; padding-left: 15px">' + msg + '</span>';
 
+          msg = '<span style="color: ' + color + '; padding-left: 15px">' + msg + '</span>';
 
         } else {
 
           msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
 
         }
 
@@ -140,9 +121,39 @@
 
         })
 
       }
 
 
+      function initChat() {
 
+        var input = document.getElementById("chatinput");
 
+        var room = window.location.hash.slice(1);
 
+        var color = "#"+((1<<24)*Math.random()|0).toString(16);
 
+
 
+        input.addEventListener('keydown', function(event) {
 
+          var key = event.which || event.keyCode;
 
+          if (key === 13) {
 
+            rtc._socket.send(JSON.stringify({
 
+              "eventName": "chat_msg",
 
+              "messages": input.value,
 
+              "room": room,
 
+              "color": color
 
+            }), function(error) {
 
+              if (error) {
 
+                console.log(error);
 
+              }
 
+            });
 
+            addToChat(input.value);
 
+            input.value = "";
 
+          }
 
+        }, false);
 
+        rtc.on('receive_chat_msg', function(data) {
 
+          console.log(data.color);
 
+          addToChat(data.messages, data.color.toString(16));
 
+        });
 
+      }
 
+
 
+
 
       function init() {
 
         if(PeerConnection){
 
-          rtc.createStream('you', function(stream) {
 
+          rtc.createStream({"video": true, "audio": true}, function(stream) {
 
+            document.getElementById('you').src = URL.createObjectURL(stream);
 
             videos.push(document.getElementById('you'));
 
             rtc.attachStream(stream, 'you');
 
             subdivideVideos();
 
@@ -154,15 +165,11 @@
 
         
         var room = window.location.hash.slice(1);
 
 
-        if (room === '') {
 
-            room = Math.floor(Math.random()*rooms.length);
 
-            window.location.hash = room;
 
-        }
 
         //When connectiong to nodejitsu
 
         //rtc.connect("http://multiwebrtc.nodejitsu.com/", room);
 
 
         //When using localhost
 
-        rtc.connect("http://localhost:8000/", room);
 
+        rtc.connect("ws://localhost:8001/", room);
 
 
         rtc.on('add remote stream', function(stream, socketId) {
 
           console.log("ADDING REMOTE STREAM...");
 
@@ -175,9 +182,9 @@
 
             console.log('remove ' + data);
 
             removeVideo(data);
 
         });
 
-        initChat();
 
         initFullScreen();
 
         initNewRoom();
 
+        initChat();
 
       }
 
       
       window.onresize = function(event) {

+ 35 - 33
example/server.js
View File 

@@ -1,8 +1,5 @@
 
 var app = require('express').createServer();
 
-var webRTC = require('webrtc.io').listen(app);
 
-
 
-var colors = {};
 
-
 
+var webRTC = require('webrtc.io').listen(8001);
 
 
 //When connectiong to nodejitsu
 
 //app.listen(80);
 
@@ -17,38 +14,43 @@ app.get('/style.css', function(req, res) {
 
   res.sendfile(__dirname + '/style.css');
 
 });
 
 
-function selectRoom(socket) {
 
-  for (var room in servers) {
 
-    console.log('***' + room);
 
-    if (io.sockets.clients(room).length < 4) {
 
-      socket.emit('send', room);
 
-    }
 
-    console.log(io.sockets.clients('' + room));
 
-  }
 
-}
 
+app.get('/webrtc.io.js', function(req, res) {
 
+  res.sendfile(__dirname + '/webrtc.io.js');
 
+});
 
 
-webRTC.rtc.on('connection', function(rtc) {
 
-  //Client connected
 
 
-  rtc.on('send_answer', function() {
 
-    //answer sent
 
-  });
 
+webRTC.rtc.on('connect', function(rtc) {
 
+  //Client connected
 
+});
 
 
-  rtc.on('disconnect', function() {
 
-    //disconnect sent
 
-  });
 
+webRTC.rtc.on('send answer', function(rtc) {
 
+  //answer sent
 
 });
 
 
-webRTC.sockets.on('connection', function(socket) {
 
-  console.log("connection received");
 
-
 
-  colors[socket.id] = Math.floor(Math.random()* 0xFFFFFF)
 
-  socket.on('chat msg', function(msg) {
 
-    console.log("chat received");
 
-    
-    socket.broadcast.emit('receive chat msg', {
 
-      msg: msg,
 
-      color: colors[socket.id]
 
-    });
 
-  });
 
+webRTC.rtc.on('disconnect', function(rtc) {
 
+  //Client disconnect 
 });
 
+
 
+webRTC.rtc.on('chat_msg', function(data, socket) {
 
+  var roomList = webRTC.rtc.rooms[data.room] || [];
 
+
 
+  for (var i = 0; i < roomList.length; i++) {
 
+    var socketId = roomList[i];
 
+
 
+    if (socketId !== socket.id) {
 
+      var soc = webRTC.rtc.getSocket(data.room, socketId);
 
+
 
+      if (soc) {
 
+        soc.send(JSON.stringify({
 
+          "eventName": "receive_chat_msg",
 
+          "messages": data.messages,
 
+          "color": data.color
 
+        }), function(error) {
 
+          if (error) {
 
+            console.log(error);
 
+          }
 
+        });
 
+      }
 
+    }
 
+  }
 
+});

+ 1 - 0
example/webrtc.io.js
View File 

@@ -0,0 +1 @@
 
+../node_modules/webrtc.io/node_modules/webrtc.io-client/lib/webrtc.io.js

+ 2 - 2
package.json
View File 

@@ -6,9 +6,9 @@
 
     "node": ">= 0.6.0"
 
   },
 
   "dependencies": {
 
-    "socket.io": "latest",
 
     "webrtc.io": "latest",
 
-    "express": "2.5.1"
 
+    "express": "2.5.1",
 
+    "ws": "latest"
 
   },
 
   "subdomain": "MultiWebRTC",
 
   "scripts": {