blax-software
/
laravel-websockets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:beyondcode/laravel-websockets

This commit is contained in:
freek 2018-12-04 09:08:36 +01:00
parent 016a6f4e4f df257254e5
commit b4b6ec9582
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/views/dashboard.blade.php
View File

@ -35,7 +35,7 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div v-if="connected && app.statisticsEnabled"> <div v-if="connected && app.statisticsEnabled">
<h4>Peak Connections</h4> <h4>Realtime Statistics</h4>
<div id="statisticsChart" style="width: 100%; height: 250px;"></div> <div id="statisticsChart" style="width: 100%; height: 250px;"></div>
</div> </div>
<div v-if="connected"> <div v-if="connected">
@ -147,19 +147,38 @@
loadChart() { loadChart() {
$.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => { $.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => {
this.chart = Plotly.plot('statisticsChart', [{
x: data.peak_connections.x, let chartData = [
y: data.peak_connections.y, {
mode: 'lines', x: data.peak_connections.x,
line: {color: '#80CAF6'} y: data.peak_connections.y,
}], { type: 'lines',
margin: { name: '# Peak Connections'
l: 0, },
r: 0, {
b: 0, x: data.websocket_message_count.x,
t: 50, y: data.websocket_message_count.y,
pad: 4 type: 'bar',
} }); name: '# Websocket Messages'
},
{
x: data.api_message_count.x,
y: data.api_message_count.y,
type: 'bar',
name: '# API Messages'
}
];
let layout = {
margin: {
l: 50,
r: 0,
b: 50,
t: 50,
pad: 4
}
};
this.chart = Plotly.newPlot('statisticsChart', chartData, layout);
}); });
}, },
@ -186,11 +205,11 @@
this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics') this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger::LOG_CHANNEL_PREFIX }}statistics')
.bind('statistics-updated', (data) => { .bind('statistics-updated', (data) => {
var update = { var update = {
x: [[data.time]], x: [[data.time], [data.time], [data.time]],
y: [[data.peak_connection_count]] y: [[data.peak_connection_count], [data.websocket_message_count], [data.api_message_count]]
}; };
Plotly.extendTraces('statisticsChart', update, [0]); Plotly.extendTraces('statisticsChart', update, [0, 1, 2]);
}); });
}, },

18
src/Dashboard/Http/Controllers/DashboardApiController.php
View File

@ -9,17 +9,27 @@ class DashboardApiController
$webSocketsStatisticsEntryModelClass = config('websockets.statistics_model'); $webSocketsStatisticsEntryModelClass = config('websockets.statistics_model');
$statistics = $webSocketsStatisticsEntryModelClass::where('app_id', $appId)->latest()->limit(120)->get(); $statistics = $webSocketsStatisticsEntryModelClass::where('app_id', $appId)->latest()->limit(120)->get();
$peakConnections = $statistics->map(function ($statistic) { $statisticData = $statistics->map(function ($statistic) {
return [ return [
'timestamp' => (string)$statistic->created_at, 'timestamp' => (string)$statistic->created_at,
'count' => $statistic->peak_connection_count 'peak_connection_count' => $statistic->peak_connection_count,
'websocket_message_count' => $statistic->websocket_message_count,
'api_message_count' => $statistic->api_message_count,
]; ];
})->reverse(); })->reverse();
return [ return [
'peak_connections' => [ 'peak_connections' => [
'x' => $peakConnections->pluck('timestamp'), 'x' => $statisticData->pluck('timestamp'),
'y' => $peakConnections->pluck('count'), 'y' => $statisticData->pluck('peak_connection_count'),
],
'websocket_message_count' => [
'x' => $statisticData->pluck('timestamp'),
'y' => $statisticData->pluck('websocket_message_count'),
],
'api_message_count' => [
'x' => $statisticData->pluck('timestamp'),
'y' => $statisticData->pluck('api_message_count'),
] ]
]; ];
} }