vinchent/gin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better stats in realtime-advanced

Browse Source
This commit is contained in:
Manu Mtz-Almeida
2015-05-14 18:16:00 +02:00
parent 286d775de6
commit eed6d93095
5 changed files with 61 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/realtime-advanced/resources/room_login.templ.html
View File

@ -62,7 +62,7 @@
<p>The chat and the charts data is provided in realtime using the SSE implemention of <a href="https://github.com/gin-gonic/gin/blob/15b0c49da556d58a3d934b86e3aa552ff224026d/examples/realtime-chat/main.go#L23-L32">Gin Framework</a>.</p>
<div class="row">
<div class="col-md-8">
<div id="chat-scroll" style="overflow-y:scroll; overflow-x:scroll; height:270px">
<div id="chat-scroll" style="overflow-y:scroll; overflow-x:scroll; height:290px">
<table id="table-style" class="table" data-show-header="false">
<thead>
<tr>
@ -97,8 +97,12 @@
{{end}}
</div>
<div class="col-md-4">
<h3>Inbound/Outbound</h3>
<div id="messagesChart" class="epoch category20c"></div>
<div id="messagesChart" class="epoch category10"></div>
<p>
<span style="font-size:20px; color:#1f77b4">◼︎</span> Users<br>
<span style="font-size:20px; color:#ff7f0e">◼︎</span> Inbound messages / sec<br>
<span style="font-size:20px; color:#2ca02c">◼︎</span> Outbound messages / sec<br>
</p>
</div>
</div>
</div>
@ -106,22 +110,24 @@
<div class="container">
<div class="row">
<h2>Realtime server Go stats</h2>
<div class="col-md-4">
<h3>Number of Goroutines</h3>
<div class="col-md-6">
<h3>Memory usage</h3>
<p>
<div id="goroutinesChart" class="epoch category20c"></div>
<div id="heapChart" class="epoch category20c"></div>
</p>
<p>
<span style="font-size:20px; color:#1f77b4">◼︎</span> Heap bytes<br>
<span style="font-size:20px; color:#aec7e8">◼︎</span> Stack bytes<br>
</p>
</div>
<div class="col-md-4">
<h3>HEAP/Stack bytes</h3>
<div class="col-md-6">
<h3>Allocations per second</h3>
<p>
<div id="heapChart" class="epoch category20b"></div>
<div id="mallocsChart" class="epoch category20b"></div>
</p>
</div>
<div class="col-md-4">
<h3>Mallocs/Frees</h3>
<p>
<div id="mallocsChart" class="epoch category10"></div>
<span style="font-size:20px; color:#393b79">◼︎</span> Mallocs / sec<br>
<span style="font-size:20px; color:#5254a3">◼︎</span> Frees / sec<br>
</p>
</div>
</div>

31
examples/realtime-advanced/resources/static/realtime.js
View File

@ -18,19 +18,12 @@ function StartEpoch(timestamp) {
var windowSize = 60;
var height = 200;
var defaultData = histogram(windowSize, timestamp);
window.goroutinesChart = $('#goroutinesChart').epoch({
type: 'time.bar',
axes: ['bottom', 'left'],
height: height,
data: [
{values: defaultData}
]
});
window.heapChart = $('#heapChart').epoch({
type: 'time.area',
axes: ['bottom', 'left'],
height: height,
historySize: 10,
data: [
{values: defaultData},
{values: defaultData}
@ -41,6 +34,7 @@ function StartEpoch(timestamp) {
type: 'time.area',
axes: ['bottom', 'left'],
height: height,
historySize: 10,
data: [
{values: defaultData},
{values: defaultData}
@ -48,10 +42,12 @@ function StartEpoch(timestamp) {
});
window.messagesChart = $('#messagesChart').epoch({
type: 'time.area',
type: 'time.line',
axes: ['bottom', 'left'],
height: 250,
height: 240,
historySize: 10,
data: [
{values: defaultData},
{values: defaultData},
{values: defaultData}
]
@ -69,11 +65,10 @@ function StartSSE(roomid) {
}
function stats(e) {
var data = parseJSONStats(e.data)
heapChart.push(data.heap)
mallocsChart.push(data.mallocs)
goroutinesChart.push(data.goroutines)
messagesChart.push(data.messages)
var data = parseJSONStats(e.data);
heapChart.push(data.heap);
mallocsChart.push(data.mallocs);
messagesChart.push(data.messages);
}
function parseJSONStats(e) {
@ -90,16 +85,14 @@ function parseJSONStats(e) {
{time: timestamp, y: data.Frees}
];
var messages = [
{time: timestamp, y: data.Connected},
{time: timestamp, y: data.Inbound},
{time: timestamp, y: data.Outbound}
];
var goroutines = [
{time: timestamp, y: data.NuGoroutines},
]
return {
heap: heap,
mallocs: mallocs,
goroutines: goroutines,
messages: messages
}
}