ping.html (Ping!)

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Ping!</title>

<style>
button {
  width: 100%;
  font-size:2em;
  background:green;
  color:pink;
}

div {font-size:1.5em;}
</style>
</head>
<body>
  <button onclick="socketPing()">Ping!</button>
  <script src="http://node.steelcomputers.com:8000/socket.io/socket.io.js"></script>
  <h1 id="msg"></h1>
  <div id="uptime"></div>
  <div id="connected"></div>
  <div id="events"></div>
  <div id="latency"></div>
<script>
var socket = io.connect("http://node.steelcomputers.com", {port: 8000, transports: ["websocket"]});
socket.on("connect", onSocketConnected);
socket.on("disconnect", onSocketDisconnect);
socket.on("pong", onPong);
var timer;

function onSocketConnected(){ // Connection to websocket server is established
  msg.innerText = 'Connected to WebSocket server.';
  console.log('Connected to WebSocket server.');
}

function onSocketDisconnect(){ // Connection to websocket server is lost
  msg.innerText = 'WebSocket connection lost.';
  console.log('WebSocket connection lost.');
}

function onPong(data){
  console.timeEnd('ping'); // Stop chrome timer, outputs time in console.
  console.log(data); // Dump the returned object to the console.
  uptime.innerText = "The server has been online for " +
    ( data.uptime > 60*60 ? Math.floor(data.uptime/(60*60)) + " hours, " : "" ) +
    ( data.uptime > 60 ? Math.floor((data.uptime % (60*60))/60) + " minutes, " : "" ) + " and " +
    ( data.uptime % 60 ) + " seconds."; // Update the uptime div
  connected.innerText = "There are " + data.connected + " active websocket connections."; // Update DIV
  events.innerText = "" + data.numEvents + " events have fired on the server.";           // Update DIV
  latency.innerText = "Latency: " + ((new Date()).getTime() - timer.getTime()) + "ms";    // Update DIV
  msg.innerText = data.message; // Update the div with the message property on the data object.
}

function socketPing(){
  timer = new Date(); // Record the current date-time in global var
  console.time('ping'); // Start a chrome timer (optional/redundant code)
  socket.emit('ping'); // Send ping to server
}
</script>
</body>
</html>