Webatrice websocket refactor (#4435)

* add unit tests for websocket events

* add unit tests for KeepAliveService, clean up keepAlive termination flow

* put keepAlive command in protobuf service and expose thru webClient

* secure wss

* rename files tsx to ts

* add localhost support for ws/wss connection

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/websocket/services/KeepAliveService.spec.ts

@@ -0,0 +1,71 @@
+import { KeepAliveService } from './KeepAliveService';
+import { WebSocketService } from "./WebSocketService";
+
+import webClient from '../WebClient';
+
+describe('KeepAliveService', () => {
+  let service: KeepAliveService;
+  let socket: WebSocketService;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    socket = new WebSocketService(webClient);
+    service = new KeepAliveService(socket);
+  });
+
+  it('should create', () => {
+    expect(service).toBeDefined();
+  });
+
+  describe('startPingLoop', () => {
+    let resolvePing;
+    let interval;
+    let promise;
+    let ping;
+    let checkReadyStateSpy;
+
+    beforeEach(() => {
+      interval = 100;
+      promise = new Promise(resolve => resolvePing = resolve);
+      ping = (done) => promise.then(done);
+
+      checkReadyStateSpy = spyOn(socket, 'checkReadyState');
+      checkReadyStateSpy.and.returnValue(true);
+
+      service.startPingLoop(interval, ping);
+      jest.advanceTimersByTime(interval);
+    });
+
+    it('should start ping loop', () => {
+      expect((service as any).keepalivecb).toBeDefined();
+      expect((service as any).lastPingPending).toBeTruthy();
+    });
+
+    it('should call ping callback when done', (done: jest.DoneCallback) => {
+      resolvePing();
+
+      promise.then(() => {
+        expect((service as any).lastPingPending).toBeFalsy();
+        done();
+      });
+    });
+
+    it('should fire disconnected$ if lastPingPending is still true', () => {
+      spyOn(service.disconnected$, 'next');
+      jest.advanceTimersByTime(interval);
+
+      expect(service.disconnected$.next).toHaveBeenCalled();
+    });
+
+    it('should endPingLoop if socket is not open', () => {
+      spyOn(service, 'endPingLoop');
+      checkReadyStateSpy.and.returnValue(false);
+
+      resolvePing();
+      jest.advanceTimersByTime(interval);
+
+      expect(service.endPingLoop).toHaveBeenCalled();
+    });
+  });
+});

webclient/src/websocket/services/KeepAliveService.ts

@@ -35,9 +35,6 @@ export class KeepAliveService {
   public endPingLoop() {
     clearInterval(this.keepalivecb);
     this.keepalivecb = null;
-  }
-
-  public resetPingFlag() {
     this.lastPingPending = false;
   }
 }

webclient/src/websocket/services/ProtobufService.ts

@@ -65,6 +65,14 @@ export class ProtobufService {
     }
   }
 
+  public sendKeepAliveCommand(pingReceived: Function) {
+    const command = this.controller.SessionCommand.create({
+      ".Command_Ping.ext" : this.controller.Command_Ping.create()
+    });
+
+    this.sendSessionCommand(command, pingReceived);
+  }
+
   public handleMessageEvent({ data }: MessageEvent): void {
     try {
       const uint8msg = new Uint8Array(data);

webclient/src/websocket/services/WebSocketService.ts

@@ -17,7 +17,7 @@ export interface WebSocketOptions {
 export class WebSocketService {
   private socket: WebSocket;
   private webClient: WebClient;
-  public keepAliveService: KeepAliveService;
+  private keepAliveService: KeepAliveService;
 
   public message$: Subject<MessageEvent> = new Subject();
   public statusChange$: Subject<ServerStatus> = new Subject();
@@ -36,6 +36,10 @@ export class WebSocketService {
   }
 
   public connect(options: WebSocketOptions, protocol: string = 'wss'): void {
+    if (window.location.hostname === 'localhost') {
+      protocol = 'ws';
+    }
+
     const { host, port, keepalive } = options;
     this.keepalive = keepalive;
 
@@ -49,7 +53,7 @@ export class WebSocketService {
   }
 
   public checkReadyState(state: number): boolean {
-    return this.socket.readyState === state;
+    return this.socket?.readyState === state;
   }
 
   public send(message): void {
@@ -69,13 +73,7 @@ export class WebSocketService {
       this.updateStatus(StatusEnum.CONNECTED, "Connected");
 
       this.keepAliveService.startPingLoop(this.keepalive, (pingReceived: Function) => {
-        const command = this.webClient.protobuf.controller.SessionCommand.create({
-          ".Command_Ping.ext" : this.webClient.protobuf.controller.Command_Ping.create()
-        });
-
-        this.webClient.protobuf.sendSessionCommand(command, () => {
-          pingReceived();
-        });
+        this.webClient.keepAlive(pingReceived);
       });
     };