diff --git a/.gitignore b/.gitignore index f7bf2dc..19602f6 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ node_modules/ *.log .idea/ production/ -database.sql \ No newline at end of file +database.sql +database.sql-journal \ No newline at end of file diff --git a/app.js b/app.js index 53f8886..dfd65d4 100644 --- a/app.js +++ b/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(); -}); \ No newline at end of file + startServices(); +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index ea8706e..68bc531 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; +} \ No newline at end of file diff --git a/assets/html/index.html b/assets/html/index.html index abf0fb3..423b280 100644 --- a/assets/html/index.html +++ b/assets/html/index.html @@ -34,6 +34,33 @@ +
+ + +
diff --git a/assets/js/site.js b/assets/js/site.js index 0f198d5..fe0b528 100644 --- a/assets/js/site.js +++ b/assets/js/site.js @@ -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 + ')'; } - /*if (lastLatencyEntries[info.name]) { - newStatus += '
'; - - 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 = ''; + + keys.sort(); + + for (var i = 0; i < keys.length; i++) { + html += ''; + + if (sinceBreak >= 3) { + sinceBreak = 0; + + html += ''; + } else { + sinceBreak++; + } + } + + $('#big-graph-checkboxes').append(html + '
' + keys[i] + '
'); + $('#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; } $('
', { @@ -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) + '\ -
\ - ' + 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(); + }); }); diff --git a/assets/js/util.js b/assets/js/util.js index 35875e5..5184d55 100644 --- a/assets/js/util.js +++ b/assets/js/util.js @@ -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) + '\ +
\ + ' + formatNumber(item.datapoint[1]) + ' Players'; + + if (item.series && item.series.label) { + text = item.series.label + '
' + 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; diff --git a/config.json b/config.json index 07b3f14..5bc77d9 100644 --- a/config.json +++ b/config.json @@ -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 } diff --git a/lib/database.js b/lib/database.js index 90bc86b..08da012 100644 --- a/lib/database.js +++ b/lib/database.js @@ -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); + }); }; }; \ No newline at end of file diff --git a/lib/util.js b/lib/util.js index c8aa50a..e730e60 100644 --- a/lib/util.js +++ b/lib/util.js @@ -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; }; \ No newline at end of file