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

wip

This commit is contained in:
Marcel Pociot 2018-12-03 22:59:50 +01:00
parent 533f8a53ba
commit 84b8895ff8
3 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,15 @@
<title>WebSockets Dashboard</title> <title>WebSockets Dashboard</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.min.css" />
<script <script
src="https://code.jquery.com/jquery-3.3.1.min.js" src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://js.pusher.com/4.3/pusher.min.js"></script> <script src="https://js.pusher.com/4.3/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
</head> </head>
<body> <body>
@ -33,6 +36,9 @@
<div id="status"></div> <div id="status"></div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div v-if="connected" id="statisticsChart" style="width: 100%; height: 250px;">
</div>
<div v-if="connected"> <div v-if="connected">
<h4>Event Creator</h4> <h4>Event Creator</h4>
<form> <form>
@ -88,6 +94,7 @@
data: { data: {
connected: false, connected: false,
chart: null,
pusher: null, pusher: null,
port: 6001, port: 6001,
app: null, app: null,
@ -121,6 +128,8 @@
this.pusher.connection.bind('connected', () => { this.pusher.connection.bind('connected', () => {
this.connected = true; this.connected = true;
this.loadChart();
}); });
this.pusher.connection.bind('disconnected', () => { this.pusher.connection.bind('disconnected', () => {
@ -135,6 +144,21 @@
this.pusher.disconnect(); this.pusher.disconnect();
}, },
loadChart() {
$.getJSON('/{{ request()->path() }}/api/'+this.app.id+'/statistics', (data) => {
this.chart = $('#statisticsChart').epoch({
type: 'time.line',
axes: ['left', 'right', 'bottom'],
data: [
{
label: "Peak Connections",
values: data.peak_connections,
}
]
});
});
},
subscribeToAllChannels() { subscribeToAllChannels() {
[ [
'disconnection', 'disconnection',

23
src/Dashboard/Http/Controllers/DashboardApiController.php Normal file
View File

@ -0,0 +1,23 @@
<?php
namespace BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers;
class DashboardApiController
{
public function getStatistics($appId)
{
$webSocketsStatisticsEntryModelClass = config('websockets.statistics_model');
$statistics = $webSocketsStatisticsEntryModelClass::where('app_id', $appId)->latest()->limit(120)->get();
$peakConnections = $statistics->map(function ($statistic) {
return [
'time' => $statistic->created_at->timestamp,
'y' => $statistic->peak_connection_count
];
})->reverse()->values();
return [
'peak_connections' => $peakConnections
];
}
}

2
src/WebSocketsServiceProvider.php
View File

@ -3,6 +3,7 @@
namespace BeyondCode\LaravelWebSockets; namespace BeyondCode\LaravelWebSockets;
use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\AuthenticateDashboard; use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\AuthenticateDashboard;
use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\DashboardApiController;
use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\SendMessage; use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\SendMessage;
use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\ShowDashboard; use BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers\ShowDashboard;
use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize; use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;
@ -65,6 +66,7 @@ class WebSocketsServiceProvider extends ServiceProvider
Route::macro('webSockets', function($prefix = 'laravel-websockets') { Route::macro('webSockets', function($prefix = 'laravel-websockets') {
Route::prefix($prefix)->namespace('\\')->middleware(Authorize::class)->group(function() { Route::prefix($prefix)->namespace('\\')->middleware(Authorize::class)->group(function() {
Route::get('/', ShowDashboard::class); Route::get('/', ShowDashboard::class);
Route::get('/api/{appId}/statistics', DashboardApiController::class.'@getStatistics');
Route::post('auth', AuthenticateDashboard::class); Route::post('auth', AuthenticateDashboard::class);
Route::post('event', SendMessage::class); Route::post('event', SendMessage::class);
}); });