centralize poll logic in poll class and fix throttling

Author: joetannenbaum

packages/core/src/poll.ts

@@ -2,18 +2,21 @@ import { PollOptions } from './types'
 
 export class Poll {
   protected id: number | null = null
-  protected inBackground = false
+  protected throttle = false
   protected keepAlive = false
-  protected currentInterval: number
-  protected originalInterval: number
+  protected cb: VoidFunction
+  protected interval: number
+  protected cbCount = 0
 
   constructor(interval: number, cb: VoidFunction, options: PollOptions) {
     this.keepAlive = options.keepAlive || false
 
-    this.currentInterval = interval
-    this.originalInterval = interval
+    this.cb = cb
+    this.interval = interval
 
-    this.start(interval, cb)
+    if (options.autoStart || true) {
+      this.start()
+    }
   }
 
   public stop() {
@@ -22,28 +25,25 @@ export class Poll {
     }
   }
 
-  public isInBackground(hidden: boolean) {
-    this.inBackground = this.keepAlive ? false : hidden
-
-    if (this.inBackground) {
-      // Throttle requests by 95% when the page is in the background
-      this.currentInterval = Math.round(this.originalInterval / 0.05)
-    } else {
-      // Otherwise, restore the original interval
-      this.currentInterval = this.originalInterval
-    }
-  }
+  public start() {
+    this.stop()
 
-  protected start(interval: number, cb: VoidFunction) {
     this.id = window.setInterval(() => {
-      if (this.currentInterval === interval) {
-        cb()
-        return
+      if (!this.throttle || this.cbCount % 10 === 0) {
+        this.cb()
+      }
+
+      if (this.throttle) {
+        this.cbCount++
       }
+    }, this.interval)
+  }
 
-      // The visibility has changed, so we need to adjust the interval
-      this.stop()
-      this.start(this.currentInterval, cb)
-    }, interval)
+  public isInBackground(hidden: boolean) {
+    this.throttle = this.keepAlive ? false : hidden
+
+    if (this.throttle) {
+      this.cbCount = 0
+    }
   }
 }

packages/core/src/polls.ts

@@ -8,12 +8,22 @@ class Polls {
     this.setupVisibilityListener()
   }
 
-  public add(interval: number, cb: VoidFunction, options: PollOptions): VoidFunction {
+  public add(
+    interval: number,
+    cb: VoidFunction,
+    options: PollOptions,
+  ): {
+    stop: VoidFunction
+    start: VoidFunction
+  } {
     const poll = new Poll(interval, cb, options)
 
     this.polls.push(poll)
 
-    return () => poll.stop()
+    return {
+      stop: () => poll.stop(),
+      start: () => poll.start(),
+    }
   }
 
   public clear() {

packages/core/src/router.ts

@@ -124,7 +124,7 @@ export class Router {
     this.syncRequestStream.cancelInFlight()
   }
 
-  public poll(interval: number, requestOptions: ReloadOptions = {}, options: PollOptions = {}): VoidFunction {
+  public poll(interval: number, requestOptions: ReloadOptions = {}, options: PollOptions = {}) {
     return polls.add(interval, () => this.reload(requestOptions), { keepAlive: options.keepAlive || false })
   }
 

packages/core/src/types.ts

@@ -190,6 +190,7 @@ export type ReloadOptions = Omit<VisitOptions, 'preserveScroll' | 'preserveState
 
 export type PollOptions = {
   keepAlive?: boolean
+  autoStart?: boolean
 }
 
 export type VisitHelperOptions = Omit<VisitOptions, 'method' | 'data'>

packages/react/src/usePoll.ts

@@ -0,0 +1,22 @@
+import { PollOptions, ReloadOptions, router } from '@inertiajs/core'
+import { useEffect } from 'react'
+
+export default function usePoll(interval: number, requestOptions: ReloadOptions = {}, options: PollOptions = {}) {
+  const { stop, start } = router.poll(interval, requestOptions, {
+    ...options,
+    autoStart: false,
+  })
+
+  useEffect(() => {
+    if (options.autoStart) {
+      start()
+    }
+
+    return () => stop()
+  }, [])
+
+  return {
+    stop,
+    start,
+  }
+}

packages/vue3/src/usePoll.ts

@@ -5,33 +5,21 @@ import { onMounted, onUnmounted } from 'vue'
 export default function usePoll(
   interval: number,
   requestOptions: ReloadOptions = {},
-  options: PollOptions & {
-    startOnMount?: boolean
-  } = {
+  options: PollOptions = {
     keepAlive: false,
-    startOnMount: true,
+    autoStart: true,
   },
 ): {
   stop: VoidFunction
   start: VoidFunction
 } {
-  let stopFunc: VoidFunction
-
-  options.startOnMount ??= true
-
-  const stop = () => {
-    if (stopFunc) {
-      stopFunc()
-    }
-  }
-
-  const start = () => {
-    stop()
-    stopFunc = router.poll(interval, requestOptions, options)
-  }
+  const { stop, start } = router.poll(interval, requestOptions, {
+    ...options,
+    autoStart: false,
+  })
 
   onMounted(() => {
-    if (options.startOnMount) {
+    if (options.autoStart) {
       start()
     }
   })

playgrounds/vue3/resources/js/Pages/Poll.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
 import usePoll from '../../../../../packages/vue3/src/usePoll'
 import Layout from '../Components/Layout.vue'
+import TestGrid from '../Components/TestGrid.vue'
+import TestGridItem from '../Components/TestGridItem.vue'
 export default { layout: Layout }
 </script>
 
@@ -17,7 +19,7 @@ const userPollCount = ref(0)
 const hookPollCount = ref(0)
 const companyPollCount = ref(0)
 
-const trigegerAsyncRedirect = () => {
+const triggerAsyncRedirect = () => {
   router.get(
     '/elsewhere',
     {},
@@ -38,7 +40,7 @@ const { start, stop } = usePoll(
   },
   {
     keepAlive: true,
-    startOnMount: false,
+    autoStart: false,
   },
 )
 
@@ -47,7 +49,7 @@ onMounted(() => {
     start()
   }, 2000)
 
-  const stopUserPolling = router.poll(
+  const { stop: stopUserPolling } = router.poll(
     1000,
     {
       only: ['users'],
@@ -75,24 +77,24 @@ onMounted(() => {
 <template>
   <Head title="Async Request" />
   <h1 class="text-3xl">Poll</h1>
-  <div class="flex mt-6 space-x-6">
-    <div>
-      <div class="mb-2 font-bold">User Poll Request Count: {{ userPollCount }}</div>
+  <TestGrid>
+    <TestGridItem>
+      <template #title> User Poll Request Count: {{ userPollCount }} </template>
       <div v-for="user in users">
         <div>{{ user }}</div>
       </div>
-    </div>
-    <div>
-      <div class="mb-2 font-bold">Companies Poll Request Count: {{ companyPollCount }}</div>
+    </TestGridItem>
+    <TestGridItem>
+      <template #title> Companies Poll Request Count: {{ companyPollCount }} </template>
       <div v-for="company in companies">
         <div>{{ company }}</div>
       </div>
-    </div>
-    <div>
-      <div class="mb-2 font-bold">Hook Count: {{ hookPollCount }}</div>
-    </div>
-    <div>
-      <button @click="trigegerAsyncRedirect">Trigger Async Redirect</button>
-    </div>
-  </div>
+    </TestGridItem>
+    <TestGridItem>
+      <template #title> Hook Poll Request Count: {{ hookPollCount }} </template>
+    </TestGridItem>
+    <TestGridItem>
+      <button @click="triggerAsyncRedirect">Trigger Async Redirect</button>
+    </TestGridItem>
+  </TestGrid>
 </template>