fix: init pusher-client inside useEffect, otherwise it doest not work

fix: add tls to pusher client as well fix: pusher client display CORS error (#123) fix: missing pusher channel env value fix: git action syntax incorrect fix: missing app key and app cluster fix: turn of channel authorization fix: try to use lower push-js version (v8.3.0) fix: try to use pusher inside useEffect fix: enable TLS config for pusher fix: add tls to pusher client as well fix: pusher client display CORS error (#123) fix: missing app key and app cluster fix: turn of channel authorization fix: try to use lower push-js version (v8.3.0) fix: try to use pusher inside useEffect
hudy9x · Jan 24, 2024 · 6e4be77 · 6e4be77
1 parent 5c5aae4
commit 6e4be77
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 13 deletions.
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -54,12 +54,25 @@ jobs:
            AWS_S3_BUCKET=${{ vars.AWS_S3_BUCKET }}
            REPLICATE_API_TOKEN=${{ vars.REPLICATE_API_TOKEN }}
            OPEN_API_KEY=${{ vars.OPEN_API_KEY }}
+
+           # Pusher beam
            NEXT_PUBLIC_PUSHER_INSTANCE_ID=
            PUSHER_INSTANCE_ID=${{ vars.PUSHER_INSTANCE_ID }}
            PUSHER_SECRET_KEY=${{ vars.PUSHER_SECRET_KEY }}
+
+           # Pusher channel
+           NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY=${{ vars.NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY }}
+           NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER=${{ vars.NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER }}
+
+           PUSHER_CHANNEL_APP_ID=${{ vars.PUSHER_CHANNEL_APP_ID }}
+           PUSHER_CHANNEL_SECRET=${{ vars.PUSHER_CHANNEL_SECRET }}
+
+           # Livekit
            LIVEKIT_API_KEY=${{ vars.LIVEKIT_API_KEY }}
            LIVEKIT_API_SECRET=${{ vars.LIVEKIT_API_SECRET }}
            NEXT_PUBLIC_LIVEKIT_URL=${{ vars.NEXT_PUBLIC_LIVEKIT_URL }}
+
+           # Firebase
            FIREBASE_PROJECT_ID=${{vars.FIREBASE_PROJECT_ID}}
            FIREBASE_CLIENT_EMAIL=${{vars.FIREBASE_CLIENT_EMAIL}}
            FIREBASE_PRIVATE_KEY=${{vars.FIREBASE_PRIVATE_KEY}}

diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "next-themes": "^0.2.1",
     "node-cron": "^3.0.3",
     "pusher": "^5.2.0",
-    "pusher-js": "^8.4.0-rc2",
+    "pusher-js": "8.3.0",
     "react": "18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-beautiful-dnd": "^13.1.1",

diff --git a/packages/be-gateway/src/routes/buzzer/index.ts b/packages/be-gateway/src/routes/buzzer/index.ts
@@ -3,6 +3,7 @@ import { AuthRequest } from '../../types'
 
 import { authMiddleware } from '../../middlewares'
 import { generateBuzzerToken, notifyToUsers } from '../../lib/buzzer'
+import { pusherServer } from '../../lib/pusher-server'
 
 const router = Router()
 const mainRouter = Router()
@@ -18,6 +19,29 @@ router.get('/pusher-authentication', async (req, res) => {
   res.send(JSON.stringify(generateBuzzerToken(userId)))
 })
 
+router.post('/channel-auth', async (req, res) => {
+  try {
+    const socketId = req.body.socket_id
+    const channel = req.body.channel_name
+    // const presenceData = {
+    //   user_id: 'unique_user_id',
+    //   user_info: { name: 'Mr Channels', twitter_id: '@pusher' }
+    // }
+    // This authenticates every user. Don't do this in production!
+
+    console.log('authorize channel')
+
+    const authResponse = pusherServer.authorizeChannel(
+      socketId,
+      channel
+      // presenceData
+    )
+    res.send(authResponse)
+  } catch (error) {
+    res.status(500).send(error)
+  }
+})
+
 router.get('/pusher/test', [authMiddleware], async (req: AuthRequest, res) => {
   const { id: uid } = req.authen
   console.log('send to ', uid)

diff --git a/packages/shared-libs/src/lib/pusher-client.ts b/packages/shared-libs/src/lib/pusher-client.ts
@@ -1,9 +1,16 @@
+'use client'
+
 import Pusher from 'pusher-js'
 
 export const pusherClient = new Pusher(
   process.env.NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY || '',
   {
-    cluster: process.env.NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER || ''
+    cluster: process.env.NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER || '',
+    // channelAuthorization: {
+    //   transport: 'ajax',
+    //   endpoint: `${process.env.NEXT_PUBLIC_BE_GATEWAY}api/buzzer/channel-auth`
+    // }
+
   }
 )
 

diff --git a/packages/ui-app/app/_events/useEventMoveTaskToOtherBoard.ts b/packages/ui-app/app/_events/useEventMoveTaskToOtherBoard.ts
@@ -1,7 +1,8 @@
 import { useUrl } from '@/hooks/useUrl'
 import { httpPost } from '@/services/_req'
-import { channelTeamCollab } from '@shared/libs'
+// import { channelTeamCollab } from '@shared/libs'
 import { useEffect } from 'react'
+import { usePusher } from './usePusher'
 
 export const triggerEventMoveTaskToOtherBoard = (data: {
   sourceColId: string
@@ -16,16 +17,17 @@ export const triggerEventMoveTaskToOtherBoard = (data: {
 
 export const useEventMoveTaskToOtherBoard = (cb: (data: unknown) => void) => {
   const { projectId } = useUrl()
+  const { channelTeamCollab } = usePusher()
 
   useEffect(() => {
     const eventName = `event-move-task-to-other-board-${projectId}`
 
-    channelTeamCollab.bind(eventName, (data: unknown) => {
+    channelTeamCollab && channelTeamCollab.bind(eventName, (data: unknown) => {
       cb && cb(data)
     })
 
     return () => {
-      channelTeamCollab.unbind(eventName)
+      channelTeamCollab && channelTeamCollab.unbind(eventName)
     }
-  }, [])
+  }, [channelTeamCollab])
 }
diff --git a/packages/ui-app/app/_events/useEventTaskReorder.ts b/packages/ui-app/app/_events/useEventTaskReorder.ts
@@ -1,7 +1,8 @@
 import { useUrl } from '@/hooks/useUrl'
 import { httpPost } from '@/services/_req'
-import { channelTeamCollab } from '@shared/libs'
+// import { channelTeamCollab } from '@shared/libs'
 import { useEffect } from 'react'
+import { usePusher } from './usePusher'
 
 export const triggerEventTaskReorder = (data: {
   sourceColId: string
@@ -14,16 +15,19 @@ export const triggerEventTaskReorder = (data: {
 
 export const useEventTaskReorder = (cb: (data: unknown) => void) => {
   const { projectId } = useUrl()
+  const { channelTeamCollab } = usePusher()
 
   useEffect(() => {
     const eventName = `event-task-reorder-${projectId}`
-
-    channelTeamCollab.bind(eventName, (data: unknown) => {
-      cb && cb(data)
-    })
+    if (channelTeamCollab) {
+      console.log('binding pusher event', eventName)
+      channelTeamCollab.bind(eventName, (data: unknown) => {
+        cb && cb(data)
+      })
+    }
 
     return () => {
-      channelTeamCollab.unbind(eventName)
+      channelTeamCollab && channelTeamCollab.unbind(eventName)
     }
-  }, [])
+  }, [channelTeamCollab])
 }
diff --git a/packages/ui-app/app/_events/usePusher.ts b/packages/ui-app/app/_events/usePusher.ts
@@ -0,0 +1,30 @@
+import Pusher, { Channel } from 'pusher-js'
+import { useEffect, useState } from 'react'
+
+export const usePusher = () => {
+  const [channelTeamCollab, setChannelTeamCollab] = useState<Channel>()
+  useEffect(() => {
+
+    const pusherClient = new Pusher(
+      process.env.NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY || '',
+      {
+        cluster: process.env.NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER || '',
+        // channelAuthorization: {
+        //   transport: 'ajax',
+        //   endpoint: `${process.env.NEXT_PUBLIC_BE_GATEWAY}api/buzzer/channel-auth`
+        // }
+
+      }
+    )
+
+
+    const channel = pusherClient.subscribe('team-collab')
+
+    setChannelTeamCollab(channel)
+
+  }, [])
+
+  return {
+    channelTeamCollab
+  }
+}