GOMODULES/fiber
1
0
Fork 0
mirror of https://github.com/gofiber/fiber.git synced 2025-05-31 11:52:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #849 from Fenny/master

Browse Source 
📈 fix response time
This commit is contained in:
Fenny 2020-09-29 04:03:38 +02:00 committed by GitHub
commit d3e53e90f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 128 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
middleware/monitor/index.go
View File

@ -3,13 +3,16 @@ package monitor
var index = []byte(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
<title>Fiber Monitor</title>
<style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
<title>Fiber Monitor</title>
<style>
body {
margin: 0;
font: 16px / 1.6 'Roboto', sans-serif;
@ -67,58 +70,58 @@ var index = []byte(`<!DOCTYPE html>
height: 180px;
}
</style>
</head>
</head>
<body>
<section class="wrapper">
<div class="title">
<h1>Fiber Status Monitor</h1>
</div>
<section class="charts">
<div class="row">
<div class="column">
<div class="metric">CPU Usage</div>
<h2 id="cpuMetric">0.00%</h2>
</div>
<div class="column">
<canvas id="cpuChart"></canvas>
</div>
<body>
<section class="wrapper">
<div class="title">
<h1>Fiber Monitor</h1>
</div>
<div class="row">
<div class="column">
<div class="metric">Memory Usage</div>
<h2 id="ramMetric">0.00 MB</h2>
<section class="charts">
<div class="row">
<div class="column">
<div class="metric">CPU Usage</div>
<h2 id="cpuMetric">0.00%</h2>
</div>
<div class="column">
<canvas id="cpuChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="ramChart"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<div class="metric">Response Time</div>
<h2 id="rtimeMetric">0ms</h2>
<div class="row">
<div class="column">
<div class="metric">Memory Usage</div>
<h2 id="ramMetric">0.00 MB</h2>
</div>
<div class="column">
<canvas id="ramChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="rtimeChart"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<div class="metric">Open Connections</div>
<h2 id="connsMetric">0</h2>
<div class="row">
<div class="column">
<div class="metric">Response Time</div>
<h2 id="rtimeMetric">0ms</h2>
</div>
<div class="column">
<canvas id="rtimeChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="connsChart"></canvas>
<div class="row">
<div class="column">
<div class="metric">Open Connections</div>
<h2 id="connsMetric">0</h2>
</div>
<div class="column">
<canvas id="connsChart"></canvas>
</div>
</div>
</div>
</section>
</section>
</section>
<script>
<script>
function formatBytes(bytes, decimals = 1) {
if (bytes === 0) return '0 Bytes';
@ -204,18 +207,18 @@ var index = []byte(`<!DOCTYPE html>
// })
// }
function update(json) {
function update(json, rtime) {
cpu = json.pid.cpu.toFixed(1);
cpuOS = json.os.cpu.toFixed(1);
cpuMetric.innerHTML = cpu + '% <span>' + cpuOS + '%</span>';
ramMetric.innerHTML = formatBytes(json.pid.ram) + ' <span>' + formatBytes(json.os.ram) + '</span>';
rtimeMetric.innerHTML = json.rtime + 'ms';
rtimeMetric.innerHTML = rtime + 'ms';
connsMetric.innerHTML = json.conns;
cpuChart.data.datasets[0].data.push(cpu);
ramChart.data.datasets[0].data.push((json.pid.ram / 1e6).toFixed(2));
rtimeChart.data.datasets[0].data.push(json.rtime);
rtimeChart.data.datasets[0].data.push(rtime);
connsChart.data.datasets[0].data.push(json.conns);
const timestamp = new Date().getTime();
@ -235,20 +238,27 @@ var index = []byte(`<!DOCTYPE html>
}
function fetchJSON() {
var t1 = ''
var t0 = performance.now()
fetch(window.location.href, {
headers: {
'Accept': 'application/json'
},
credentials: 'same-origin'
})
.then(res => res.json())
.then(update)
.then(res => {
t1 = performance.now()
return res.json()
})
.then(res => {
update(res, Math.round(performance.now() - t0))
})
.catch(console.error);
setTimeout(fetchJSON, 750)
}
fetchJSON()
</script>
</body>
</body>
</html>`)

118
middleware/monitor/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
<title>Fiber Monitor</title>
<style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
<title>Fiber Monitor</title>
<style>
body {
margin: 0;
font: 16px / 1.6 'Roboto', sans-serif;
@ -65,58 +68,58 @@
height: 180px;
}
</style>
</head>
</head>
<body>
<section class="wrapper">
<div class="title">
<h1>Fiber Status Monitor</h1>
</div>
<section class="charts">
<div class="row">
<div class="column">
<div class="metric">CPU Usage</div>
<h2 id="cpuMetric">0.00%</h2>
</div>
<div class="column">
<canvas id="cpuChart"></canvas>
</div>
<body>
<section class="wrapper">
<div class="title">
<h1>Fiber Monitor</h1>
</div>
<div class="row">
<div class="column">
<div class="metric">Memory Usage</div>
<h2 id="ramMetric">0.00 MB</h2>
<section class="charts">
<div class="row">
<div class="column">
<div class="metric">CPU Usage</div>
<h2 id="cpuMetric">0.00%</h2>
</div>
<div class="column">
<canvas id="cpuChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="ramChart"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<div class="metric">Response Time</div>
<h2 id="rtimeMetric">0ms</h2>
<div class="row">
<div class="column">
<div class="metric">Memory Usage</div>
<h2 id="ramMetric">0.00 MB</h2>
</div>
<div class="column">
<canvas id="ramChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="rtimeChart"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<div class="metric">Open Connections</div>
<h2 id="connsMetric">0</h2>
<div class="row">
<div class="column">
<div class="metric">Response Time</div>
<h2 id="rtimeMetric">0ms</h2>
</div>
<div class="column">
<canvas id="rtimeChart"></canvas>
</div>
</div>
<div class="column">
<canvas id="connsChart"></canvas>
<div class="row">
<div class="column">
<div class="metric">Open Connections</div>
<h2 id="connsMetric">0</h2>
</div>
<div class="column">
<canvas id="connsChart"></canvas>
</div>
</div>
</div>
</section>
</section>
</section>
<script>
<script>
function formatBytes(bytes, decimals = 1) {
if (bytes === 0) return '0 Bytes';
@ -202,18 +205,18 @@
// })
// }
function update(json) {
function update(json, rtime) {
cpu = json.pid.cpu.toFixed(1);
cpuOS = json.os.cpu.toFixed(1);
cpuMetric.innerHTML = cpu + '% <span>' + cpuOS + '%</span>';
ramMetric.innerHTML = formatBytes(json.pid.ram) + ' <span>' + formatBytes(json.os.ram) + '</span>';
rtimeMetric.innerHTML = json.rtime + 'ms';
rtimeMetric.innerHTML = rtime + 'ms';
connsMetric.innerHTML = json.conns;
cpuChart.data.datasets[0].data.push(cpu);
ramChart.data.datasets[0].data.push((json.pid.ram / 1e6).toFixed(2));
rtimeChart.data.datasets[0].data.push(json.rtime);
rtimeChart.data.datasets[0].data.push(rtime);
connsChart.data.datasets[0].data.push(json.conns);
const timestamp = new Date().getTime();
@ -233,20 +236,27 @@
}
function fetchJSON() {
var t1 = ''
var t0 = performance.now()
fetch(window.location.href, {
headers: {
'Accept': 'application/json'
},
credentials: 'same-origin'
})
.then(res => res.json())
.then(update)
.then(res => {
t1 = performance.now()
return res.json()
})
.then(res => {
update(res, Match.Round(performance.now() - t0))
})
.catch(console.error);
setTimeout(fetchJSON, 750)
}
fetchJSON()
</script>
</body>
</body>
</html>

2
middleware/monitor/monitor.go
View File

@ -14,7 +14,6 @@ import (
type stats struct {
PID statsPID `json:"pid"`
OS statsOS `json:"os"`
Rtime int64 `json:"rtime"`
Conns uint32 `json:"conns"`
}
@ -76,7 +75,6 @@ func New() fiber.Handler {
data.PID.RAM = monitPidRam
data.OS.CPU = monitOsCpu
data.OS.RAM = monitOsRam
data.Rtime = (time.Now().UnixNano() - c.Context().Time().UnixNano()) / 1000000
data.Conns = c.App().Server().GetCurrentConcurrency()
mutex.Unlock()
return c.Status(fiber.StatusOK).JSON(data)