Fix #2 : Handling connection lost

Author: ludovic

js-src/Websocket.ts

@@ -1,5 +1,6 @@
-import {Channel} from "./Channel";
-import {AxiosResponse} from "axios";
+import { AxiosResponse } from "axios";
+import axios from 'axios';
+import { Channel } from "./Channel";
 
 export type Options = { authEndpoint: string, host: string };
 export type MessageBody = { event: string, channel?: string, data: object };
@@ -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 {
+        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]
 
@@ -56,8 +63,20 @@ export class Websocket {
             if (this.internalListeners[message.event]) {
                 this.internalListeners[message.event](message.data)
             }
+
         }
 
+
+        this.websocket.onclose = () => {
+            if (this.socketId && !this.closing || !this.socketId) {
+                console.info('Connection lost, reconnecting...');
+                setTimeout(() => {
+                    this.socketId = undefined
+                    this.connect(host)
+                }, 1000);
+            }
+        };
+
         this.on('whoami', ({ socket_id: socketId }) => {
             this.socketId = socketId
 
@@ -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) {
+                console.log('Sending ping')
+                this.send({
+                    event: 'ping',
+                })
+            }
         }, 60 * 1000)
 
+    }
+
+    constructor(options: Options) {
+        this.options = options;
+
+        this.connect(this.options.host);
+
         return this
     }
 
@@ -115,7 +139,8 @@ export class Websocket {
         this.buffer.push(message)
     }
 
-    close (): void {
+    close(): void {
+        this.closing = true
         this.internalListeners = {}
 
         clearInterval(this.pingInterval)
@@ -146,7 +171,7 @@ export class Websocket {
                     event: 'subscribe',
                     data: {
                         channel: channel.name,
-                        ... response.data
+                        ...response.data
                     },
                 })
             }).catch((error) => {

js-tests/Connector.test.ts

@@ -2,11 +2,14 @@ import WS from "jest-websocket-mock";
 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;
@@ -57,7 +80,7 @@ describe('Connector', () => {
 
     test('we can send a whisper event', async () => {
         const connector = new Connector({
-            host: "ws://localhost:1234",
+            host: mockedHost,
         })
 
         await server.connected;

package.json

@@ -49,7 +49,6 @@
         "jest": "^24.9.0",
         "jest-websocket-mock": "^2.2.0",
         "laravel-echo": "^1.10.0",
-        "mock-socket": "^9.0.3",
         "rollup": "^2.10.2",
         "rollup-plugin-typescript2": "^0.27.1",
         "standard-version": "^8.0.1",