Merge pull request #9 from Cryptkeeper/big-graph

Big graph
This commit is contained in:
Cryptkeeper 2015-12-18 19:15:27 -06:00
commit 76a4cd1f95
9 changed files with 472 additions and 80 deletions

3
.gitignore vendored

@ -2,4 +2,5 @@ node_modules/
*.log
.idea/
production/
database.sql
database.sql
database.sql-journal

130
app.js

@ -10,6 +10,9 @@ var config = require('./config.json');
var networkHistory = [];
var connectedClients = 0;
var graphData = [];
var lastGraphPush = [];
function pingAll() {
var servers = config.servers;
@ -79,6 +82,30 @@ function pingAll() {
if (config.logToDatabase) {
db.log(network.ip, util.getCurrentTimeMs(), res ? res.players.online : 0);
}
// Push it to our graphs.
var timeMs = util.getCurrentTimeMs();
// The same mechanic from trimUselessPings is seen here.
// If we dropped the ping, then to avoid destroying the graph, ignore it.
// However if it's been too long since the last successful ping, we'll send it anyways.
if (!lastGraphPush[network.ip] || (timeMs - lastGraphPush[network.ip] >= 60 * 1000 && res) || timeMs - lastGraphPush[network.ip] >= 70 * 1000) {
lastGraphPush[network.ip] = timeMs;
// Don't have too much data!
if (graphData[network.ip].length >= 24 * 60) {
graphData[network.ip].shift();
}
graphData[network.ip].push([timeMs, res ? res.players.online : 0]);
// Send the update.
server.io.sockets.emit('updateHistoryGraph', {
ip: network.ip,
players: (res ? res.players.online : 0),
timestamp: timeMs
});
}
});
})(servers[i]);
}
@ -95,50 +122,71 @@ function startMainLoop() {
}, config.rates.upateMojangStatus);
}
function startServices() {
server.start(function() {
// Track how many people are currently connected.
server.io.on('connect', function(client) {
// If we haven't sent out at least one round of pings, disconnect them for now.
if (Object.keys(networkHistory).length < config.servers.length) {
client.disconnect();
return;
}
// We're good to connect them!
connectedClients += 1;
logger.log('info', 'Accepted connection: %s, total clients: %d', client.request.connection.remoteAddress, connectedClients);
setTimeout(function() {
// Send them our previous data, so they have somewhere to start.
client.emit('updateMojangServices', mojang.toMessage());
// Remap our associative array into just an array.
var networkHistoryKeys = Object.keys(networkHistory);
networkHistoryKeys.sort();
// Send each individually, this should look cleaner than waiting for one big array to transfer.
for (var i = 0; i < networkHistoryKeys.length; i++) {
client.emit('add', [networkHistory[networkHistoryKeys[i]]]);
}
}, 1);
// Attach our listeners.
client.on('disconnect', function() {
connectedClients -= 1;
logger.log('info', 'Client disconnected, total clients: %d', connectedClients);
});
client.on('requestHistoryGraph', function() {
// Send them the big 24h graph.
client.emit('historyGraph', graphData);
});
});
startMainLoop();
});
}
logger.log('info', 'Booting, please wait...');
if (config.logToDatabase) {
// Setup our database.
db.setup();
var timestamp = util.getCurrentTimeMs();
db.queryPings(24 * 60 * 60 * 1000, function(data) {
graphData = util.convertPingsToGraph(data);
logger.log('info', 'Queried and parsed ping history in %sms', util.getCurrentTimeMs() - timestamp);
startServices();
});
} else {
logger.warn('Database logging is not enabled. You can enable it by setting "logToDatabase" to true in config.json. This requires sqlite3 to be installed.');
}
server.start(function() {
// Track how many people are currently connected.
server.io.on('connect', function(client) {
// If we haven't sent out at least one round of pings, disconnect them for now.
if (Object.keys(networkHistory).length < config.servers.length) {
client.disconnect();
return;
}
// We're good to connect them!
connectedClients += 1;
logger.log('info', 'Accepted connection: %s, total clients: %d', client.request.connection.remoteAddress, connectedClients);
setTimeout(function() {
// Send them our previous data, so they have somewhere to start.
client.emit('updateMojangServices', mojang.toMessage());
// Remap our associative array into just an array.
var networkHistoryKeys = Object.keys(networkHistory);
networkHistoryKeys.sort();
// Send each individually, this should look cleaner than waiting for one big array to transfer.
for (var i = 0; i < networkHistoryKeys.length; i++) {
client.emit('add', [networkHistory[networkHistoryKeys[i]]]);
}
}, 1);
// Attach our listeners.
client.on('disconnect', function(client) {
connectedClients -= 1;
logger.log('info', 'Client disconnected, total clients: %d', connectedClients);
});
});
startMainLoop();
});
startServices();
}

@ -177,3 +177,47 @@ h3 {
height: 42px;
width: 42px;
}
/* The big graph */
#big-graph, #big-graph-controls, #big-graph-checkboxes {
width: 1000px;
margin: 15px auto 0 auto;
}
#big-graph-checkboxes > table {
width: 100%;
}
#big-graph-controls {
margin: 10px auto;
}
#big-graph-controls a {
text-decoration: none;
color: inherit;
text-transform: uppercase;
border-bottom: 1px dashed #FFF;
font-size: 16px;
}
#big-graph-controls a:hover {
border-bottom: 1px dashed transparent;
cursor: pointer;
}
/* Basic elements */
.button {
background: #3498db;
border-radius: 2px;
text-shadow: 0 0 0 #000;
width: 85px;
font-size: 16px;
padding: 5px 10px;
margin: 0 auto;
}
.button:hover {
background: #ecf0f1;
color: #3498db;
cursor: pointer;
}

@ -34,6 +34,33 @@
</div>
<div id="big-graph"></div>
<div id="big-graph-controls" style="display: none;">
<span style="text-align: center; display: block;">
<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
</span>
<div id="big-graph-controls-drawer" style="display: none;">
<div id="big-graph-checkboxes"></div>
<br />
<span style="text-align: center; display: block; margin-bottom: 15px;">
<span onclick="setAllGraphVisibility(true);" class="button">Show All</span>
<span onclick="setAllGraphVisibility(false);" class="button">Hide All</span>
</span>
</div>
</div>
<div id="server-container" class="container"></div>
<div id="quick-jump-container"></div>

@ -30,12 +30,46 @@ var smallChartOptions = {
]
};
var bigChartOptions = {
series: {
shadowSize: 0
},
xaxis: {
font: {
color: "#E3E3E3"
},
show: false
},
yaxis: {
show: true,
tickSize: 2000,
tickLength: 10,
tickFormatter: function(value) {
return formatNumber(value);
},
font: {
color: "#E3E3E3"
},
labelWidth: -5
},
grid: {
hoverable: true,
color: "#696969"
},
legend: {
show: false
}
};
var lastMojangServiceUpdate;
var graphs = {};
var lastLatencyEntries = {};
var lastPlayerEntries = {};
var historyPlot;
var displayedGraphData;
var hiddenGraphData = [];
// Generate (and set) the HTML that displays Mojang status.
function updateMojangServices() {
if (!lastMojangServiceUpdate) {
@ -109,20 +143,7 @@ function updateServerStatus(lastEntry) {
newStatus += playerDifference + ')</span>';
}
/*if (lastLatencyEntries[info.name]) {
newStatus += '<br />';
var latencyDifference = lastLatencyEntries[info.name] - result.latency;
if (latencyDifference >= 0) {
newStatus += '+';
}
newStatus += latencyDifference + 'ms';
}*/
lastPlayerEntries[info.name] = result.players.online;
lastLatencyEntries[info.name] = result.latency;
div.html(newStatus);
} else {
@ -165,8 +186,39 @@ function sortServers() {
}
}
function safeName(name) {
return name.replace(/ /g, '');
function setAllGraphVisibility(visible) {
if (visible) {
var keys = Object.keys(hiddenGraphData);
for (var i = 0; i < keys.length; i++) {
displayedGraphData[keys[i]] = hiddenGraphData[keys[i]];
}
hiddenGraphData = [];
} else {
var keys = Object.keys(displayedGraphData);
for (var i = 0; i < keys.length; i++) {
hiddenGraphData[keys[i]] = displayedGraphData[keys[i]];
}
displayedGraphData = [];
}
$('.graph-control').each(function(index, item) {
item.checked = visible;
});
historyPlot.setData(convertGraphData(displayedGraphData));
historyPlot.setupGrid();
historyPlot.draw();
}
function toggleControlsDrawer() {
var div = $('#big-graph-controls-drawer');
div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
}
$(document).ready(function() {
@ -181,6 +233,10 @@ $(document).ready(function() {
socket.on('connect', function() {
$('#tagline-text').text('Loading...');
if (!isMobileBrowser()) {
socket.emit('requestHistoryGraph');
}
});
socket.on('disconnect', function() {
@ -196,11 +252,66 @@ $(document).ready(function() {
$('#tagline-text').text('Disconnected! Refresh?');
lastPlayerEntries = {};
lastLatencyEntries = {};
graphs = {};
$('#server-container').html('');
$('#quick-jump-container').html('');
$('#big-graph').html('');
$('#big-graph-checkboxes').html('');
$('#big-graph-controls').css('display', 'none');
});
socket.on('historyGraph', function(rawData) {
displayedGraphData = rawData;
$('#big-graph').css('height', '500px');
historyPlot = $.plot('#big-graph', convertGraphData(rawData), bigChartOptions);
$('#big-graph').bind('plothover', handlePlotHover);
var keys = Object.keys(rawData);
var sinceBreak = 0;
var html = '<table><tr>';
keys.sort();
for (var i = 0; i < keys.length; i++) {
html += '<td><input type="checkbox" class="graph-control" id="graph-controls" data-target-network="' + keys[i] + '" checked=checked> ' + keys[i] + '</input></td>';
if (sinceBreak >= 3) {
sinceBreak = 0;
html += '</tr><tr>';
} else {
sinceBreak++;
}
}
$('#big-graph-checkboxes').append(html + '</tr></table>');
$('#big-graph-controls').css('display', 'block');
});
socket.on('updateHistoryGraph', function(rawData) {
var targetGraphData = displayedGraphData[rawData.ip];
// If it's not in our display group, push it to the hidden group instead so it can be restored and still be up to date.
if (!targetGraphData) {
targetGraphData = hiddenGraphData[rawData.ip];
}
if (targetGraphData.length > 24 * 60) {
targetGraphData.shift();
}
targetGraphData.push([rawData.timestamp, rawData.players]);
historyPlot.setData(convertGraphData(displayedGraphData));
historyPlot.setupGrid();
historyPlot.draw();
});
socket.on('add', function(servers) {
@ -223,10 +334,8 @@ $(document).ready(function() {
if (lastEntry.error) {
lastPlayerEntries[info.name] = 0;
lastLatencyEntries[info.name] = 0;
} else if (lastEntry.result) {
lastPlayerEntries[info.name] = lastEntry.result.players.online;
lastLatencyEntries[info.name] = lastEntry.result.latency;
}
$('<div/>', {
@ -265,15 +374,7 @@ $(document).ready(function() {
updateServerStatus(lastEntry);
$('#chart_' + safeName(info.name)).bind('plothover', function(event, pos, item) {
if (item) {
renderTooltip(item.pageX + 5, item.pageY + 5, getTimestamp(item.datapoint[0] / 1000) + '\
<br />\
' + formatNumber(item.datapoint[1]) + ' Players');
} else {
hideTooltip();
}
});
$('#chart_' + safeName(info.name)).bind('plothover', handlePlotHover);
}
sortServers();
@ -323,7 +424,7 @@ $(document).ready(function() {
sortServersTask = setInterval(function() {
sortServers();
}, 30 * 1000);
}, 10 * 1000);
// Our super fancy scrolly thing!
$(document).on('click', '.quick-jump-icon', function(e) {
@ -334,4 +435,25 @@ $(document).ready(function() {
scrollTop: target.offset().top
}, 100);
});
$(document).on('click', '.graph-control', function(e) {
var serverIp = $(this).attr('data-target-network');
var checked = $(this).attr('checked');
// Restore it, or delete it - either works.
if (!this.checked) {
hiddenGraphData[serverIp] = displayedGraphData[serverIp];
delete displayedGraphData[serverIp];
} else {
displayedGraphData[serverIp] = hiddenGraphData[serverIp];
delete hiddenGraphData[serverIp];
}
historyPlot.setData(convertGraphData(displayedGraphData));
historyPlot.setupGrid();
historyPlot.draw();
});
});

@ -10,6 +10,10 @@ function getTimestamp(ms, timeOnly) {
return date.toLocaleTimeString();
}
function safeName(name) {
return name.replace(/ /g, '');
}
function renderTooltip(x, y, html) {
tooltip.html(html).css({
top: y,
@ -25,6 +29,58 @@ function formatNumber(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
// From http://detectmobilebrowsers.com/
function isMobileBrowser() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function handlePlotHover(event, pos, item) {
if (item) {
var text = getTimestamp(item.datapoint[0] / 1000) + '\
<br />\
' + formatNumber(item.datapoint[1]) + ' Players';
if (item.series && item.series.label) {
text = item.series.label + '<br />' + text;
}
renderTooltip(item.pageX + 5, item.pageY + 5, text);
} else {
hideTooltip();
}
}
function convertGraphData(rawData) {
var data = [];
var keys = Object.keys(rawData);
for (var i = 0; i < keys.length; i++) {
data.push({
data: rawData[keys[i]],
yaxis: 1,
label: keys[i],
color: stringToColor(keys[i])
});
}
return data;
}
function stringToColor(base) {
var hash;
for (var i = 0, hash = 0; i < base.length; i++) {
hash = base.charCodeAt(i) + ((hash << 5) - hash);
}
color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
return '#' + Array(6 - color.length + 1).join('0') + color;
}
function msToTime(timer) {
var milliseconds = timer % 1000;
timer = (timer - milliseconds) / 1000;

@ -110,11 +110,6 @@
"ip": "play.gotpvp.com",
"type": "PC"
},
{
"name": "MCLegends",
"ip": "play.mc-legends.com",
"type": "PC"
},
{
"name": "Rewinside",
"ip": "mc.rewinside.tv",
@ -190,8 +185,8 @@
"rates": {
"upateMojangStatus": 5000,
"mojangStatusTimeout": 3500,
"pingAll": 3000,
"connectTimeout": 2500
"pingAll": 2000,
"connectTimeout": 1500
},
"logToDatabase": false
"logToDatabase": true
}

@ -1,3 +1,5 @@
var util = require('./util');
exports.setup = function() {
var sqlite = require('sqlite3');
@ -10,6 +12,21 @@ exports.setup = function() {
exports.log = function(ip, timestamp, playerCount) {
var insertStatement = db.prepare('INSERT INTO pings (timestamp, ip, playerCount) VALUES (?, ?, ?)');
insertStatement.run(timestamp, ip, playerCount);
db.serialize(function() {
insertStatement.run(timestamp, ip, playerCount);
});
insertStatement.finalize();
};
exports.queryPings = function(duration, callback) {
var currentTime = util.getCurrentTimeMs();
db.all("SELECT * FROM pings WHERE timestamp >= ? AND timestamp <= ?", [
currentTime - duration,
currentTime
], function(err, data) {
callback(data);
});
};
};

@ -1,3 +1,66 @@
var config = require('../config.json');
// Checks if we have a server in config.json with the IP.
function serverWithIpExists(ip) {
for (var i = 0; i < config.servers.length; i++) {
var entry = config.servers[i];
if (entry.ip === ip) {
return true;
}
}
return false;
}
// This method is a monstrosity.
// Since we loaded ALL pings from the database, we need to filter out the pings so each entry is a minute apart.
// This is done by iterating over the list, since the time between each ping can be completely arbitrary.
function trimUselessPings(data) {
var keys = Object.keys(data);
var keysToRemove = [];
for (var i = 0; i < keys.length; i++) {
// Don't bother we servers we deleted from config.json
if (!serverWithIpExists(keys[i])) {
keysToRemove.push(keys[i]);
continue;
}
var listing = data[keys[i]];
var lastTimestamp = 0;
var filteredListing = [];
for (var x = 0; x < listing.length; x++) {
var entry = listing[x];
// 0 is the index of the timestamp.
// See the convertPingsToGraph method.
if (entry[0] - lastTimestamp >= 60 * 1000) {
// This second check tries to smooth out randomly dropped pings.
// By default we only want entries that are online (playerCount > 0).
// This way we'll keep looking forward until we find one that is online.
// However if we can't find one within a reasonable timeframe, select the sucky one.
if (entry[0] - lastTimestamp >= 120 * 1000 || entry[1] > 0) {
filteredListing.push(entry);
lastTimestamp = entry[0];
}
}
}
data[keys[i]] = filteredListing;
}
// Delete data for any networks we don't care about anymore.
for (var i = 0; i < keysToRemove.length; i++) {
delete data[keysToRemove[i]];
}
}
exports.getCurrentTimeMs = function() {
return new Date().getTime();
};
@ -8,4 +71,23 @@ exports.setIntervalNoDelay = function(func, delay) {
func();
return task;
};
exports.convertPingsToGraph = function(sqlData) {
var graphData = {};
for (var i = 0; i < sqlData.length; i++) {
var entry = sqlData[i];
if (!graphData[entry.ip]) {
graphData[entry.ip] = [];
}
graphData[entry.ip].push([entry.timestamp, entry.playerCount]);
}
// Break it into minutes.
trimUselessPings(graphData);
return graphData;
};