laravel-echo-api-gateway 0.5.8 → 0.5.9

package/jest.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-    transform: {
-        '^.+\\.tsx?$': 'ts-jest',
-    },
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'd.ts'],
-    transformIgnorePatterns: [
-        'node_modules/(?!(laravel-echo)/)',
-    ],
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    testMatch: ['<rootDir>/js-tests/**/*.test.ts'],
 };

package/js-src/Channel.ts

@@ -1,16 +1,18 @@
-import { EventFormatter } from 'laravel-echo/src/util';
-import { Channel as BaseChannel } from 'laravel-echo/src/channel/channel';
-import { PresenceChannel } from "laravel-echo/src/channel";
+import { EventFormatter } from "./EventFormatter";
 import { Websocket } from "./Websocket";
+import type { Options } from "./Websocket";
 
 const LOG_PREFIX = '[LE-AG-Channel]';
 
+const NOTIFICATION_EVENT = '.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated';
+
 /**
- * This class represents a Pusher channel.
+ * A channel on the API Gateway websocket. It implements the public, private and presence channel
+ * interfaces of laravel-echo (v1 and v2) without extending its internal classes.
  */
-export class Channel extends BaseChannel implements PresenceChannel {
+export class Channel {
     /**
-     * The Pusher client instance.
+     * The websocket connection.
      */
     socket: Websocket;
 
@@ -22,7 +24,7 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Channel options.
      */
-    options: object;
+    options: Options;
 
     /**
      * The event formatter.
@@ -32,31 +34,29 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Create a new class instance.
      */
-    constructor(socket: Websocket, name: string, options: object) {
-        super();
-
+    constructor(socket: Websocket, name: string, options: Options) {
         this.name = name;
         this.socket = socket;
         this.options = options;
-        this.eventFormatter = new EventFormatter(this.options["namespace"]);
+        this.eventFormatter = new EventFormatter(this.options.namespace);
 
         this.subscribe();
     }
 
     /**
-     * Subscribe to a Pusher channel.
+     * Subscribe to the channel.
      */
-    subscribe(): any {
-        this.options["debug"] && console.log(`${LOG_PREFIX} subscribe for channel ${this.name} ...`);
+    subscribe(): void {
+        this.options.debug && console.log(`${LOG_PREFIX} subscribe for channel ${this.name} ...`);
 
-        this.socket.subscribe(this)
+        this.socket.subscribe(this);
     }
 
     /**
-     * Unsubscribe from a Pusher channel.
+     * Unsubscribe from the channel.
      */
     unsubscribe(): void {
-        this.options["debug"] && console.log(`${LOG_PREFIX} unsubscribe for channel ${this.name} ...`);
+        this.options.debug && console.log(`${LOG_PREFIX} unsubscribe for channel ${this.name} ...`);
 
         this.socket.unsubscribe(this);
     }
@@ -65,96 +65,108 @@ export class Channel extends BaseChannel implements PresenceChannel {
      * Listen for an event on the channel instance.
      */
     listen(event: string, callback: Function): this {
-        this.options["debug"] && console.log(`${LOG_PREFIX} listen to ${event} for channel ${this.name} ...`);
-
-        this.on(this.eventFormatter.format(event), callback);
+        this.options.debug && console.log(`${LOG_PREFIX} listen to ${event} for channel ${this.name} ...`);
 
-        return this;
+        return this.on(this.eventFormatter.format(event), callback);
     }
 
     /**
-     * Stop listening for an event on the channel instance.
+     * Stop listening for an event on the channel instance. Without a callback, every listener of the event is removed.
      */
     stopListening(event: string, callback?: Function): this {
-        this.options["debug"] && console.log(`${LOG_PREFIX} stop listening to ${event} for channel ${this.name} ...`);
+        this.options.debug && console.log(`${LOG_PREFIX} stop listening to ${event} for channel ${this.name} ...`);
 
-        this.socket.unbindEvent(this, event, callback)
+        this.socket.unbind(this, this.eventFormatter.format(event), callback);
 
         return this;
     }
 
     /**
-     * Register a callback to be called anytime a subscription succeeds.
+     * Listen for a whisper event on the channel instance.
      */
-    subscribed(callback: Function): this {
-        this.options["debug"] && console.log(`${LOG_PREFIX} subscribed for channel ${this.name} ...`);
+    listenForWhisper(event: string, callback: Function): this {
+        return this.listen('.client-' + event, callback);
+    }
 
-        this.on('subscription_succeeded', () => {
-            callback();
-        });
+    /**
+     * Stop listening for a whisper event on the channel instance.
+     */
+    stopListeningForWhisper(event: string, callback?: Function): this {
+        return this.stopListening('.client-' + event, callback);
+    }
 
-        return this;
+    /**
+     * Listen for an event on the channel instance.
+     */
+    notification(callback: Function): this {
+        return this.listen(NOTIFICATION_EVENT, callback);
     }
 
     /**
-     * Register a callback to be called anytime a subscription error occurs.
+     * Stop listening for notification events on the channel instance.
      */
-    error(callback: Function): this {
-        this.options["debug"] && console.log(`${LOG_PREFIX} error for channel ${this.name} ...`);
+    stopListeningForNotification(callback?: Function): this {
+        return this.stopListening(NOTIFICATION_EVENT, callback);
+    }
 
-        this.on('error', (status) => {
-            callback(status);
+    /**
+     * Register a callback to be called anytime a subscription succeeds.
+     */
+    subscribed(callback: Function): this {
+        return this.on('subscription_succeeded', () => {
+            callback();
         });
+    }
 
-        return this;
+    /**
+     * Register a callback to be called anytime a subscription or authorization error occurs.
+     */
+    error(callback: Function): this {
+        return this.on('error', callback);
     }
 
     /**
      * Bind a channel to an event.
      */
-    on(event: string, callback: Function): Channel {
-        this.options["debug"] && console.log(`${LOG_PREFIX} on ${event} for channel ${this.name} ...`);
+    on(event: string, callback: Function): this {
+        this.options.debug && console.log(`${LOG_PREFIX} on ${event} for channel ${this.name} ...`);
 
-        this.socket.bind(this, event, callback)
+        this.socket.bind(this, event, callback);
 
         return this;
     }
 
-    whisper(event: string, data: object): this {
-        let channel = this.name;
-        let formattedEvent = "client-" + event;
+    /**
+     * Send a client event to the other members of the channel.
+     */
+    whisper(event: string, data: unknown): this {
         this.socket.send({
-            "event": formattedEvent,
+            event: 'client-' + event,
+            channel: this.name,
             data,
-            channel,
-        })
+        });
 
         return this;
     }
 
-    here(callback: Function): this {
-        // TODO: implement
-
-        return this
+    /**
+     * Presence channels are not supported yet: member tracking is not implemented on the server.
+     */
+    here(_callback: Function): this {
+        return this;
     }
 
     /**
-     * Listen for someone joining the channel.
+     * Presence channels are not supported yet: member tracking is not implemented on the server.
      */
-    joining(callback: Function): this {
-        // TODO: implement
-
-        return this
+    joining(_callback: Function): this {
+        return this;
     }
 
     /**
-     * Listen for someone leaving the channel.
+     * Presence channels are not supported yet: member tracking is not implemented on the server.
      */
-    leaving(callback: Function): this {
-        // TODO: implement
-
-        return this
+    leaving(_callback: Function): this {
+        return this;
     }
 }
-
-export { PresenceChannel };

package/js-src/Connector.ts

@@ -1,12 +1,38 @@
-import {Connector as BaseConnector} from "laravel-echo/src/connector/connector";
-import {Websocket} from "./Websocket";
-import {Channel} from "./Channel";
+import { Websocket } from "./Websocket";
+import type { Options } from "./Websocket";
+import { Channel } from "./Channel";
 
-export const broadcaster = (options: object): Connector => new Connector(options);
+export { Channel };
+export { EventFormatter } from "./EventFormatter";
+export type { AuthorizationData, AuthorizationError, ChannelAuthorization, Options } from "./Websocket";
 
 const LOG_PREFIX = '[LE-AG-Connector]';
 
-export class Connector extends BaseConnector {
+/**
+ * Laravel Echo connector for API Gateway websockets.
+ *
+ * It does not extend laravel-echo's internal classes, so it works with laravel-echo v1 and v2:
+ * both create custom connectors with `new options.broadcaster(options)`.
+ */
+export class Connector {
+    /**
+     * Default connector options, matching laravel-echo's defaults.
+     */
+    static readonly _defaultOptions = {
+        auth: {
+            headers: {},
+        },
+        authEndpoint: '/broadcasting/auth',
+        csrfToken: null,
+        bearerToken: null,
+        host: null,
+        namespace: 'App.Events',
+    };
+
+    /**
+     * Connector options.
+     */
+    options: Options;
 
     socket: Websocket;
 
@@ -16,30 +42,70 @@ export class Connector extends BaseConnector {
     channels: { [name: string]: Channel } = {};
 
     /**
-     * Create a new class instance.
+     * Create a new class instance. Without a host no connection is opened, which keeps
+     * laravel-echo v2's `new broadcaster()` capability check free of side effects.
      */
-    constructor(options: any) {
-        super(options);
+    constructor(options: Options = {}) {
+        this.setOptions(options);
+        this.connect();
     }
 
     /**
-     * Create a fresh Socket.io connection.
+     * Merge the custom options with the defaults and add the CSRF and bearer token headers.
+     */
+    protected setOptions(options: Options): void {
+        this.options = {
+            ...Connector._defaultOptions,
+            ...options,
+            auth: {
+                headers: { ...(options.auth?.headers ?? {}) },
+            },
+        };
+
+        const csrfToken = this.csrfToken();
+
+        if (csrfToken) {
+            this.options.auth.headers['X-CSRF-TOKEN'] = csrfToken;
+        }
+
+        if (this.options.bearerToken) {
+            this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
+        }
+    }
+
+    /**
+     * Extract the CSRF token from the page.
+     */
+    protected csrfToken(): string | null {
+        if (typeof window !== 'undefined' && (window as any).Laravel?.csrfToken) {
+            return (window as any).Laravel.csrfToken;
+        }
+
+        if (this.options.csrfToken) {
+            return this.options.csrfToken;
+        }
+
+        if (typeof document !== 'undefined' && typeof document.querySelector === 'function') {
+            return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? null;
+        }
+
+        return null;
+    }
+
+    /**
+     * Create a fresh websocket connection.
      */
     connect(): void {
-        this.options.debug && console.log(LOG_PREFIX + 'Connect ...' );
+        this.options.debug && console.log(LOG_PREFIX + ' Connect ...');
 
         this.socket = new Websocket(this.options);
+    }
 
-        return;
-
-        //
-        // this.socket.on('reconnect', () => {
-        //     Object.values(this.channels).forEach((channel) => {
-        //         channel.subscribe();
-        //     });
-        // });
-        //
-        // return this.socket;
+    /**
+     * Listen for an event on a channel instance.
+     */
+    listen(name: string, event: string, callback: Function): Channel {
+        return this.channel(name).listen(event, callback);
     }
 
     /**
@@ -57,36 +123,22 @@ export class Connector extends BaseConnector {
      * Get a private channel instance by name.
      */
     privateChannel(name: string): Channel {
-        if (!this.channels['private-' + name]) {
-            this.channels['private-' + name] = new Channel(this.socket, 'private-' + name, this.options);
-        }
-
-        return this.channels['private-' + name] as Channel;
+        return this.channel('private-' + name);
     }
 
     /**
      * Get a presence channel instance by name.
      */
     presenceChannel(name: string): Channel {
-        if (!this.channels['presence-' + name]) {
-            this.channels['presence-' + name] = new Channel(
-                this.socket,
-                'presence-' + name,
-                this.options
-            );
-        }
-
-        return this.channels['presence-' + name] as Channel;
+        return this.channel('presence-' + name);
     }
 
     /**
      * Leave the given channel, as well as its private and presence variants.
      */
     leave(name: string): void {
-        let channels = [name, 'private-' + name, 'presence-' + name];
-
-        channels.forEach((name) => {
-            this.leaveChannel(name);
+        [name, 'private-' + name, 'presence-' + name].forEach((channelName) => {
+            this.leaveChannel(channelName);
         });
     }
 
@@ -104,7 +156,7 @@ export class Connector extends BaseConnector {
     /**
      * Get the socket ID for the connection.
      */
-    socketId(): string {
+    socketId(): string | undefined {
         return this.socket.getSocketId();
     }
 
@@ -112,8 +164,16 @@ export class Connector extends BaseConnector {
      * Disconnect socket connection.
      */
     disconnect(): void {
-        this.options.debug && console.log(LOG_PREFIX + 'Disconnect ...' );
+        this.options.debug && console.log(LOG_PREFIX + ' Disconnect ...');
 
         this.socket.close();
     }
 }
+
+/**
+ * Kept for backwards compatibility: `new Echo({ broadcaster })`. A function declaration (not an arrow
+ * function) so laravel-echo can call it with `new`.
+ */
+export function broadcaster(options?: Options): Connector {
+    return new Connector(options);
+}

package/js-src/EventFormatter.ts

@@ -0,0 +1,24 @@
+/**
+ * Formats event names the same way laravel-echo does, so `listen('OrderCreated')` matches
+ * `App\Events\OrderCreated` and `listen('.custom-name')` matches `custom-name`.
+ */
+export class EventFormatter {
+    constructor(private namespace: string | false) {
+    }
+
+    format(event: string): string {
+        if (['.', '\\'].includes(event.charAt(0))) {
+            return event.substring(1);
+        }
+
+        if (this.namespace) {
+            event = this.namespace + '.' + event;
+        }
+
+        return event.replace(/\./g, '\\');
+    }
+
+    setNamespace(namespace: string | false): void {
+        this.namespace = namespace;
+    }
+}