laravel-echo-api-gateway 0.5.1 → 0.5.3

package/js-src/Channel.ts

@@ -3,6 +3,8 @@ import { Channel as BaseChannel } from 'laravel-echo/src/channel/channel';
 import { PresenceChannel } from "laravel-echo/src/channel";
 import { Websocket } from "./Websocket";
 
+const LOG_PREFIX = '[LE-AG-Channel]';
+
 /**
  * This class represents a Pusher channel.
  */
@@ -45,6 +47,8 @@ export class Channel extends BaseChannel implements PresenceChannel {
      * Subscribe to a Pusher channel.
      */
     subscribe(): any {
+        this.options["debug"] && console.log(`${LOG_PREFIX} subscribe for channel ${this.name} ...`);
+
         this.socket.subscribe(this)
     }
 
@@ -52,13 +56,17 @@ export class Channel extends BaseChannel implements PresenceChannel {
      * Unsubscribe from a Pusher channel.
      */
     unsubscribe(): void {
+        this.options["debug"] && console.log(`${LOG_PREFIX} unsubscribe for channel ${this.name} ...`);
+
         this.socket.unsubscribe(this);
     }
 
     /**
      * Listen for an event on the channel instance.
      */
-    listen(event: string, callback: Function): Channel {
+    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);
 
         return this;
@@ -67,7 +75,9 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Stop listening for an event on the channel instance.
      */
-    stopListening(event: string, callback?: Function): Channel {
+    stopListening(event: string, callback?: Function): this {
+        this.options["debug"] && console.log(`${LOG_PREFIX} stop listening to ${event} for channel ${this.name} ...`);
+
         this.socket.unbindEvent(this, event, callback)
 
         return this;
@@ -76,7 +86,9 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Register a callback to be called anytime a subscription succeeds.
      */
-    subscribed(callback: Function): Channel {
+    subscribed(callback: Function): this {
+        this.options["debug"] && console.log(`${LOG_PREFIX} subscribed for channel ${this.name} ...`);
+
         this.on('subscription_succeeded', () => {
             callback();
         });
@@ -87,7 +99,9 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Register a callback to be called anytime a subscription error occurs.
      */
-    error(callback: Function): Channel {
+    error(callback: Function): this {
+        this.options["debug"] && console.log(`${LOG_PREFIX} error for channel ${this.name} ...`);
+
         this.on('error', (status) => {
             callback(status);
         });
@@ -99,12 +113,14 @@ export class Channel extends BaseChannel implements PresenceChannel {
      * 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} ...`);
+
         this.socket.bind(this, event, callback)
 
         return this;
     }
 
-    whisper(event: string, data: object): Channel {
+    whisper(event: string, data: object): this {
         let channel = this.name;
         let formattedEvent = "client-" + event;
         this.socket.send({
@@ -116,7 +132,7 @@ export class Channel extends BaseChannel implements PresenceChannel {
         return this;
     }
 
-    here(callback: Function): Channel {
+    here(callback: Function): this {
         // TODO: implement
 
         return this
@@ -125,7 +141,7 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Listen for someone joining the channel.
      */
-    joining(callback: Function): Channel {
+    joining(callback: Function): this {
         // TODO: implement
 
         return this
@@ -134,9 +150,11 @@ export class Channel extends BaseChannel implements PresenceChannel {
     /**
      * Listen for someone leaving the channel.
      */
-    leaving(callback: Function): Channel {
+    leaving(callback: Function): this {
         // TODO: implement
 
         return this
     }
 }
+
+export { PresenceChannel };

package/js-src/Connector.ts

@@ -4,10 +4,10 @@ import {Channel} from "./Channel";
 
 export const broadcaster = (options: object): Connector => new Connector(options);
 
+const LOG_PREFIX = '[LE-AG-Connector]';
+
 export class Connector extends BaseConnector {
-    /**
-     * The Socket.io connection instance.
-     */
+
     socket: Websocket;
 
     /**
@@ -15,10 +15,19 @@ export class Connector extends BaseConnector {
      */
     channels: { [name: string]: Channel } = {};
 
+    /**
+     * Create a new class instance.
+     */
+    constructor(options: any) {
+        super(options);
+    }
+
     /**
      * Create a fresh Socket.io connection.
      */
     connect(): void {
+        this.options.debug && console.log(LOG_PREFIX + 'Connect ...' );
+
         this.socket = new Websocket(this.options);
 
         return;
@@ -103,6 +112,8 @@ export class Connector extends BaseConnector {
      * Disconnect socket connection.
      */
     disconnect(): void {
+        this.options.debug && console.log(LOG_PREFIX + 'Disconnect ...' );
+
         this.socket.close();
     }
 }

package/js-src/Websocket.ts

@@ -1,10 +1,13 @@
 import { AxiosResponse } from "axios";
 import { Channel } from "./Channel";
+import axios from 'axios';
 
 export type Options = { authEndpoint: string, host: string, bearerToken: string, auth: any, debug: boolean };
 
 export type MessageBody = { event: string, channel?: string, data: object };
 
+const LOG_PREFIX = '[LE-AG-Websocket]';
+
 export class Websocket {
     buffer: Array<object> = [];
 
@@ -12,7 +15,7 @@ export class Websocket {
 
     websocket: WebSocket;
 
-    private listeners: { [channelName: string]: { [eventName: string]: Function } } = {}
+    private listeners: { [channelName: string]: { [eventName: string]: Function } } = {};
 
     private internalListeners: { [eventName: string]: Function } = {};
 
@@ -21,145 +24,176 @@ export class Websocket {
     private socketId: string;
 
     private closing = false;
+    private hasConnected = false;
 
     private pingInterval: NodeJS.Timeout;
 
+    constructor(options: Options) {
+        this.options = options;
+
+        this.connect(this.options.host);
+
+        return this;
+    }
+
     private connect(host: string): void {
-        this.options.debug && console.log('Connecting');
 
-        this.websocket = new WebSocket(host)
+        if (!host) {
+            this.options.debug && console.error(LOG_PREFIX + `Cannont connect without host !`);
+
+            return;
+        }
+
+        this.options.debug && console.log(LOG_PREFIX + `Trying to connect to ${host}...` );
+
+        this.websocket = new WebSocket(host);
+
+        this.websocket.onerror = () => {
+
+            if (!this.hasConnected) {
+
+                setTimeout(() => {
+                    this.socketId = undefined;
+                    this.connect(host);
+                }, 3000);
+            }
+        };
 
         this.websocket.onopen = () => {
+            this.options.debug && console.log(LOG_PREFIX + ' Connected !');
+            this.hasConnected = true;
+
             this.send({
                 event: 'whoami',
-            })
+            });
 
             while (this.buffer.length) {
-                const message = this.buffer[0]
+                const message = this.buffer[0];
 
-                this.send(message)
+                this.send(message);
 
-                this.buffer.splice(0, 1)
+                this.buffer.splice(0, 1);
             }
-        }
-
-        this.websocket.onmessage = (messageEvent: MessageEvent) => {
-            const message = this.parseMessage(messageEvent.data)
 
-            if (!message) {
-                return
-            }
+            // Register events only once connected, or they won't be registered if connection failed/lost
 
-            if (message.channel) {
-                this.options.debug && console.log(`Received event ${message.event} on channel ${message.channel}`)
+            this.websocket.onmessage = (messageEvent: MessageEvent) => {
+                const message = this.parseMessage(messageEvent.data);
+                this.options.debug && console.log(LOG_PREFIX + ' onmessage', messageEvent.data);
 
-                if (this.listeners[message.channel] && this.listeners[message.channel][message.event]) {
-                    this.listeners[message.channel][message.event](message.data)
+                if (!message) {
+                    return;
                 }
 
-                return
-            }
-
-            if (this.internalListeners[message.event]) {
-                this.internalListeners[message.event](message.data)
-            }
+                if (message.channel) {
+                    this.options.debug && console.log(`${LOG_PREFIX} Received event ${message.event} on channel ${message.channel}`);
 
-        }
+                    if (this.listeners[message.channel] && this.listeners[message.channel][message.event]) {
+                        this.listeners[message.channel][message.event](message.data);
+                    }
 
+                    return;
+                }
 
-        this.websocket.onclose = () => {
-            if (this.socketId && !this.closing || !this.socketId) {
-                this.options.debug && console.info('Connection lost, reconnecting...');
-                setTimeout(() => {
-                    this.socketId = undefined
-                    this.connect(host)
-                }, 1000);
+                if (this.internalListeners[message.event]) {
+                    this.internalListeners[message.event](message.data);
+                }
             }
-        };
 
-        this.on('whoami', ({ socket_id: socketId }) => {
-            this.socketId = socketId
 
-            this.options.debug && console.log(`just set socketId to ${socketId}`)
+            // send ping every 60 seconds to keep connection alive
+            this.pingInterval = setInterval(() => {
+                if (this.websocket.readyState === this.websocket.OPEN) {
+                    this.options.debug && console.log(LOG_PREFIX + ' Sending ping');
+
+                    this.send({
+                        event: 'ping',
+                    });
+                }
+            }, 60 * 1000);
+        }
 
-            while (this.channelBacklog.length) {
-                const channel = this.channelBacklog[0]
 
-                this.actuallySubscribe(channel)
+        this.websocket.onclose = () => {
+            this.options.debug && console.info('Connection closed.');
 
-                this.channelBacklog.splice(0, 1)
+            if (this.closing){
+                return;
             }
-        })
 
+            this.hasConnected = false;
+            this.options.debug && console.info('Connection lost, reconnecting...');
 
-        // send ping every 60 seconds to keep connection alive
-        this.pingInterval = setInterval(() => {
-            if (this.websocket.readyState === this.websocket.OPEN) {
-                this.options.debug && console.log('Sending ping')
-                this.send({
-                    event: 'ping',
-                })
-            }
-        }, 60 * 1000)
+            setTimeout(() => {
+                this.socketId = undefined;
+                this.connect(host);
+            }, 1000);
+        };
 
-    }
+        this.on('whoami', ({ socket_id: socketId }) => {
+            this.socketId = socketId;
 
-    constructor(options: Options) {
-        this.options = options;
+            this.options.debug && console.log(`${LOG_PREFIX} Just set socketId to ${socketId}`);
 
-        this.connect(this.options.host);
+            // Handle the backlog and don't empty it, we'll need it if we lose connection
+            let channel: Channel;
 
-        return this
+            for(channel of this.channelBacklog){
+                this.actuallySubscribe(channel);
+            }
+        });
     }
 
     protected parseMessage(body: string): MessageBody {
         try {
-            return JSON.parse(body)
+            return JSON.parse(body);
         } catch (error) {
-            this.options.debug && console.error(error)
+            this.options.debug && console.error(error);
 
-            return undefined
+            return undefined;
         }
     }
 
     getSocketId(): string {
-        return this.socketId
+        return this.socketId;
     }
 
     private socketIsReady(): boolean {
-        return this.websocket.readyState === this.websocket.OPEN
+        return this.websocket.readyState === this.websocket.OPEN;
     }
 
     send(message: object): void {
         if (this.socketIsReady()) {
-            this.websocket.send(JSON.stringify(message))
-            return
+            this.websocket.send(JSON.stringify(message));
+            return;
         }
 
-        this.buffer.push(message)
+        this.buffer.push(message);
     }
 
     close(): void {
-        this.closing = true
-        this.internalListeners = {}
+        this.closing = true;
+        this.internalListeners = {};
 
-        clearInterval(this.pingInterval)
-        this.pingInterval = undefined
+        clearInterval(this.pingInterval);
+        this.pingInterval = undefined;
 
-        this.websocket.close()
+        this.websocket.close();
     }
 
     subscribe(channel: Channel): void {
         if (this.getSocketId()) {
-            this.actuallySubscribe(channel)
+            this.actuallySubscribe(channel);
         } else {
-            this.channelBacklog.push(channel)
+            this.options.debug && console.log(`${LOG_PREFIX} subscribe - push channel backlog for channel ${channel.name}`);
+
+            this.channelBacklog.push(channel);
         }
     }
 
     private actuallySubscribe(channel: Channel): void {
         if (channel.name.startsWith('private-') || channel.name.startsWith('presence-')) {
-            this.options.debug && console.log(`Sending auth request for channel ${channel.name}`)
+            this.options.debug && console.log(`${LOG_PREFIX} Sending auth request for channel ${channel.name}`);
 
             if (this.options.bearerToken) {
                 this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
@@ -171,7 +205,7 @@ export class Websocket {
             }, {
               headers: this.options.auth.headers || {}
             }).then((response: AxiosResponse) => {
-                this.options.debug && console.log(`Subscribing to channels ${channel.name}`)
+                this.options.debug && console.log(`${LOG_PREFIX} Subscribing to private channel ${channel.name}`);
 
                 this.send({
                     event: 'subscribe',
@@ -179,51 +213,59 @@ export class Websocket {
                         channel: channel.name,
                         ...response.data
                     },
-                })
+                });
             }).catch((error) => {
-                this.options.debug && console.log(`Auth request for channel ${channel.name} failed`)
-                this.options.debug && console.error(error)
+                this.options.debug && console.log(`${LOG_PREFIX} Auth request for channel ${channel.name} failed`);
+                this.options.debug && console.error(error);
             })
         } else {
-            this.options.debug && console.log(`Subscribing to channels ${channel.name}`)
+            this.options.debug && console.log(`${LOG_PREFIX} Subscribing to channel ${channel.name}`);
 
             this.send({
                 event: 'subscribe',
                 data: {
                     channel: channel.name,
                 },
-            })
+            });
         }
     }
 
     unsubscribe(channel: Channel): void {
+        this.options.debug && console.log(`${LOG_PREFIX} unsubscribe for channel ${channel.name}`);
+
         this.send({
             event: 'unsubscribe',
             data: {
                 channel: channel.name,
             },
-        })
+        });
 
         if (this.listeners[channel.name]) {
-            delete this.listeners[channel.name]
+            delete this.listeners[channel.name];
         }
     }
 
     on(event: string, callback: Function = null): void {
-        this.internalListeners[event] = callback
+        this.options.debug && console.log(`${LOG_PREFIX} on event ${event} ...`);
+
+        this.internalListeners[event] = callback;
     }
 
     bind(channel: Channel, event: string, callback: Function): void {
+        this.options.debug && console.log(`${LOG_PREFIX} bind event ${event} for channel ${channel.name} ...`);
+
         if (!this.listeners[channel.name]) {
-            this.listeners[channel.name] = {}
+            this.listeners[channel.name] = {};
         }
 
-        this.listeners[channel.name][event] = callback
+        this.listeners[channel.name][event] = callback;
     }
 
     unbindEvent(channel: Channel, event: string, callback: Function = null): void {
+        this.options.debug && console.log(`${LOG_PREFIX} unbind event ${event} for channel ${channel.name} ...`);
+
         if (this.internalListeners[event] && (callback === null || this.internalListeners[event] === callback)) {
-            delete this.internalListeners[event]
+            delete this.internalListeners[event];
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "laravel-echo-api-gateway",
-    "version": "0.5.1",
+    "version": "0.5.3",
     "description": "Use Laravel Echo with API Gateway Websockets",
     "keywords": [
         "laravel",
@@ -40,6 +40,7 @@
         "@babel/plugin-transform-object-assign": "^7.8.3",
         "@babel/preset-env": "^7.9.6",
         "@rollup/plugin-babel": "^5.0.0",
+        "@types/babel__traverse": "^7.20.6",
         "@types/jest": "^24.0.18",
         "@types/node": "^12.7.5",
         "@typescript-eslint/eslint-plugin": "^3.7.0",
@@ -48,14 +49,17 @@
         "eslint": "^7.5.0",
         "jest": "^24.9.0",
         "jest-websocket-mock": "^2.2.0",
-        "laravel-echo": "^1.10.0",
+        "laravel-echo": "1.10.0",
         "mock-socket": "^9.0.3",
         "rollup": "^2.10.2",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "rollup-plugin-json": "^4.0.0",
+        "rollup-plugin-node-resolve": "^5.2.0",
         "rollup-plugin-typescript2": "^0.27.1",
         "standard-version": "^8.0.1",
         "ts-jest": "^24.1.0",
         "tslib": "^1.10.0",
-        "typescript": "^3.6.3"
+        "typescript": "^5.7.2"
     },
     "engines": {
         "node": ">=10"

package/rollup.config.js

@@ -9,7 +9,10 @@ export default {
         { file: './dist/laravel-echo-api-gateway.iife.js', format: 'iife', name: 'LaravelEchoApiGateway' },
     ],
     plugins: [
-        typescript(),
+        typescript({
+            tsconfig: './tsconfig.json', // Chemin explicite vers votre fichier TypeScript
+            useTsconfigDeclarationDir: true, // Respecte les options `outDir` et `declarationDir`
+        }),
         babel({
             babelHelpers: 'bundled',
             exclude: 'node_modules/**',