Replacing event with continously statistics polling

resources/views/dashboard.blade.php

@@ -84,9 +84,29 @@ class="rounded-full px-3 py-2 text-white focus:outline-none"
       v-if="connected && app.statisticsEnabled"
       class="w-full my-6 px-6"
     >
-    <div class="font-semibold uppercase text-gray-700">
-      Live statistics
-    </div>
+      <div class="flex justify-between items-center">
+        <span class="font-semibold uppercase text-gray-700">
+          Live statistics
+        </span>
+
+        <div class="space-x-3 flex items-center">
+          <div>
+            <input
+              type="checkbox"
+              v-model="autoRefresh"
+              class="mr-2"
+            />
+            Refresh automatically
+          </div>
+
+          <button
+            @click="loadChart"
+            class="rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none text-white px-3 py-1"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
 
       <div
         id="statisticsChart"
@@ -222,6 +242,9 @@ class="rounded-full px-3 py-1 inline-block text-sm"
       connected: false,
       connecting: false,
       sendingEvent: false,
+      autoRefresh: true,
+      refreshInterval: {{ $refreshInterval }},
+      refreshTicker: null,
       chart: null,
       pusher: null,
       app: null,
@@ -236,6 +259,19 @@ class="rounded-full px-3 py-1 inline-block text-sm"
     mounted () {
       this.app = this.apps[0] || null;
     },
+    destroyed () {
+      if (this.refreshTicker) {
+        this.clearRefreshInterval();
+      }
+    },
+    watch: {
+      connected (newVal) {
+        newVal ? this.startRefreshInterval() : this.clearRefreshInterval();
+      },
+      autoRefresh (newVal) {
+        newVal ? this.startRefreshInterval() : this.clearRefreshInterval();
+      },
+    },
     methods: {
       connect () {
         this.connecting = true;
@@ -274,12 +310,14 @@ class="rounded-full px-3 py-1 inline-block text-sm"
           this.connected = false;
           this.connecting = false;
           this.logs = [];
+          this.chart = null;
         });
 
         this.pusher.connection.bind('error', event => {
           if (event.error.data.code === 4100) {
             this.connected = false;
             this.logs = [];
+            this.chart = null;
 
             throw new Error("Over capacity");
           }
@@ -288,12 +326,12 @@ class="rounded-full px-3 py-1 inline-block text-sm"
         });
 
         this.subscribeToAllChannels();
-        this.subscribeToStatistics();
       },
 
       disconnect () {
         this.pusher.disconnect();
         this.connecting = false;
+        this.chart = null;
       },
 
       loadChart () {
@@ -333,7 +371,10 @@ class="rounded-full px-3 py-1 inline-block text-sm"
               autosize: true,
             };
 
-            this.chart = Plotly.newPlot('statisticsChart', chartData, layout);
+            this.chart = this.chart
+              ? Plotly.react('statisticsChart', chartData, layout)
+              : Plotly.newPlot('statisticsChart', chartData, layout);
+
         });
       },
 
@@ -348,18 +389,6 @@ class="rounded-full px-3 py-1 inline-block text-sm"
           });
       },
 
-      subscribeToStatistics () {
-        this.pusher.subscribe('{{ $logPrefix }}statistics')
-          .bind('statistics-updated', (data) => {
-            var update = {
-              x:  [[data.time], [data.time], [data.time]],
-              y: [[data.peak_connection_count], [data.websocket_message_count], [data.api_message_count]],
-            };
-
-            Plotly.extendTraces('statisticsChart', update, [0, 1, 2]);
-          });
-      },
-
       sendEvent () {
         if (! this.sendingEvent) {
           this.sendingEvent = true;
@@ -415,6 +444,17 @@ class="rounded-full px-3 py-1 inline-block text-sm"
 
         return 'bg-gray-700 text-white';
       },
+
+      startRefreshInterval () {
+        this.refreshTicker = setInterval(function () {
+            this.loadChart();
+          }.bind(this), this.refreshInterval * 1000);
+      },
+
+      stopRefreshInterval () {
+        clearInterval(this.refreshTicker);
+        this.refreshTicker = null;
+      },
     },
   });
 </script>

src/Dashboard/Http/Controllers/DashboardApiController.php

@@ -2,45 +2,21 @@
 
 namespace BeyondCode\LaravelWebSockets\Dashboard\Http\Controllers;
 
+use BeyondCode\LaravelWebSockets\Statistics\Drivers\StatisticsDriver;
+use Illuminate\Http\Request;
+
 class DashboardApiController
 {
     /**
      * Get statistics for an app ID.
      *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \BeyondCode\LaravelWebSockets\Statistics\Drivers\StatisticsDriver  $driver
      * @param  mixed  $appId
      * @return \Illuminate\Http\Response
      */
-    public function getStatistics($appId)
+    public function getStatistics(Request $request, StatisticsDriver $driver, $appId)
     {
-        $model = config('websockets.statistics.model');
-
-        $statistics = $model::where('app_id', $appId)
-            ->latest()
-            ->limit(120)
-            ->get();
-
-        $statisticData = $statistics->map(function ($statistic) {
-            return [
-                'timestamp' => (string) $statistic->created_at,
-                'peak_connection_count' => $statistic->peak_connection_count,
-                'websocket_message_count' => $statistic->websocket_message_count,
-                'api_message_count' => $statistic->api_message_count,
-            ];
-        })->reverse();
-
-        return [
-            'peak_connections' => [
-                'x' => $statisticData->pluck('timestamp'),
-                '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'),
-            ],
-        ];
+        return $driver::get($appId, $request);
     }
 }

src/Dashboard/Http/Controllers/ShowDashboard.php

@@ -22,6 +22,7 @@ public function __invoke(Request $request, AppManager $apps)
             'port' => config('websockets.dashboard.port', 6001),
             'channels' => DashboardLogger::$channels,
             'logPrefix' => DashboardLogger::LOG_CHANNEL_PREFIX,
+            'refreshInterval' => config('websockets.statistics.interval_in_seconds'),
         ]);
     }
 }

src/Statistics/Drivers/DatabaseDriver.php

@@ -3,6 +3,7 @@
 namespace BeyondCode\LaravelWebSockets\Statistics\Drivers;
 
 use Carbon\Carbon;
+use Illuminate\Http\Request;
 
 class DatabaseDriver implements StatisticsDriver
 {
@@ -87,6 +88,46 @@ public static function create(array $data): StatisticsDriver
         return new static($class::create($data));
     }
 
+    /**
+     * Get the records to show to the dashboard.
+     *
+     * @param  mixed  $appId
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public static function get($appId, Request $request): array
+    {
+        $class = config('websockets.statistics.database.model');
+
+        $statistics = $class::whereAppId($appId)
+            ->latest()
+            ->limit(120)
+            ->get()
+            ->map(function ($statistic) {
+                return [
+                    'timestamp' => (string) $statistic->created_at,
+                    'peak_connection_count' => $statistic->peak_connection_count,
+                    'websocket_message_count' => $statistic->websocket_message_count,
+                    'api_message_count' => $statistic->api_message_count,
+                ];
+            })->reverse();
+
+        return [
+            'peak_connections' => [
+                'x' => $statistics->pluck('timestamp'),
+                'y' => $statistics->pluck('peak_connection_count'),
+            ],
+            'websocket_message_count' => [
+                'x' => $statistics->pluck('timestamp'),
+                'y' => $statistics->pluck('websocket_message_count'),
+            ],
+            'api_message_count' => [
+                'x' => $statistics->pluck('timestamp'),
+                'y' => $statistics->pluck('api_message_count'),
+            ],
+        ];
+    }
+
     /**
      * Delete statistics from the store,
      * optionally by app id, returning

src/Statistics/Drivers/StatisticsDriver.php

@@ -2,6 +2,8 @@
 
 namespace BeyondCode\LaravelWebSockets\Statistics\Drivers;
 
+use Illuminate\Http\Request;
+
 interface StatisticsDriver
 {
     /**
@@ -55,6 +57,15 @@ public function getApiMessageCount(): int;
      */
     public static function create(array $data): StatisticsDriver;
 
+    /**
+     * Get the records to show to the dashboard.
+     *
+     * @param  mixed  $appId
+     * @param  \Illuminate\Http\Request  $request
+     * @return void
+     */
+    public static function get($appId, Request $request);
+
     /**
      * Delete statistics from the store,
      * optionally by app id, returning

src/Statistics/Logger/MemoryStatisticsLogger.php

@@ -4,7 +4,6 @@
 
 use BeyondCode\LaravelWebSockets\Apps\App;
 use BeyondCode\LaravelWebSockets\Statistics\Drivers\StatisticsDriver;
-use BeyondCode\LaravelWebSockets\Statistics\Events\StatisticsUpdated;
 use BeyondCode\LaravelWebSockets\Statistics\Statistic;
 use BeyondCode\LaravelWebSockets\WebSockets\Channels\ChannelManager;
 use Ratchet\ConnectionInterface;
@@ -105,9 +104,7 @@ public function save()
                 continue;
             }
 
-            /* broadcast(new StatisticsUpdated(
-                $this->driver::create($statistic->toArray())
-            )); */
+            $this->driver::create($statistic->toArray());
 
             $currentConnectionCount = $this->channelManager->getConnectionCount($appId);