laravel-echo-api-gateway 0.1.2 → 0.5.1

package/.github/workflows/ci.yml

@@ -7,12 +7,16 @@ on:
 jobs:
   pest:
     runs-on: ubuntu-latest
-    name: PestPHP
+    strategy:
+      fail-fast: true
+      matrix:
+        php: ['8.1']
+    name: Pest - PHP ${{ matrix.php }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: shivammathur/setup-php@v2
         with:
-          php-version: '8.0'
+          php-version: ${{ matrix.php }}
           extensions: dom, mbstring, soap, bcmath, pdo_sqlite, intl
           coverage: pcov
       - uses: ramsey/composer-install@v1
@@ -26,10 +30,10 @@ jobs:
           AWS_SESSION_TOKEN: fake
       - name: Upload coverage to Codecov
         if: always()
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v2
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          flags: pest
+          flags: pest-${{ matrix.php }}
           file: test-results/pest.xml
 
   larastan:
@@ -39,7 +43,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: shivammathur/setup-php@v2
         with:
-          php-version: '8.0'
+          php-version: ${{ matrix.php }}
           extensions: soap, bcmath, pdo_sqlite, intl
       - uses: ramsey/composer-install@v1
         with:
@@ -76,7 +80,6 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: jest
           file: test-results/jest/clover.xml
-
 #  phpcs:
 #    runs-on: ubuntu-latest
 #    name: PHP Style Fixer

package/.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.release.target_commitish }}
       - name: Use Node.js 12
@@ -24,7 +24,7 @@ jobs:
       - run: yarn version --new-version ${{ github.event.release.tag_name }} --no-git-tag-version
       #      - run: yarn run build
       #      - run: yarn test
-      - run: yarn publish --access public --tag latest
+      - run: yarn publish --verbose --access public --tag latest
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: git add package.json

package/README.md

@@ -21,7 +21,7 @@ advised to only use this package for non-critical / non-production projects.
 In order to use this package, your project needs to meet the following criteria:
 
 - PHP 7.4 or 8.x
-- Laravel 6, 7 or 8
+- Laravel 6 to 11
 - Uses either [bref](https://bref.sh) or [Laravel Vapor](https://vapor.laravel.com) to deploy to AWS
 - Has a working queue
 - Uses Laravel Mix or any other tool to bundle your assets
@@ -120,6 +120,7 @@ provider:
 
     environment:
         # Add these variables
+        # Please note : in Laravel 11, this setting is now BROADCAST_CONNECTION
         BROADCAST_DRIVER: laravel-echo-api-gateway
         LARAVEL_ECHO_API_GATEWAY_DYNAMODB_TABLE: !Ref ConnectionsTable
         LARAVEL_ECHO_API_GATEWAY_API_ID: !Ref WebsocketsApi
@@ -196,7 +197,24 @@ window.Echo = new Echo({
     broadcaster,
     // replace the placeholders
     host: 'wss://{api-ip}.execute-api.{region}.amazonaws.com/{stage}',
+    authEndpoint: '{auth-url}/broadcasting/auth', // Optional: Use if you have a separate authentication endpoint
+    bearerToken: '{token}', // Optional: Use if you need a Bearer Token for authentication
 });
 ```
 
+You can also enable console output by passing a `debug: true` otpion to your window.Echo intializer : 
+```js
+import Echo from 'laravel-echo';
+import {broadcaster} from 'laravel-echo-api-gateway';
+
+window.Echo = new Echo({
+    broadcaster,
+    // replace the placeholders
+    host: 'wss://{api-ip}.execute-api.{region}.amazonaws.com/{stage}',
+    debug: true
+});
+```
+
+
+
 Lastly, you have to generate your assets by running Laravel Mix. After this step, you should be up and running.

package/dist/js-src/Websocket.d.ts

@@ -2,6 +2,9 @@ import { Channel } from "./Channel";
 export declare type Options = {
     authEndpoint: string;
     host: string;
+    bearerToken: string;
+    auth: any;
+    debug: boolean;
 };
 export declare type MessageBody = {
     event: string;
@@ -16,7 +19,9 @@ export declare class Websocket {
     private internalListeners;
     private channelBacklog;
     private socketId;
+    private closing;
     private pingInterval;
+    private connect;
     constructor(options: Options);
     protected parseMessage(body: string): MessageBody;
     getSocketId(): string;

package/dist/laravel-echo-api-gateway.common.js

@@ -21,20 +21,44 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
+  Object.defineProperty(subClass, "prototype", {
+    value: Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    }),
+    writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
@@ -61,7 +85,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -79,6 +103,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -157,83 +183,104 @@ class Connector {
 
 var Websocket = /*#__PURE__*/function () {
   function Websocket(options) {
-    var _this = this;
-
     _classCallCheck(this, Websocket);
 
     this.buffer = [];
     this.listeners = {};
     this.internalListeners = {};
     this.channelBacklog = [];
+    this.closing = false;
     this.options = options;
-    this.websocket = new WebSocket(options.host);
+    this.connect(this.options.host);
+    return this;
+  }
 
-    this.websocket.onopen = function () {
-      while (_this.buffer.length) {
-        var message = _this.buffer[0];
+  _createClass(Websocket, [{
+    key: "connect",
+    value: function connect(host) {
+      var _this = this;
 
-        _this.send(message);
+      this.options.debug && console.log('Connecting');
+      this.websocket = new WebSocket(host);
 
-        _this.buffer.splice(0, 1);
-      }
-    };
+      this.websocket.onopen = function () {
+        _this.send({
+          event: 'whoami'
+        });
 
-    this.websocket.onmessage = function (messageEvent) {
-      var message = _this.parseMessage(messageEvent.data);
+        while (_this.buffer.length) {
+          var message = _this.buffer[0];
 
-      if (!message) {
-        return;
-      }
+          _this.send(message);
+
+          _this.buffer.splice(0, 1);
+        }
+      };
 
-      if (message.channel) {
-        console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
+      this.websocket.onmessage = function (messageEvent) {
+        var message = _this.parseMessage(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 (message.channel) {
+          _this.options.debug && console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
 
-      if (_this.internalListeners[message.event]) {
-        _this.internalListeners[message.event](message.data);
-      }
-    };
+          if (_this.listeners[message.channel] && _this.listeners[message.channel][message.event]) {
+            _this.listeners[message.channel][message.event](message.data);
+          }
 
-    this.on('whoami', function (_ref) {
-      var socketId = _ref.socket_id;
-      _this.socketId = socketId;
-      console.log("just set socketId to ".concat(socketId));
+          return;
+        }
 
-      while (_this.channelBacklog.length) {
-        var channel = _this.channelBacklog[0];
+        if (_this.internalListeners[message.event]) {
+          _this.internalListeners[message.event](message.data);
+        }
+      };
 
-        _this.actuallySubscribe(channel);
+      this.websocket.onclose = function () {
+        if (_this.socketId && !_this.closing || !_this.socketId) {
+          _this.options.debug && console.info('Connection lost, reconnecting...');
+          setTimeout(function () {
+            _this.socketId = undefined;
 
-        _this.channelBacklog.splice(0, 1);
-      }
-    });
-    this.send({
-      event: 'whoami'
-    }); // send ping every 60 seconds to keep connection alive
+            _this.connect(host);
+          }, 1000);
+        }
+      };
 
-    this.pingInterval = setInterval(function () {
-      console.log('Sending ping');
+      this.on('whoami', function (_ref) {
+        var socketId = _ref.socket_id;
+        _this.socketId = socketId;
+        _this.options.debug && console.log("just set socketId to ".concat(socketId));
 
-      _this.send({
-        event: 'ping'
-      });
-    }, 60 * 1000);
-    return this;
-  }
+        while (_this.channelBacklog.length) {
+          var channel = _this.channelBacklog[0];
 
-  _createClass(Websocket, [{
+          _this.actuallySubscribe(channel);
+
+          _this.channelBacklog.splice(0, 1);
+        }
+      }); // send ping every 60 seconds to keep connection alive
+
+      this.pingInterval = setInterval(function () {
+        if (_this.websocket.readyState === _this.websocket.OPEN) {
+          _this.options.debug && console.log('Sending ping');
+
+          _this.send({
+            event: 'ping'
+          });
+        }
+      }, 60 * 1000);
+    }
+  }, {
     key: "parseMessage",
     value: function parseMessage(body) {
       try {
         return JSON.parse(body);
       } catch (error) {
-        console.error(error);
+        this.options.debug && console.error(error);
         return undefined;
       }
     }
@@ -260,6 +307,7 @@ var Websocket = /*#__PURE__*/function () {
   }, {
     key: "close",
     value: function close() {
+      this.closing = true;
       this.internalListeners = {};
       clearInterval(this.pingInterval);
       this.pingInterval = undefined;
@@ -280,26 +328,32 @@ var Websocket = /*#__PURE__*/function () {
       var _this2 = this;
 
       if (channel.name.startsWith('private-') || channel.name.startsWith('presence-')) {
-        console.log("Sending auth request for channel ".concat(channel.name));
+        this.options.debug && console.log("Sending auth request for channel ".concat(channel.name));
+
+        if (this.options.bearerToken) {
+          this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
+        }
+
         axios.post(this.options.authEndpoint, {
           socket_id: this.getSocketId(),
           channel_name: channel.name
+        }, {
+          headers: this.options.auth.headers || {}
         }).then(function (response) {
-          console.log("Subscribing to channels ".concat(channel.name));
+          _this2.options.debug && console.log("Subscribing to channels ".concat(channel.name));
 
           _this2.send({
             event: 'subscribe',
-            data: {
-              channel: channel.name,
-              auth: response.data.auth
-            }
+            data: _extends({
+              channel: channel.name
+            }, response.data)
           });
         })["catch"](function (error) {
-          console.log("Auth request for channel ".concat(channel.name, " failed"));
-          console.error(error);
+          _this2.options.debug && console.log("Auth request for channel ".concat(channel.name, " failed"));
+          _this2.options.debug && console.error(error);
         });
       } else {
-        console.log("Subscribing to channels ".concat(channel.name));
+        this.options.debug && console.log("Subscribing to channels ".concat(channel.name));
         this.send({
           event: 'subscribe',
           data: {
@@ -508,9 +562,12 @@ var Channel$1 = /*#__PURE__*/function (_BaseChannel) {
   }, {
     key: "whisper",
     value: function whisper(event, data) {
+      var channel = this.name;
+      var formattedEvent = "client-" + event;
       this.socket.send({
-        event: event,
-        data: data
+        "event": formattedEvent,
+        data: data,
+        channel: channel
       });
       return this;
     }

package/dist/laravel-echo-api-gateway.iife.js

@@ -20,20 +20,44 @@ var LaravelEchoApiGateway = (function (exports) {
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
   function _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
     }
 
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
-      }
+    Object.defineProperty(subClass, "prototype", {
+      value: Object.create(superClass && superClass.prototype, {
+        constructor: {
+          value: subClass,
+          writable: true,
+          configurable: true
+        }
+      }),
+      writable: false
     });
     if (superClass) _setPrototypeOf(subClass, superClass);
   }
@@ -60,7 +84,7 @@ var LaravelEchoApiGateway = (function (exports) {
     if (typeof Proxy === "function") return true;
 
     try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
       return true;
     } catch (e) {
       return false;
@@ -78,6 +102,8 @@ var LaravelEchoApiGateway = (function (exports) {
   function _possibleConstructorReturn(self, call) {
     if (call && (typeof call === "object" || typeof call === "function")) {
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
 
     return _assertThisInitialized(self);
@@ -156,83 +182,104 @@ var LaravelEchoApiGateway = (function (exports) {
 
   var Websocket = /*#__PURE__*/function () {
     function Websocket(options) {
-      var _this = this;
-
       _classCallCheck(this, Websocket);
 
       this.buffer = [];
       this.listeners = {};
       this.internalListeners = {};
       this.channelBacklog = [];
+      this.closing = false;
       this.options = options;
-      this.websocket = new WebSocket(options.host);
+      this.connect(this.options.host);
+      return this;
+    }
 
-      this.websocket.onopen = function () {
-        while (_this.buffer.length) {
-          var message = _this.buffer[0];
+    _createClass(Websocket, [{
+      key: "connect",
+      value: function connect(host) {
+        var _this = this;
 
-          _this.send(message);
+        this.options.debug && console.log('Connecting');
+        this.websocket = new WebSocket(host);
 
-          _this.buffer.splice(0, 1);
-        }
-      };
+        this.websocket.onopen = function () {
+          _this.send({
+            event: 'whoami'
+          });
 
-      this.websocket.onmessage = function (messageEvent) {
-        var message = _this.parseMessage(messageEvent.data);
+          while (_this.buffer.length) {
+            var message = _this.buffer[0];
 
-        if (!message) {
-          return;
-        }
+            _this.send(message);
+
+            _this.buffer.splice(0, 1);
+          }
+        };
 
-        if (message.channel) {
-          console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
+        this.websocket.onmessage = function (messageEvent) {
+          var message = _this.parseMessage(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 (message.channel) {
+            _this.options.debug && console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
 
-        if (_this.internalListeners[message.event]) {
-          _this.internalListeners[message.event](message.data);
-        }
-      };
+            if (_this.listeners[message.channel] && _this.listeners[message.channel][message.event]) {
+              _this.listeners[message.channel][message.event](message.data);
+            }
 
-      this.on('whoami', function (_ref) {
-        var socketId = _ref.socket_id;
-        _this.socketId = socketId;
-        console.log("just set socketId to ".concat(socketId));
+            return;
+          }
 
-        while (_this.channelBacklog.length) {
-          var channel = _this.channelBacklog[0];
+          if (_this.internalListeners[message.event]) {
+            _this.internalListeners[message.event](message.data);
+          }
+        };
 
-          _this.actuallySubscribe(channel);
+        this.websocket.onclose = function () {
+          if (_this.socketId && !_this.closing || !_this.socketId) {
+            _this.options.debug && console.info('Connection lost, reconnecting...');
+            setTimeout(function () {
+              _this.socketId = undefined;
 
-          _this.channelBacklog.splice(0, 1);
-        }
-      });
-      this.send({
-        event: 'whoami'
-      }); // send ping every 60 seconds to keep connection alive
+              _this.connect(host);
+            }, 1000);
+          }
+        };
 
-      this.pingInterval = setInterval(function () {
-        console.log('Sending ping');
+        this.on('whoami', function (_ref) {
+          var socketId = _ref.socket_id;
+          _this.socketId = socketId;
+          _this.options.debug && console.log("just set socketId to ".concat(socketId));
 
-        _this.send({
-          event: 'ping'
-        });
-      }, 60 * 1000);
-      return this;
-    }
+          while (_this.channelBacklog.length) {
+            var channel = _this.channelBacklog[0];
 
-    _createClass(Websocket, [{
+            _this.actuallySubscribe(channel);
+
+            _this.channelBacklog.splice(0, 1);
+          }
+        }); // send ping every 60 seconds to keep connection alive
+
+        this.pingInterval = setInterval(function () {
+          if (_this.websocket.readyState === _this.websocket.OPEN) {
+            _this.options.debug && console.log('Sending ping');
+
+            _this.send({
+              event: 'ping'
+            });
+          }
+        }, 60 * 1000);
+      }
+    }, {
       key: "parseMessage",
       value: function parseMessage(body) {
         try {
           return JSON.parse(body);
         } catch (error) {
-          console.error(error);
+          this.options.debug && console.error(error);
           return undefined;
         }
       }
@@ -259,6 +306,7 @@ var LaravelEchoApiGateway = (function (exports) {
     }, {
       key: "close",
       value: function close() {
+        this.closing = true;
         this.internalListeners = {};
         clearInterval(this.pingInterval);
         this.pingInterval = undefined;
@@ -279,26 +327,32 @@ var LaravelEchoApiGateway = (function (exports) {
         var _this2 = this;
 
         if (channel.name.startsWith('private-') || channel.name.startsWith('presence-')) {
-          console.log("Sending auth request for channel ".concat(channel.name));
+          this.options.debug && console.log("Sending auth request for channel ".concat(channel.name));
+
+          if (this.options.bearerToken) {
+            this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
+          }
+
           axios.post(this.options.authEndpoint, {
             socket_id: this.getSocketId(),
             channel_name: channel.name
+          }, {
+            headers: this.options.auth.headers || {}
           }).then(function (response) {
-            console.log("Subscribing to channels ".concat(channel.name));
+            _this2.options.debug && console.log("Subscribing to channels ".concat(channel.name));
 
             _this2.send({
               event: 'subscribe',
-              data: {
-                channel: channel.name,
-                auth: response.data.auth
-              }
+              data: _extends({
+                channel: channel.name
+              }, response.data)
             });
           })["catch"](function (error) {
-            console.log("Auth request for channel ".concat(channel.name, " failed"));
-            console.error(error);
+            _this2.options.debug && console.log("Auth request for channel ".concat(channel.name, " failed"));
+            _this2.options.debug && console.error(error);
           });
         } else {
-          console.log("Subscribing to channels ".concat(channel.name));
+          this.options.debug && console.log("Subscribing to channels ".concat(channel.name));
           this.send({
             event: 'subscribe',
             data: {
@@ -507,9 +561,12 @@ var LaravelEchoApiGateway = (function (exports) {
     }, {
       key: "whisper",
       value: function whisper(event, data) {
+        var channel = this.name;
+        var formattedEvent = "client-" + event;
         this.socket.send({
-          event: event,
-          data: data
+          "event": formattedEvent,
+          data: data,
+          channel: channel
         });
         return this;
       }

package/dist/laravel-echo-api-gateway.js

@@ -17,20 +17,44 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
+  Object.defineProperty(subClass, "prototype", {
+    value: Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    }),
+    writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
@@ -57,7 +81,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -75,6 +99,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -153,83 +179,104 @@ class Connector {
 
 var Websocket = /*#__PURE__*/function () {
   function Websocket(options) {
-    var _this = this;
-
     _classCallCheck(this, Websocket);
 
     this.buffer = [];
     this.listeners = {};
     this.internalListeners = {};
     this.channelBacklog = [];
+    this.closing = false;
     this.options = options;
-    this.websocket = new WebSocket(options.host);
+    this.connect(this.options.host);
+    return this;
+  }
 
-    this.websocket.onopen = function () {
-      while (_this.buffer.length) {
-        var message = _this.buffer[0];
+  _createClass(Websocket, [{
+    key: "connect",
+    value: function connect(host) {
+      var _this = this;
 
-        _this.send(message);
+      this.options.debug && console.log('Connecting');
+      this.websocket = new WebSocket(host);
 
-        _this.buffer.splice(0, 1);
-      }
-    };
+      this.websocket.onopen = function () {
+        _this.send({
+          event: 'whoami'
+        });
 
-    this.websocket.onmessage = function (messageEvent) {
-      var message = _this.parseMessage(messageEvent.data);
+        while (_this.buffer.length) {
+          var message = _this.buffer[0];
 
-      if (!message) {
-        return;
-      }
+          _this.send(message);
+
+          _this.buffer.splice(0, 1);
+        }
+      };
 
-      if (message.channel) {
-        console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
+      this.websocket.onmessage = function (messageEvent) {
+        var message = _this.parseMessage(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 (message.channel) {
+          _this.options.debug && console.log("Received event ".concat(message.event, " on channel ").concat(message.channel));
 
-      if (_this.internalListeners[message.event]) {
-        _this.internalListeners[message.event](message.data);
-      }
-    };
+          if (_this.listeners[message.channel] && _this.listeners[message.channel][message.event]) {
+            _this.listeners[message.channel][message.event](message.data);
+          }
 
-    this.on('whoami', function (_ref) {
-      var socketId = _ref.socket_id;
-      _this.socketId = socketId;
-      console.log("just set socketId to ".concat(socketId));
+          return;
+        }
 
-      while (_this.channelBacklog.length) {
-        var channel = _this.channelBacklog[0];
+        if (_this.internalListeners[message.event]) {
+          _this.internalListeners[message.event](message.data);
+        }
+      };
 
-        _this.actuallySubscribe(channel);
+      this.websocket.onclose = function () {
+        if (_this.socketId && !_this.closing || !_this.socketId) {
+          _this.options.debug && console.info('Connection lost, reconnecting...');
+          setTimeout(function () {
+            _this.socketId = undefined;
 
-        _this.channelBacklog.splice(0, 1);
-      }
-    });
-    this.send({
-      event: 'whoami'
-    }); // send ping every 60 seconds to keep connection alive
+            _this.connect(host);
+          }, 1000);
+        }
+      };
 
-    this.pingInterval = setInterval(function () {
-      console.log('Sending ping');
+      this.on('whoami', function (_ref) {
+        var socketId = _ref.socket_id;
+        _this.socketId = socketId;
+        _this.options.debug && console.log("just set socketId to ".concat(socketId));
 
-      _this.send({
-        event: 'ping'
-      });
-    }, 60 * 1000);
-    return this;
-  }
+        while (_this.channelBacklog.length) {
+          var channel = _this.channelBacklog[0];
 
-  _createClass(Websocket, [{
+          _this.actuallySubscribe(channel);
+
+          _this.channelBacklog.splice(0, 1);
+        }
+      }); // send ping every 60 seconds to keep connection alive
+
+      this.pingInterval = setInterval(function () {
+        if (_this.websocket.readyState === _this.websocket.OPEN) {
+          _this.options.debug && console.log('Sending ping');
+
+          _this.send({
+            event: 'ping'
+          });
+        }
+      }, 60 * 1000);
+    }
+  }, {
     key: "parseMessage",
     value: function parseMessage(body) {
       try {
         return JSON.parse(body);
       } catch (error) {
-        console.error(error);
+        this.options.debug && console.error(error);
         return undefined;
       }
     }
@@ -256,6 +303,7 @@ var Websocket = /*#__PURE__*/function () {
   }, {
     key: "close",
     value: function close() {
+      this.closing = true;
       this.internalListeners = {};
       clearInterval(this.pingInterval);
       this.pingInterval = undefined;
@@ -276,26 +324,32 @@ var Websocket = /*#__PURE__*/function () {
       var _this2 = this;
 
       if (channel.name.startsWith('private-') || channel.name.startsWith('presence-')) {
-        console.log("Sending auth request for channel ".concat(channel.name));
+        this.options.debug && console.log("Sending auth request for channel ".concat(channel.name));
+
+        if (this.options.bearerToken) {
+          this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
+        }
+
         axios.post(this.options.authEndpoint, {
           socket_id: this.getSocketId(),
           channel_name: channel.name
+        }, {
+          headers: this.options.auth.headers || {}
         }).then(function (response) {
-          console.log("Subscribing to channels ".concat(channel.name));
+          _this2.options.debug && console.log("Subscribing to channels ".concat(channel.name));
 
           _this2.send({
             event: 'subscribe',
-            data: {
-              channel: channel.name,
-              auth: response.data.auth
-            }
+            data: _extends({
+              channel: channel.name
+            }, response.data)
           });
         })["catch"](function (error) {
-          console.log("Auth request for channel ".concat(channel.name, " failed"));
-          console.error(error);
+          _this2.options.debug && console.log("Auth request for channel ".concat(channel.name, " failed"));
+          _this2.options.debug && console.error(error);
         });
       } else {
-        console.log("Subscribing to channels ".concat(channel.name));
+        this.options.debug && console.log("Subscribing to channels ".concat(channel.name));
         this.send({
           event: 'subscribe',
           data: {
@@ -504,9 +558,12 @@ var Channel$1 = /*#__PURE__*/function (_BaseChannel) {
   }, {
     key: "whisper",
     value: function whisper(event, data) {
+      var channel = this.name;
+      var formattedEvent = "client-" + event;
       this.socket.send({
-        event: event,
-        data: data
+        "event": formattedEvent,
+        data: data,
+        channel: channel
       });
       return this;
     }

package/js-src/Channel.ts

@@ -1,7 +1,7 @@
-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 {Websocket} from "./Websocket";
+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 { Websocket } from "./Websocket";
 
 /**
  * This class represents a Pusher channel.
@@ -105,9 +105,12 @@ export class Channel extends BaseChannel implements PresenceChannel {
     }
 
     whisper(event: string, data: object): Channel {
+        let channel = this.name;
+        let formattedEvent = "client-" + event;
         this.socket.send({
-            event,
+            "event": formattedEvent,
             data,
+            channel,
         })
 
         return this;

package/js-src/Websocket.ts

@@ -1,7 +1,8 @@
-import {Channel} from "./Channel";
-import {AxiosResponse} from "axios";
+import { AxiosResponse } from "axios";
+import { Channel } from "./Channel";
+
+export type Options = { authEndpoint: string, host: string, bearerToken: string, auth: any, debug: boolean };
 
-export type Options = { authEndpoint: string, host: string };
 export type MessageBody = { event: string, channel?: string, data: object };
 
 export class Websocket {
@@ -19,14 +20,20 @@ export class Websocket {
 
     private socketId: string;
 
+    private closing = false;
+
     private pingInterval: NodeJS.Timeout;
 
-    constructor(options: Options) {
-        this.options = options;
+    private connect(host: string): void {
+        this.options.debug && console.log('Connecting');
 
-        this.websocket = new WebSocket(options.host)
+        this.websocket = new WebSocket(host)
 
         this.websocket.onopen = () => {
+            this.send({
+                event: 'whoami',
+            })
+
             while (this.buffer.length) {
                 const message = this.buffer[0]
 
@@ -44,7 +51,7 @@ export class Websocket {
             }
 
             if (message.channel) {
-                console.log(`Received event ${message.event} on channel ${message.channel}`)
+                this.options.debug && console.log(`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)
@@ -56,12 +63,24 @@ export class Websocket {
             if (this.internalListeners[message.event]) {
                 this.internalListeners[message.event](message.data)
             }
+
         }
 
+
+        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);
+            }
+        };
+
         this.on('whoami', ({ socket_id: socketId }) => {
             this.socketId = socketId
 
-            console.log(`just set socketId to ${socketId}`)
+            this.options.debug && console.log(`just set socketId to ${socketId}`)
 
             while (this.channelBacklog.length) {
                 const channel = this.channelBacklog[0]
@@ -72,19 +91,24 @@ export class Websocket {
             }
         })
 
-        this.send({
-            event: 'whoami',
-        })
 
         // send ping every 60 seconds to keep connection alive
         this.pingInterval = setInterval(() => {
-            console.log('Sending ping')
-
-            this.send({
-                event: 'ping',
-            })
+            if (this.websocket.readyState === this.websocket.OPEN) {
+                this.options.debug && console.log('Sending ping')
+                this.send({
+                    event: 'ping',
+                })
+            }
         }, 60 * 1000)
 
+    }
+
+    constructor(options: Options) {
+        this.options = options;
+
+        this.connect(this.options.host);
+
         return this
     }
 
@@ -92,7 +116,7 @@ export class Websocket {
         try {
             return JSON.parse(body)
         } catch (error) {
-            console.error(error)
+            this.options.debug && console.error(error)
 
             return undefined
         }
@@ -115,7 +139,8 @@ export class Websocket {
         this.buffer.push(message)
     }
 
-    close (): void {
+    close(): void {
+        this.closing = true
         this.internalListeners = {}
 
         clearInterval(this.pingInterval)
@@ -134,27 +159,33 @@ export class Websocket {
 
     private actuallySubscribe(channel: Channel): void {
         if (channel.name.startsWith('private-') || channel.name.startsWith('presence-')) {
-            console.log(`Sending auth request for channel ${channel.name}`)
+            this.options.debug && console.log(`Sending auth request for channel ${channel.name}`)
+
+            if (this.options.bearerToken) {
+                this.options.auth.headers['Authorization'] = 'Bearer ' + this.options.bearerToken;
+            }
 
             axios.post(this.options.authEndpoint, {
                 socket_id: this.getSocketId(),
                 channel_name: channel.name,
+            }, {
+              headers: this.options.auth.headers || {}
             }).then((response: AxiosResponse) => {
-                console.log(`Subscribing to channels ${channel.name}`)
+                this.options.debug && console.log(`Subscribing to channels ${channel.name}`)
 
                 this.send({
                     event: 'subscribe',
                     data: {
                         channel: channel.name,
-                        auth: response.data.auth,
+                        ...response.data
                     },
                 })
             }).catch((error) => {
-                console.log(`Auth request for channel ${channel.name} failed`)
-                console.error(error)
+                this.options.debug && console.log(`Auth request for channel ${channel.name} failed`)
+                this.options.debug && console.error(error)
             })
         } else {
-            console.log(`Subscribing to channels ${channel.name}`)
+            this.options.debug && console.log(`Subscribing to channels ${channel.name}`)
 
             this.send({
                 event: 'subscribe',

package/js-tests/Connector.test.ts

@@ -1,12 +1,15 @@
 import WS from "jest-websocket-mock";
-import {Connector} from "../js-src/Connector";
-import {Channel} from "../js-src/Channel";
+import { Connector } from "../js-src/Connector";
+import { Channel } from "../js-src/Channel";
+
+const mockedHost = 'ws://localhost:1234';
 
 describe('Connector', () => {
     let server: WS;
 
     beforeEach(() => {
-        server = new WS("ws://localhost:1234");
+        jest.useRealTimers();
+        server = new WS(mockedHost);
     });
 
     afterEach(() => {
@@ -15,7 +18,7 @@ describe('Connector', () => {
 
     test('socket id is correctly set', async () => {
         const connector = new Connector({
-            host: "ws://localhost:1234",
+            host: mockedHost,
         })
 
         await server.connected;
@@ -26,9 +29,29 @@ describe('Connector', () => {
         expect(connector.socketId()).toBe('test-socket-id')
     })
 
+    test('we reconnect to the server on error', async () => {
+        const connector = new Connector({
+            host: mockedHost,
+        })
+
+        await server.connected;
+        await expect(server).toReceiveMessage('{"event":"whoami"}');
+        server.send('{"event":"whoami","data":{"socket_id":"test-socket-id"}}')
+
+        server.close();
+        await server.closed;
+        server.server.stop(() => (server = new WS(mockedHost)));
+
+        await server.connected;
+        await expect(server).toReceiveMessage('{"event":"whoami"}');
+        server.send('{"event":"whoami","data":{"socket_id":"test-socket-id2"}}')
+
+        expect(connector.socketId()).toBe('test-socket-id2')
+    })
+
     test('we can subscribe to a channel and listen to events', async () => {
         const connector = new Connector({
-            host: "ws://localhost:1234",
+            host: mockedHost,
         })
 
         await server.connected;
@@ -54,4 +77,33 @@ describe('Connector', () => {
         expect(handler1).toBeCalled();
         expect(handler2).not.toBeCalled();
     })
+
+    test('we can send a whisper event', async () => {
+        const connector = new Connector({
+            host: mockedHost,
+        })
+
+        await server.connected;
+
+        await expect(server).toReceiveMessage('{"event":"whoami"}');
+        server.send('{"event":"whoami","data":{"socket_id":"test-socket-id"}}')
+
+        const channel = connector.channel('my-test-channel')
+
+        await expect(server).toReceiveMessage('{"event":"subscribe","data":{"channel":"my-test-channel"}}');
+
+        server.send('{"event":"subscription_succeeded","channel":"my-test-channel"}')
+
+        expect(channel).toBeInstanceOf(Channel)
+
+        const handler1 = jest.fn();
+        const handler2 = jest.fn();
+
+        channel.on('client-whisper', handler1)
+
+        server.send('{"event":"client-whisper","data":"whisper","channel":"my-test-channel","data":{}}')
+
+        expect(handler1).toBeCalled();
+        expect(handler2).not.toBeCalled();
+    })
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "laravel-echo-api-gateway",
-    "version": "0.1.2",
+    "version": "0.5.1",
     "description": "Use Laravel Echo with API Gateway Websockets",
     "keywords": [
         "laravel",

package/phpstan.neon.dist

@@ -3,6 +3,8 @@ includes:
 
 parameters:
 
+    phpVersion: 80399
+
     paths:
         - src
         - tests