PHP Classes

File: index.html

Recommend this page to a friend!
  Classes of Istvan Dobrentei  >  PHP Server Monitor Script  >  index.html  >  Download  
File: index.html
Role: Auxiliary data
Content type: text/plain
Description: Server monitoring page
Class: PHP Server Monitor Script
Check if a server is working well using Websockets
Author: By
Last change:
Date: 4 years ago
Size: 3,184 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="Content-Security-Policy" content="connect-src 'self'"> --> <title>Live Server Monitoring</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> const Monitoring = function(){ var socket = null; var loadData = []; this.start = function(){ console.log('start'); var ip = document.getElementById('ipAddress').value; var port = document.getElementById('portNumber').value; socket = new WebSocket('ws://' + ip + ':' + port); var that = this; socket.onmessage = function(e) { var json = JSON.parse(e.data); var item = [ [parseInt(json.when.hour), parseInt(json.when.min), parseInt(json.when.sec)], json.load ]; loadData.push(item); that.drawCurveTypes(); }; } this.stop = function(){ console.log('stop'); socket.close(); } this.clear = function(){ console.log('clear'); loadData = []; this.drawCurveTypes(); } this.drawCurveTypes = function() { var ldata = new google.visualization.DataTable(); ldata.addColumn('timeofday', 'X'); ldata.addColumn('number', 'Load'); ldata.addRows(loadData); var options = { hAxis: { title: 'Time' }, vAxis: { title: 'Server Load' }, series: { 1: {curveType: 'function'} } }; var chart = new google.visualization.LineChart(document.getElementById('load_chart_div')); chart.draw(ldata, options); } } var monitor = new Monitoring(); google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(monitor.drawCurveTypes); </script> </head> <body> IpAddress: <input id="ipAddress" type="text" value="127.0.0.1" size="10" /> PortNumber: <input id="portNumber" type="text" value="8080" size="5" /> Token: <input id="token" type="text" value="" /> <button id="startMonitorEvent" onclick="monitor.start()">Start Monitoring</button> <button id="stopMonitorEvent" onclick="monitor.stop()">Stop Monitoring</button> <button id="clearMonitorEvent" onclick="monitor.clear()">Clear Data</button> <div id="load_chart_div"></div> </body> </html>