:sparkles: 性能实时监控

app/log/pref_live.php

@@ -0,0 +1,37 @@
+<?php
+require_once("../config.php");
+require_once("../redis/function.php");
+
+
+if(isset($_GET["item"])){
+    $item = $_GET["item"];
+}else{
+    return 1;
+}
+if(isset($_GET["api"])){
+    $api = $_GET["api"];
+}else{
+    $api = "all";
+}
+    $times = 10;
+    $key= "pref-s/";
+    $redis = redis_connect();
+    $currTime = time();
+    if($redis){
+        $begin = $currTime - $times - 1;
+        $value = 0;
+        for ($i=$begin; $i <= $currTime; $i++) { 
+            $keyAll = $key.$api."/".$i;
+            if($redis->exists($keyAll)){
+                if($item == 'average'){
+                    $value += intval($redis->hGet($keyAll,'delay') / $redis->hGet($keyAll,'count'));
+                }else{
+                    $value += (int)$redis->hGet($keyAll,$item);
+                }
+            }
+        }
+        $value = $value/$times;
+        echo $value;
+    }else{
+        echo 'redis error';
+    }

app/log/pref_log.php

@@ -1,8 +1,29 @@
 <?php
 require_once("../config.php");
+require_once("../redis/function.php");
+
+
 $logstart = microtime(true)*1000;
+$iTime = time();
 $strstart = date("h:i:sa");
 function PrefLog(){
+    $delay = microtime(true)*1000-$GLOBALS['logstart'];
+    $redis = redis_connect();
+    $timeMinute = intval(time()/60);
+    $timeSecond = time();
+    if($redis){
+            $key= "pref/";
+            $keyAll = $key."all/".$timeMinute;
+            UpdateCache($redis,$keyAll,$delay);
+            $keyApi = $key.$_SERVER['PHP_SELF']."/".$timeMinute;
+            UpdateCache($redis,$keyApi,$delay);
+
+            $key= "pref-s/";
+            $keyAll = $key."all/".$timeSecond;
+            UpdateCache($redis,$keyAll,$delay,30);
+            $keyApi = $key.$_SERVER['PHP_SELF']."/".$timeSecond;
+            UpdateCache($redis,$keyApi,$delay,30);
+    }
 	$file = fopen(_DIR_LOG_."/pref_".date("Y-m-d").".log","a");
 	if($file){
 		fputcsv($file,[$_SERVER['PHP_SELF'],$GLOBALS['strstart'],sprintf("%d",microtime(true)*1000-$GLOBALS['logstart']),$_SERVER['REMOTE_ADDR']]);
@@ -10,5 +31,17 @@ function PrefLog(){
 	}
 }
 
+function UpdateCache($redis,$key,$delay,$expire=3600){
+
+        if($redis->exists($key)){
+            $redis->hSet($key,"count",$redis->hGet($key,"count")+1);
+            $redis->hSet($key,"delay",$redis->hGet($key,"delay")+$delay);
+        }else{
+            #没有，创建
+            $redis->hSet($key,"count",1);
+            $redis->hSet($key,"delay",$delay);
+            $redis->expire($key,$expire);
+        }
+}
 
 ?>

app/log/pref_realtime_get.php

@@ -0,0 +1,37 @@
+<?php
+require_once("../config.php");
+require_once("../redis/function.php");
+
+echo "Time, Value".PHP_EOL;
+if(isset($_GET["item"])){
+    $item = $_GET["item"];
+}else{
+    return 1;
+}
+if(isset($_GET["api"])){
+    $api = $_GET["api"];
+}else{
+    $api = "all";
+}
+    $key= "pref/";
+    $redis = redis_connect();
+    $currMinute = intval(time()/60);
+    if($redis){
+        $begin = $currMinute - 60;
+        for ($i=$begin; $i < $currMinute; $i++) { 
+            $keyAll = $key.$api."/".$i;
+            if($redis->exists($keyAll)){
+                if($item == 'average'){
+                    $value = $redis->hGet($keyAll,'delay') / $redis->hGet($keyAll,'count');
+                }else{
+                    $value = $redis->hGet($keyAll,$item);
+                }
+            }else{
+                $value = 0;
+            }
+            $time = date("Y-m-d\TH:i:s.u\Z",$i*60);
+            echo "{$time},{$value}".PHP_EOL;
+        }
+    }else{
+        echo "Time, Value";
+    }

app/log/showrealtime.js

@@ -0,0 +1,154 @@
+var defaultData = './pref_realtime_get.php?api=all&item=count';
+var urlInput = document.getElementById('fetchURL');
+var pollingCheckbox = document.getElementById('enablePolling');
+var pollingInput = document.getElementById('pollingTime');
+
+function createChart(div,title,api,item) {
+    Highcharts.chart(div, {
+        chart: {
+            type: 'spline'
+        },
+        title: {
+            text: title
+        },
+        accessibility: {
+            announceNewData: {
+                enabled: true,
+                minAnnounceInterval: 15000,
+                announcementFormatter: function (allSeries, newSeries, newPoint) {
+                    if (newPoint) {
+                        return 'New point added. Value: ' + newPoint.y;
+                    }
+                    return false;
+                }
+            }
+        },
+        data: {
+            csvURL: './pref_realtime_get.php?api='+api+'&item='+item,
+            enablePolling: pollingCheckbox.checked === true,
+            dataRefreshRate: 60
+        }
+    });
+
+
+}
+
+
+// We recreate instead of using chart update to make sure the loaded CSV
+// and such is completely gone.
+pollingCheckbox.onchange =  createChart;
+
+// Create the chart
+createChart("chart-1",'总请求数','all','count');
+createChart("chart-2",'总执行时间','all','delay');
+createChart("chart-3",'平均执行时间','all','average');
+create_live("chart-4");
+function create_live(container){
+    Highcharts.chart(container, {
+
+    chart: {
+        type: 'gauge',
+        plotBackgroundColor: null,
+        plotBackgroundImage: null,
+        plotBorderWidth: 0,
+        plotShadow: false
+    },
+
+    title: {
+        text: 'Speedometer'
+    },
+
+    pane: {
+        startAngle: -150,
+        endAngle: 150,
+        background: [{
+            backgroundColor: {
+                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                stops: [
+                    [0, '#FFF'],
+                    [1, '#333']
+                ]
+            },
+            borderWidth: 0,
+            outerRadius: '109%'
+        }, {
+            backgroundColor: {
+                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                stops: [
+                    [0, '#333'],
+                    [1, '#FFF']
+                ]
+            },
+            borderWidth: 1,
+            outerRadius: '107%'
+        }, {
+            // default background
+        }, {
+            backgroundColor: '#DDD',
+            borderWidth: 0,
+            outerRadius: '105%',
+            innerRadius: '103%'
+        }]
+    },
+
+    // the value axis
+    yAxis: {
+        min: 0,
+        max: 5000,
+
+        minorTickInterval: 'auto',
+        minorTickWidth: 1,
+        minorTickLength: 10,
+        minorTickPosition: 'inside',
+        minorTickColor: '#666',
+
+        tickPixelInterval: 30,
+        tickWidth: 2,
+        tickPosition: 'inside',
+        tickLength: 10,
+        tickColor: '#666',
+        labels: {
+            step: 2,
+            rotation: 'auto'
+        },
+        title: {
+            text: 'km/h'
+        },
+        plotBands: [{
+            from: 0,
+            to: 2000,
+            color: '#55BF3B' // green
+        }, {
+            from: 2000,
+            to: 3500,
+            color: '#DDDF0D' // yellow
+        }, {
+            from: 3500,
+            to: 5000,
+            color: '#DF5353' // red
+        }]
+    },
+
+    series: [{
+        name: 'Speed',
+        data: [80],
+        tooltip: {
+            valueSuffix: ' ms/s'
+        }
+    }]
+
+},
+// Add some life
+function (chart) {
+    if (!chart.renderer.forExport) {
+        setInterval(function () {
+            $.get("./pref_live.php?api=all&item=average",function(data){
+                var point = chart.series[0].points[0];
+                newVal = parseInt(data);
+                point.update(newVal);
+            });
+        }, 2000);
+    }
+});
+
+}

app/log/showrealtime.php

@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script src="../../node_modules/jquery/dist/jquery.js"></script>
+
+	<style type="text/css">
+
+	.highcharts-figure, .highcharts-data-table table {
+		flex:1;
+		min-width: 220px; 
+		max-width: 100%;
+		margin: 1em auto;
+	}
+
+	.highcharts-data-table table {
+		font-family: Verdana, sans-serif;
+		border-collapse: collapse;
+		border: 1px solid #EBEBEB;
+		margin: 10px auto;
+		text-align: center;
+		width: 100%;
+		max-width: 500px;
+	}
+	.highcharts-data-table caption {
+		padding: 1em 0;
+		font-size: 1.2em;
+		color: #555;
+	}
+	.highcharts-data-table th {
+		font-weight: 600;
+		padding: 0.5em;
+	}
+	.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
+		padding: 0.5em;
+	}
+	.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
+		background: #f8f8f8;
+	}
+	.highcharts-data-table tr:hover {
+		background: #f1f7ff;
+	}
+	.chart_head_1 {
+		text-align: center;
+		font-size: x-large;
+		margin-bottom: 0;
+		font-weight: bold;
+	}
+	.highcharts-data-label {
+		font-size: small;
+	}
+	</style>
+
+
+
+<script src="../../node_modules/highcharts/highcharts.js"></script>
+<script src="../../node_modules/highcharts/highcharts-more.js"></script>
+<script src="../../node_modules/highcharts/modules/exporting.js"></script>
+<script src="../../node_modules/highcharts/modules/export-data.js"></script>
+<script src="../../node_modules/highcharts/modules/accessibility.js"></script>
+
+	<script src="../../node_modules/highcharts/modules/data.js"></script>
+	<script src="../../node_modules/highcharts/modules/exporting.js"></script>
+
+</head>
+<body>
+<h2>实时监控</h2>
+<div class="ld-row" style="display:none;">
+	<label class="ld-label">
+		Enable Polling
+	</label>
+	<input type="checkbox" checked="checked" id="enablePolling"/>
+</div>
+<div style="display:flex;">
+    <div id='chart-1'></div>
+    <div id='chart-2'></div>
+</div>
+<div style="display:flex;">
+    <div id='chart-3'></div>
+    <div id='chart-4'></div>
+</div>
+<div id='chart-3a'></div>
+<div id='chart-5'></div>
+
+<div id="chart-6"></div>
+
+
+<script src="./showrealtime.js"></script>
+</body>
+</html>