add ping

app.js

@@ -200,6 +200,9 @@ io.set('transports', ['xhr-polling', 'jsonp-polling']);
 io.sockets.on('connection', function(socket) {
     var room;
     var mySide;
+    socket.on('ping', function() {
+        socket.emit('pong');
+    });
     socket.on('init', function(room_id) {
         console.log('got init', room_id);
         // don't allow multiple room_ids to be sent

lib/client.js

@@ -15,10 +15,25 @@ window.startRoom = function(room_id) {
     var SIDES = ['black', 'white'];
     var socket = io.connect();
     console.log('connecting');
+
+    function runPing() {
+        if(socket.disconnected)
+            return;
+
+        var from = Date.now();
+        socket.emit('ping');
+        socket.once('pong', function() {
+            var to = Date.now();
+            $('#ping').text(to - from);
+        });
+        setTimeout(runPing, 1000);
+    };
+
     socket.on('connect', function() {
         socket.emit('init', room_id);
         console.log('connected');
         $('#disconnect-message').remove();
+        runPing();
     });
     socket.on('disconnect', function() {
         $('#chess-board').append('<div class="message" id="disconnect-message">You are disconnected. If you do not reconnect automatically, try refreshing the page.</div>');

static/style.less

@@ -95,3 +95,9 @@
 
     .disable-selection;
 }
+
+#ping-text {
+    display: inline-block;
+    width: 8em;
+    text-align: left;
+}

views/index.html

@@ -19,6 +19,7 @@
             <button id="sit-white">Sit as White</button>
             <button id="sit-black">Sit as Black</button>
             <button id="start-game" disabled="disabled">Start Game</button>
+            <span id="ping-text">Ping: <span id="ping"></span> ms</span>
             <p><a href="/">New Game</a></p>
         </center>
         <script type="text/javascript">