added ping and stats

Author: timatooth

public/draw.js

@@ -19,6 +19,8 @@ $(function(){
 
     // A flag for drawing activity
     var drawing = false;
+    //store the last time a ping was sent.
+    var lastPing = 0;
 
     var clients = {};
     var cursors = {};
@@ -67,6 +69,26 @@ $(function(){
 	}
 
     });
+
+    /*Respond to server 'pings' */
+    socket.on('ping', function(data){
+	socket.emit('pong', id);
+    });
+
+    socket.on('pong', function(data){
+	var s, latency;
+	latency = $.now() - lastPing;
+	lastPing = $.now();
+	s = $('#serverStats');
+	s.empty();
+	s.append("<tr><th>Server Latency</th><td>"+latency+" ms</td></tr>");
+	for (var key in data) {
+	    if (data.hasOwnProperty(key)) {
+		s.append("<tr><th>"+key+"</th><td>"+data[key]+"</td></tr>");
+	    }
+	}
+	
+    });
 
     var prev = {};
 
@@ -151,6 +173,8 @@ $(function(){
     //settings panel
     $('#settingsPanelTab').click(function(){
 	if(!settingsTabOpen){
+	    socket.emit('ping', id);
+	    lastPing = $.now();
 	    $('#settingsPanel').animate({bottom: 0}, 200);
 	    settingsTabOpen = true;
 	} else {
@@ -190,6 +214,9 @@ $(function(){
             sendMessage();
 	}
     });
+    $('#statsShow').click(function(){
+	$('#serverStats').toggle();
+    });
 
     function sendMessage(){
 	var message = $("#chatBox").val();

public/style.css

@@ -139,16 +139,27 @@ h3{
     box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
 }
 
-#settingsPanel p {
+#settingsPanel {
     color: white;
     font-size: 0.8em;
-    padding: 10px;
 }
-
-#settingsPanel input {
+#settingsPanel input, p, label, table {
     margin: 10px;
 }
 
+#settingsPanel th {
+    text-align: left;
+}
+#serverStats {
+    display: none;
+}
+
+
+#bottomAttribution {
+    position: absolute;
+    bottom: 3px;
+}
+
 #settingsPanelTab{
     position: absolute;
     top: -20px;

server.js

@@ -7,7 +7,7 @@ var jade = require('jade');
 var io = require('socket.io').listen(server);
 
 var drawActionStack = [];
-var toSpewOn;
+var connectedClients = 0;
 
 app.use(express.logger());
 app.set('views', __dirname + '/views');
@@ -24,6 +24,7 @@ app.get('/', function(req, res){
 io.set("log level", 1);
 
 io.sockets.on('connection', function(socket){
+    connectedClients++;
     /* Send new connection the drawing history as one large array. */
     socket.emit('drawActionHistory', drawActionStack);
 
@@ -32,7 +33,6 @@ io.sockets.on('connection', function(socket){
 	if(data.drawing){
 	    drawActionStack.push(data);
 	} else if( drawActionStack.length > 1 && drawActionStack[drawActionStack.length - 1]){
-	    //if they stopped drawing store the last draw position.
 	    drawActionStack.push(data);
 	}
 	socket.broadcast.emit('moving', data);
@@ -48,4 +48,18 @@ io.sockets.on('connection', function(socket){
 	    });
 	}
     });
+
+    socket.on('ping', function(id){
+	var data = {
+	    stackSize: drawActionStack.length,
+	    connectedClients: connectedClients
+	};
+	socket.emit('pong', data);
+    });
+
+    socket.on('disconnect', function() {
+	connectedClients--; 
+    });
+
 });
+	      

views/main.jade

@@ -28,10 +28,15 @@ html
     div#chatArea
     div#settingsPanel
       div#settingsPanelTab Settings
+      label(for="usernameInput") Chat Name
       input(type="text" id="usernameInput" placeholder="Username: Guest")
-      br
-      p node-multidraw v0.5 by <a href="http://timatooth.com">Tim Sullivan</a>
-      p Source code on <a href="https://github.com/timatooth/node-multidraw">GitHub</a>
+      
+      table#serverStats
+      div#bottomAttribution
+        p
+          a(id="statsShow" href="javascript:void(0)") Server Stats
+        p node-multidraw v0.5 by <a href="http://timatooth.com">Tim Sullivan</a>
+        p Source code on <a href="https://github.com/timatooth/node-multidraw">GitHub</a>
     input(type="text" id="chatBox" placeholder="Chat" maxlength="135")
     script(src="/socket.io/socket.io.js")
     script(src="http://code.jquery.com/jquery-1.10.1.min.js")