feat(LaravelEcho): Add support for Laravel Echo

.env.example

@@ -0,0 +1,7 @@
+PUSHER_APP_BROADCASTER=pusher
+PUSHER_APP_KEY=app-key
+PUSHER_APP_HOST=localhost
+PUSHER_APP_PORT=6001
+PUSHER_APP_TLS=false
+PUSHER_APP_ENCRYPTED=true
+PUSHER_APP_DISABLE_STATS=true

.nuxtignore

@@ -0,0 +1,3 @@
+# Disable Laravel Echo
+composables/useEcho.ts
+plugins/echo.client.ts

composables/useEcho.ts

@@ -0,0 +1,4 @@
+export default function useEcho() {
+  const { $echo } = useNuxtApp()
+  return $echo
+}

nuxt.config.ts

@@ -6,6 +6,17 @@ export default defineNuxtConfig({
     public: {
       backendUrl: 'http://localhost',
       frontendUrl: 'http://localhost:3000',
+      echo: {
+        broadcaster: process.env.PUSHER_APP_BROADCASTER,
+        key: process.env.PUSHER_APP_KEY,
+        cluster: process.env.PUSHER_APP_CLUSTER,
+        wsHost: process.env.PUSHER_APP_HOST,
+        wsPort: process.env.PUSHER_APP_PORT,
+        forceTLS: process.env.PUSHER_APP_TLS,
+        encrypted: process.env.PUSHER_APP_ENCRYPTED,
+        disableStats: process.env.PUSHER_APP_DISABLE_STATS,
+        enabledTransports: ['ws', 'wss'],
+      },
     },
   },
   imports: {

package.json

@@ -20,7 +20,9 @@
     "@nuxt/ui-pro": "^0.4.2",
     "eslint": "^8.53.0",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "laravel-echo": "^1.15.3",
     "nuxt": "^3.8.1",
+    "pusher-js": "^8.3.0",
     "typescript": "^5.2.2",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"

plugins/echo.client.ts

@@ -0,0 +1,53 @@
+import Echo from 'laravel-echo'
+import Pusher from 'pusher-js'
+
+declare global {
+  interface Window {
+    Pusher: typeof Pusher
+  }
+}
+
+window.Pusher = Pusher
+
+export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig()
+  const echo = new Echo({
+    broadcaster: runtimeConfig.public.echo.broadcaster,
+    key: runtimeConfig.public.echo.key,
+    cluster: 'mt1',
+    wsHost: runtimeConfig.public.echo.wsHost,
+    wsPort: runtimeConfig.public.echo.wsPort,
+    wssPort: runtimeConfig.public.echo.wsPort,
+    forceTLS: false,
+    encrypted: runtimeConfig.public.echo.encrypted,
+    disableStats: runtimeConfig.public.echo.disableStats,
+    enabledTransports: ['ws', 'wss'],
+    authorizer: (channel: { name: any }) => {
+      return {
+        authorize: async (socketId: string, callback: (error: any, respnse?: any) => void) => {
+          try {
+            const response = await $larafetch(`/broadcasting/auth`, {
+              method: 'POST',
+              body: {
+                socket_id: socketId,
+                channel_name: channel.name,
+              },
+            })
+
+            callback(null, response)
+          }
+          catch (error) {
+            callback(error)
+          }
+        },
+      }
+    },
+  })
+
+  // Make Echo instance available through the Nuxt app
+  return {
+    provide: {
+      echo,
+    },
+  }
+})