Introduce polling mode!

Author: julienbourdeau

app/controllers/debugbar/polling_controller.rb

@@ -0,0 +1,23 @@
+module Debugbar
+  class PollingController < ApplicationController
+    skip_before_action :verify_authenticity_token, only: [:confirm]
+    before_action :cors_set_access_control_headers
+
+    def poll
+      render json: RequestBuffer.all.map(&:to_h)
+    end
+
+    def confirm
+      RequestBuffer.remove params[:ids]
+      head :ok
+    end
+
+    private
+
+    def cors_set_access_control_headers
+      response.headers['Access-Control-Allow-Origin'] = '*'
+      response.headers['Access-Control-Allow-Headers'] = 'Content-Type'
+      response.headers['Access-Control-Allow-Methods'] = 'POST, GET'
+    end
+  end
+end

client/index.html

@@ -68,9 +68,13 @@ <h2 class="text-2xl font-bold tracking-tight text-gray-900">Everything you need
 
   <div id="__debugbar"></div>
   <script type="text/javascript">
-      window._debugbarConfigOptions = {
-          height: 600,
-      }
+    window._debugbarConfigOptions = {
+      mode: "poll",
+      height: 600,
+      // poll: {
+      //     interval: 1000,
+      // },
+    }
   </script>
   <script type="module" src="/src/dev.ts"></script>
 

client/src/Debugbar.vue

@@ -41,11 +41,11 @@ const routeAlias = computed(() => {
   return requestsStore.currentRequest?.meta.params.controller + "#" + requestsStore.currentRequest?.meta.params.action
 })
 
-let debugbarChannel
+let debugbarChannel = null
 
-if (configStore.config.mode == "ws") {
+if (configStore.config.mode === "ws") {
   debugbarChannel = createConsumer(configStore.config.actionCableUrl).subscriptions.create(
-    { channel: configStore.config.channelName },
+    { channel: configStore.config.cable.channelName },
     {
       connected() {
         console.log("🟢 Connected to channel")
@@ -72,21 +72,45 @@ if (configStore.config.mode == "ws") {
       },
     }
   )
+} else if (configStore.config.mode === "poll") {
+  console.log(
+    `Using debugbar in "polling mode". Consider using "ws" mode for better performance (requires ActionCable).`
+  )
+  setInterval(() => {
+    fetch(configStore.config.pollUrl)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.length == 0) {
+          return
+        }
+
+        console.log(data)
+
+        const ids = requestsStore.addRequests(data)
+
+        if (!isActive.value) {
+          requestsStore.setCurrentRequestById(ids[ids.length - 1])
+        }
+
+        fetch(configStore.config.pollUrl + "/confirm", {
+          // mode: "no-cors",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ ids: ids }),
+        })
+      })
+  }, configStore.config.poll.interval)
 } else {
-  console.log(`Using debugbar in "offline mode", ideal for demoing with fixtures.`)
-  debugbarChannel = {
-    send: (data) => {
-      // No-op
-      console.log("Ignoring `send` call", data)
-    },
-  }
+  console.log(`Using debugbar in "offline mode", ideal for demos using fixtures.`)
 }
 
 const clearRequests = () => {
   console.log("Clearing requests")
   state.activeTab = ""
   requestsStore.clearRequests()
-  debugbarChannel.send({ clear: true })
+  debugbarChannel?.send({ clear: true })
 }
 
 // Resizing the debugbar

client/src/models/Config.ts

@@ -1,27 +1,41 @@
 import defaultsDeep from "lodash/defaultsDeep"
 
 export type DebugbarConfigOptions = {
-  mode: "ws" | "off"
+  mode: "ws" | "poll" | "off"
+  prefix: string
   cable: {
     url: string
-    prefix: string
+    channelName: string
+  }
+  poll: {
+    url: string
+    interval: number
   }
-  channelName: string
   height: number
 }
 
+export type DebugbarConfig = DebugbarConfigOptions & {
+  actionCableUrl: string
+  pollUrl: string
+}
+
 export function newDebugbarConfig(options: DebugbarConfigOptions) {
-  const obj = defaultsDeep(options, {
+  const obj: DebugbarConfig = defaultsDeep(options, {
     mode: "ws",
+    prefix: "/_debugbar",
     cable: {
       url: "ws://127.0.0.1:3000",
-      prefix: "/_debugbar",
+      channelName: "Debugbar::DebugbarChannel",
+    },
+    poll: {
+      url: "http://127.0.0.1:3000",
+      interval: 500,
     },
-    channelName: "Debugbar::DebugbarChannel",
     height: 360,
   } as DebugbarConfigOptions)
 
-  obj.actionCableUrl = `${obj.cable.url}${obj.cable.prefix}/cable`
+  obj.actionCableUrl = `${obj.cable.url}${obj.prefix}/cable`
+  obj.pollUrl = `${obj.poll.url}${obj.prefix}/poll`
 
   return obj
 }

config/routes.rb

@@ -1,6 +1,10 @@
 Debugbar::Engine.routes.draw do
   mount ActionCable.server => '/cable'
 
+  get 'poll' => "polling#poll"
+  options 'poll/confirm' => "polling#confirm"
+  post 'poll/confirm' => "polling#confirm"
+
   # TODO: Silence logs for this route if `::Rails.application.config.assets.quiet` is true
   get 'assets/script' => "assets#js"
 end