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: 1 year 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>

For more information send a message to info at phpclasses dot org.