Add pusher.js polling for phone updated events

Author: AchoArnold

api/pkg/handlers/billing_handler.go

@@ -38,8 +38,8 @@ func NewBillingHandler(
 
 // RegisterRoutes registers the routes for the MessageHandler
 func (h *BillingHandler) RegisterRoutes(router fiber.Router, middlewares ...fiber.Handler) {
-	router.Get("/billing/usage-history", h.computeRoute(middlewares, h.UsageHistory)...)
-	router.Get("/billing/usage", h.computeRoute(middlewares, h.Usage)...)
+	router.Get("/v1/billing/usage-history", h.computeRoute(middlewares, h.UsageHistory)...)
+	router.Get("/v1/billing/usage", h.computeRoute(middlewares, h.Usage)...)
 }
 
 // UsageHistory returns the usage history of a user

api/pkg/handlers/heartbeat_handler.go

@@ -41,12 +41,12 @@ func NewHeartbeatHandler(
 
 // RegisterRoutes registers the routes for the HeartbeatHandler
 func (h *HeartbeatHandler) RegisterRoutes(router fiber.Router, middlewares ...fiber.Handler) {
-	router.Get("/heartbeats", h.computeRoute(middlewares, h.Index)...)
+	router.Get("/v1/heartbeats", h.computeRoute(middlewares, h.Index)...)
 }
 
 // RegisterPhoneAPIKeyRoutes registers the routes for the HeartbeatHandler
 func (h *HeartbeatHandler) RegisterPhoneAPIKeyRoutes(router fiber.Router, middlewares ...fiber.Handler) {
-	router.Post("/heartbeats", h.computeRoute(middlewares, h.Store)...)
+	router.Post("/v1/heartbeats", h.computeRoute(middlewares, h.Store)...)
 }
 
 // Index returns the heartbeats of a phone number

api/pkg/handlers/message_thread_handler.go

@@ -41,9 +41,9 @@ func NewMessageThreadHandler(
 
 // RegisterRoutes registers the routes for the MessageHandler
 func (h *MessageThreadHandler) RegisterRoutes(router fiber.Router, middlewares ...fiber.Handler) {
-	router.Get("/message-threads", h.Index)
-	router.Put("/message-threads/:messageThreadID", h.Update)
-	router.Delete("/message-threads/:messageThreadID", h.Delete)
+	router.Get("/v1/message-threads", h.computeRoute(middlewares, h.Index)...)
+	router.Put("/v1/message-threads/:messageThreadID", h.computeRoute(middlewares, h.Update)...)
+	router.Delete("/v1/message-threads/:messageThreadID", h.computeRoute(middlewares, h.Delete)...)
 }
 
 // Index returns message threads for a phone number

web/.env.production

@@ -19,3 +19,6 @@ FIREBASE_APP_ID=1:877524083399:web:430d6a29a0d808946514e2
 FIREBASE_MEASUREMENT_ID=G-EZ5W9DVK8T
 
 CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAA6Hpp8SDyMMPhWg
+
+PUSHER_KEY=a4809008d8f03aaab022
+PUSHER_CLUSTER=mt1

web/layouts/default.vue

@@ -29,6 +29,7 @@
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
 import { mdiBullhorn } from '@mdi/js'
+import Pusher from 'pusher-js'
 import { setAuthHeader } from '~/plugins/axios'
 
 @Component
@@ -41,15 +42,18 @@ export default class DefaultLayout extends Vue {
   }
 
   mounted() {
-    // this.startPoller()
-    setTimeout(
-      () => {
-        if (this.poller) {
-          clearInterval(this.poller)
-        }
-      },
-      60 * 1000 * 60,
-    )
+    setTimeout(() => {
+      const pusher = new Pusher(this.$config.pusherKey, {
+        cluster: this.$config.pusherCluster,
+      })
+
+      const channel = pusher.subscribe(this.$store.getters.getAuthUser.id)
+      channel.bind('phone.updated', () => {
+        this.$store.dispatch('setCanPoll', true)
+      })
+
+      this.startPoller()
+    }, 5000) // delay so that the auth user is present
   }
 
   beforeDestroy(): void {
@@ -60,6 +64,13 @@ export default class DefaultLayout extends Vue {
 
   startPoller() {
     this.poller = window.setInterval(async () => {
+      if (
+        !this.$store.getters.getCanPoll ||
+        this.$store.getters.getAuthUser == null
+      ) {
+        return
+      }
+
       await this.$store.dispatch('setPolling', true)
 
       const promises = []
@@ -70,12 +81,12 @@ export default class DefaultLayout extends Vue {
           this.$store.dispatch('getHeartbeat'),
         )
       }
+      promises.push(
+        this.$store.dispatch('loadPhones', true),
+        this.$store.dispatch('setCanPoll', false),
+      )
 
-      if (this.$store.getters.getAuthUser) {
-        promises.push(this.$store.dispatch('loadPhones', true))
-      }
-
-      if (this.$store.getters.hasThread && this.$store.getters.getUser) {
+      if (this.$store.getters.hasThread) {
         promises.push(
           this.$store.dispatch(
             'loadThreadMessages',

web/nuxt.config.js

@@ -155,6 +155,8 @@ export default {
     checkoutURL: process.env.CHECKOUT_URL,
     enterpriseCheckoutURL: process.env.ENTERPRISE_CHECKOUT_URL,
     cloudflareTurnstileSiteKey: process.env.CLOUDFLARE_TURNSTILE_SITE_KEY,
+    pusherKey: process.env.PUSHER_KEY,
+    pusherCluster: process.env.PUSHER_CLUSTER,
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build

web/package.json

@@ -38,6 +38,7 @@
     "moment": "^2.30.1",
     "nuxt": "^2.18.1",
     "nuxt-highlightjs": "^1.0.3",
+    "pusher-js": "^8.4.0",
     "qrcode": "^1.5.0",
     "ufo": "^1.5.4",
     "vue": "^2.7.16",