From 6e4be770658dc7bf1e1a9dce683a5658ee4fe9e9 Mon Sep 17 00:00:00 2001 From: hudy9x Date: Tue, 23 Jan 2024 16:56:50 +0700 Subject: [PATCH] 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 --- .github/workflows/deployment.yml | 13 ++++++++ package.json | 2 +- .../be-gateway/src/routes/buzzer/index.ts | 24 +++++++++++++++ packages/shared-libs/src/lib/pusher-client.ts | 9 +++++- .../_events/useEventMoveTaskToOtherBoard.ts | 10 ++++--- .../ui-app/app/_events/useEventTaskReorder.ts | 18 ++++++----- packages/ui-app/app/_events/usePusher.ts | 30 +++++++++++++++++++ 7 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 packages/ui-app/app/_events/usePusher.ts diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml index 82d56150..2f39996d 100644 --- 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 index 0ab10e05..baa15ae7 100644 --- 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 index db445214..1e09570e 100644 --- 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 index 368f9c61..2e4314ba 100644 --- 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 index d0224e42..df2ad492 100644 --- 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 index 07dde93e..a5817f4d 100644 --- 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 new file mode 100644 index 00000000..57aab433 --- /dev/null +++ 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() + 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 + } +}