Merge pull request webRTC-io#2 from webRTC/websocket

Websocket
ajbogh · Aug 10, 2012 · 36036ac · 36036ac
2 parents c002a3c + 8feb295
commit 36036ac
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 63 deletions.
diff --git a/example/index.html b/example/index.html
@@ -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) {

diff --git a/example/server.js b/example/server.js
@@ -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);
+          }
+        });
+      }
+    }
+  }
+});
diff --git a/example/webrtc.io.js b/example/webrtc.io.js
@@ -0,0 +1 @@
+../node_modules/webrtc.io/node_modules/webrtc.io-client/lib/webrtc.io.js
diff --git a/package.json b/package.json
@@ -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": {