implemented module functionality

Author: manchenkoff

src/module.ts

@@ -1,18 +1,52 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import {
+  defineNuxtModule,
+  addPlugin,
+  createResolver,
+  useLogger,
+  addImportsDir,
+} from '@nuxt/kit'
+import { defu } from 'defu'
+import type { ModuleOptions } from './runtime/types'
 
-export interface ModuleOptions {}
+const MODULE_NAME = 'nuxt-laravel-echo'
+
+export type ModulePublicRuntimeConfig = { echo: ModuleOptions }
+
+const defaultModuleOptions: ModuleOptions = {
+  broadcaster: 'reverb',
+  host: 'localhost',
+  port: 8080,
+  scheme: 'https',
+  transports: ['ws', 'wss'],
+  authentication: {
+    baseUrl: 'http://localhost:80',
+    authEndpoint: '/broadcasting/auth',
+    csrfEndpoint: '/sanctum/csrf-cookie',
+    csrfCookie: 'XSRF-TOKEN',
+    csrfHeader: 'X-XSRF-TOKEN',
+  },
+  logLevel: 3,
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'nuxt-laravel-echo',
+    name: MODULE_NAME,
     configKey: 'echo',
   },
-  // Default configuration options of the Nuxt module
-  defaults: {},
+  defaults: defaultModuleOptions,
   setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url)
+    const logger = useLogger(MODULE_NAME, { level: _options.logLevel })
+
+    _nuxt.options.build.transpile.push(resolver.resolve('./runtime'))
+    _nuxt.options.runtimeConfig.public.echo = defu(
+      _nuxt.options.runtimeConfig.public.echo,
+      _options
+    )
+
+    addPlugin(resolver.resolve('./runtime/plugin.client'))
+    addImportsDir(resolver.resolve('./runtime/composables'))
 
-    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
-    addPlugin(resolver.resolve('./runtime/plugin'))
+    logger.info('Laravel Echo module initialized!')
   },
 })

src/runtime/composables/useEcho.ts

@@ -0,0 +1,8 @@
+import type Echo from 'laravel-echo'
+import { useNuxtApp } from '#app'
+
+export const useEcho = (): Echo => {
+  const { $echo } = useNuxtApp()
+
+  return $echo as Echo
+}

src/runtime/composables/useEchoConfig.ts

@@ -0,0 +1,6 @@
+import type { ModuleOptions } from '../types'
+import { useRuntimeConfig } from '#imports'
+
+export const useEchoConfig = (): ModuleOptions => {
+  return useRuntimeConfig().public.echo as ModuleOptions
+}

src/runtime/plugin.client.ts

@@ -0,0 +1,150 @@
+import Echo from 'laravel-echo'
+import Pusher from 'pusher-js'
+import type { Channel, Options, ChannelAuthorizationCallback } from 'pusher-js'
+import type { ChannelAuthorizationData } from 'pusher-js/types/src/core/auth/options'
+import { createConsola, type ConsolaInstance } from 'consola'
+import type { FetchOptions } from 'ofetch'
+import { useEchoConfig } from './composables/useEchoConfig'
+import type { Authentication, ModuleOptions } from './types'
+import { defineNuxtPlugin, createError, useCookie } from '#app'
+
+declare global {
+  interface Window {
+    Echo: Echo
+    Pusher: typeof Pusher
+  }
+}
+
+const MODULE_NAME = 'nuxt-laravel-echo'
+
+function createEchoLogger(logLevel: number) {
+  return createConsola({ level: logLevel }).withTag(MODULE_NAME)
+}
+
+const readCsrfCookie = (name: string) => useCookie(name, { readonly: true })
+
+function createFetchClient(
+  authentication: Required<Authentication>,
+  logger: ConsolaInstance
+) {
+  const fetchOptions: FetchOptions = {
+    baseURL: authentication.baseUrl,
+    credentials: 'include',
+    retry: false,
+
+    async onRequest(context) {
+      let csrfToken = readCsrfCookie(authentication.csrfCookie)
+
+      if (!csrfToken.value) {
+        await $fetch(authentication.csrfEndpoint, {
+          baseURL: authentication.baseUrl,
+          credentials: 'include',
+          retry: false,
+        })
+
+        csrfToken = readCsrfCookie(authentication.csrfCookie)
+      }
+
+      if (!csrfToken.value) {
+        logger.warn(
+          `${authentication.csrfCookie} cookie is missing, unable to set ${authentication.csrfHeader} header`
+        )
+
+        return
+      }
+
+      context.options.headers = {
+        ...context.options.headers,
+        [authentication.csrfHeader]: csrfToken.value,
+      }
+    },
+  }
+
+  return $fetch.create(fetchOptions)
+}
+
+function createAuthorizer(
+  authentication: Required<Authentication>,
+  logger: ConsolaInstance
+) {
+  const client = createFetchClient(authentication, logger)
+
+  const authorizer = (channel: Channel, _: Options) => {
+    return {
+      authorize: (socketId: string, callback: ChannelAuthorizationCallback) => {
+        const payload = JSON.stringify({
+          socket_id: socketId,
+          channel_name: channel.name,
+        })
+
+        client<ChannelAuthorizationData>(authentication.authEndpoint, {
+          method: 'post',
+          body: payload,
+        })
+          .then((response: ChannelAuthorizationData) =>
+            callback(null, response)
+          )
+          .catch((error: Error | null) => callback(error, null))
+      },
+    }
+  }
+
+  return authorizer
+}
+
+function prepareEchoOptions(config: ModuleOptions, logger: ConsolaInstance) {
+  const forceTLS = config.scheme === 'https'
+  const additionalOptions = config.properties || {}
+
+  const authorizer = config.authentication
+    ? createAuthorizer(
+        config.authentication as Required<Authentication>,
+        logger
+      )
+    : undefined
+
+  // Create a Pusher instance
+  if (config.broadcaster === 'pusher') {
+    if (forceTLS === false) {
+      throw createError('Pusher requires a secure connection (schema: "https")')
+    }
+
+    return {
+      broadcaster: config.broadcaster,
+      key: config.key,
+      cluster: config.cluster,
+      forceTLS,
+      authorizer,
+      ...additionalOptions,
+    }
+  }
+
+  // Create a Reverb instance
+  return {
+    broadcaster: config.broadcaster,
+    key: config.key,
+    wsHost: config.host,
+    wsPort: config.port,
+    wssPort: config.port,
+    forceTLS,
+    enabledTransports: config.transports,
+    authorizer,
+    ...additionalOptions,
+  }
+}
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  const config = useEchoConfig()
+  const logger = createEchoLogger(config.logLevel)
+
+  window.Pusher = Pusher
+  window.Echo = new Echo(prepareEchoOptions(config, logger))
+
+  logger.debug('Laravel Echo client initialized')
+
+  return {
+    provide: {
+      echo: window.Echo,
+    },
+  }
+})

src/runtime/plugin.ts

@@ -0,0 +1,88 @@
+export interface Authentication {
+  /**
+   * The base URL of Laravel application.
+   * @default 'http://localhost:80'
+   */
+  baseUrl: string
+  /**
+   * The endpoint used for channels authentication.
+   * @default '/broadcasting/auth'
+   */
+  authEndpoint?: string
+  /**
+   * The endpoint used for CSRF token retrieval.
+   * @default '/sanctum/csrf-cookie'
+   */
+  csrfEndpoint?: string
+  /**
+   * The name of the CSRF cookie.
+   * @default 'XSRF-TOKEN'
+   */
+  csrfCookie?: string
+  /**
+   * The name of the CSRF header.
+   * @default 'X-XSRF-TOKEN'
+   */
+  csrfHeader?: string
+}
+
+export interface ModuleOptions {
+  /**
+   * The Laravel Broadcasting app key for a secure connection.
+   * @default undefined
+   */
+  key?: string
+  /**
+   * The Laravel broadcaster type to use.
+   * @default 'reverb'
+   */
+  broadcaster: 'reverb' | 'pusher'
+  /**
+   * The host to connect to WebSocket.
+   * @default 'localhost'
+   */
+  host?: string
+  /**
+   * The port to connect to WebSocket.
+   * @default 8080
+   */
+  port?: number
+  /**
+   * The scheme to use for the connection.
+   * @default 'https'
+   */
+  scheme: 'http' | 'https'
+  /**
+   * The application cluster to connect to.
+   * @default undefined
+   */
+  cluster?: string
+  /**
+   * The transports to enable for the connection.
+   * @default ['ws','wss']
+   */
+  transports?: string[]
+  /**
+   * Authentication options for Private and Presence channels.
+   */
+  authentication?: Authentication
+  /**
+   * The log level to use for the logger.
+   *
+   * 0: Fatal and Error
+   * 1: Warnings
+   * 2: Normal logs
+   * 3: Informational logs
+   * 4: Debug logs
+   * 5: Trace logs
+   *
+   * More details at https://github.com/unjs/consola?tab=readme-ov-file#log-level
+   * @default 3
+   */
+  logLevel: number
+  /**
+   * Additional properties to extend the Echo instance options.
+   * @default undefined
+   */
+  properties?: object
+}