WIP connect serial plotter app with websocket

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -258,6 +258,7 @@ import {
   PlotterPath,
   PlotterService,
 } from '../common/protocol/plotter-service';
+import { PlotterConnection } from './plotter/plotter-connection';
 import { nls } from '@theia/core/lib/browser/nls';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
@@ -410,6 +411,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     })
     .inSingletonScope();
   bind(MonitorConnection).toSelf().inSingletonScope();
+  bind(PlotterConnection).toSelf().inSingletonScope();
   // Serial monitor service client to receive and delegate notifications from the backend.
   bind(MonitorServiceClient).to(MonitorServiceClientImpl).inSingletonScope();
 

arduino-ide-extension/src/browser/monitor/monitor-connection.ts

@@ -20,6 +20,7 @@ import {
 import { BoardsConfig } from '../boards/boards-config';
 import { MonitorModel } from './monitor-model';
 import { NotificationCenter } from '../notification-center';
+import { Disposable } from '@theia/core';
 import { nls } from '@theia/core/lib/browser/nls';
 
 @injectable()
@@ -48,7 +49,8 @@ export class MonitorConnection {
   @inject(FrontendApplicationStateService)
   protected readonly applicationState: FrontendApplicationStateService;
 
-  protected state: MonitorConnection.State | undefined;
+  protected _state: MonitorConnection.State | undefined;
+
   /**
    * Note: The idea is to toggle this property from the UI (`Monitor` view)
    * and the boards config and the boards attachment/detachment logic can be at on place, here.
@@ -62,6 +64,8 @@ export class MonitorConnection {
    */
   protected readonly onReadEmitter = new Emitter<{ messages: string[] }>();
 
+  protected toDisposeOnDisconnect: Disposable[] = [];
+
   /**
    * Array for storing previous monitor errors received from the server, and based on the number of elements in this array,
    * we adjust the reconnection delay.
@@ -72,15 +76,6 @@ export class MonitorConnection {
 
   @postConstruct()
   protected init(): void {
-    this.monitorServiceClient.onMessage(this.handleMessage.bind(this));
-    this.monitorServiceClient.onError(this.handleError.bind(this));
-    this.boardsServiceProvider.onBoardsConfigChanged(
-      this.handleBoardConfigChange.bind(this)
-    );
-    this.notificationCenter.onAttachedBoardsChanged(
-      this.handleAttachedBoardsChanged.bind(this)
-    );
-
     // Handles the `baudRate` changes by reconnecting if required.
     this.monitorModel.onChange(({ property }) => {
       if (property === 'baudRate' && this.autoConnect && this.connected) {
@@ -98,6 +93,12 @@ export class MonitorConnection {
     };
   }
 
+  protected set state(s: MonitorConnection.State | undefined) {
+    this.onConnectionChangedEmitter.fire(this.state);
+    this._state = s;
+    if (!this.connected) this.toDisposeOnDisconnect.forEach((d) => d.dispose());
+  }
+
   get connected(): boolean {
     return !!this.state;
   }
@@ -188,7 +189,7 @@ export class MonitorConnection {
       }
       const oldState = this.state;
       this.state = undefined;
-      this.onConnectionChangedEmitter.fire(this.state);
+
       if (shouldReconnect) {
         if (this.monitorErrors.length >= 10) {
           this.messageService.warn(
@@ -254,6 +255,16 @@ export class MonitorConnection {
   }
 
   async connect(config: MonitorConfig): Promise<Status> {
+    this.toDisposeOnDisconnect.push(
+      this.monitorServiceClient.onMessage(this.handleMessage.bind(this)),
+      this.monitorServiceClient.onError(this.handleError.bind(this)),
+      this.boardsServiceProvider.onBoardsConfigChanged(
+        this.handleBoardConfigChange.bind(this)
+      ),
+      this.notificationCenter.onAttachedBoardsChanged(
+        this.handleAttachedBoardsChanged.bind(this)
+      )
+    );
     if (this.connected) {
       const disconnectStatus = await this.disconnect();
       if (!Status.isOK(disconnectStatus)) {
@@ -275,7 +286,7 @@ export class MonitorConnection {
         )} on port ${Port.toString(config.port)}.`
       );
     }
-    this.onConnectionChangedEmitter.fire(this.state);
+
     return Status.isOK(connectStatus);
   }
 
@@ -303,7 +314,7 @@ export class MonitorConnection {
       );
     }
     this.state = undefined;
-    this.onConnectionChangedEmitter.fire(this.state);
+
     return status;
   }
 

arduino-ide-extension/src/browser/plotter/plotter-connection.ts

@@ -0,0 +1,16 @@
+import { injectable } from 'inversify';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { MonitorConnection } from '../monitor/monitor-connection';
+
+@injectable()
+export class PlotterConnection extends MonitorConnection {
+  protected readonly onWebSocketChangedEmitter = new Emitter<string>();
+
+  async handleMessage(port: string): Promise<void> {
+    this.onWebSocketChangedEmitter.fire(port);
+  }
+
+  get onWebSocketChanged(): Event<string> {
+    return this.onWebSocketChangedEmitter.event;
+  }
+}

arduino-ide-extension/src/browser/plotter/plotter-frontend-contribution.ts

@@ -2,17 +2,18 @@ import { injectable, inject } from 'inversify';
 import {
   Command,
   CommandRegistry,
+  DisposableCollection,
   MaybePromise,
   MenuModelRegistry,
 } from '@theia/core';
 import { MonitorModel } from '../monitor/monitor-model';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { Contribution } from '../contributions/contribution';
-import { PlotterService } from '../../common/protocol/plotter-service';
 import { Endpoint, FrontendApplication } from '@theia/core/lib/browser';
 import { ipcRenderer } from '@theia/core/shared/electron';
-import { SerialPlotter } from './protocol';
 import { MonitorConfig } from '../../common/protocol';
+import { PlotterConnection } from './plotter-connection';
+import { SerialPlotter } from './protocol';
 const queryString = require('query-string');
 
 export namespace SerialPlotterContribution {
@@ -29,38 +30,38 @@ export namespace SerialPlotterContribution {
 export class PlotterFrontendContribution extends Contribution {
   protected window: Window | null;
   protected url: string;
-  protected initConfig: SerialPlotter.Config;
+  protected wsPort: number;
+  protected toDispose = new DisposableCollection();
 
   @inject(MonitorModel)
   protected readonly model: MonitorModel;
 
-  @inject(PlotterService)
-  protected readonly plotter: PlotterService;
+  @inject(PlotterConnection)
+  protected readonly plotterConnection: PlotterConnection;
 
   onStart(app: FrontendApplication): MaybePromise<void> {
     this.url = new Endpoint({ path: '/plotter' }).getRestUrl().toString();
 
-    this.initConfig = {
-      baudrates: MonitorConfig.BaudRates.map((b) => b),
-      currentBaudrate: this.model.baudRate,
-      darkTheme: true,
-      wsPort: 0,
-      generate: true,
-    };
-
     ipcRenderer.on('CLOSE_CHILD_WINDOW', () => {
       if (this.window) {
         if (!this.window.closed) this.window?.close();
         this.window = null;
+        this.plotterConnection.autoConnect = false;
       }
     });
 
+    this.toDispose.pushAll([
+      this.plotterConnection.onWebSocketChanged((wsPort) => {
+        this.open(wsPort);
+      }),
+    ]);
+
     return super.onStart(app);
   }
 
   registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(SerialPlotterContribution.Commands.OPEN, {
-      execute: async () => this.open(),
+      execute: async () => (this.plotterConnection.autoConnect = true),
     });
   }
 
@@ -72,14 +73,20 @@ export class PlotterFrontendContribution extends Contribution {
     });
   }
 
-  protected async open(): Promise<void> {
+  protected async open(wsPort: string): Promise<void> {
+    const initConfig: SerialPlotter.Config = {
+      baudrates: MonitorConfig.BaudRates.map((b) => b),
+      currentBaudrate: this.model.baudRate,
+      darkTheme: true,
+      wsPort: parseInt(wsPort, 10),
+    };
     if (this.window) {
       this.window.focus();
     } else {
       const urlWithParams = queryString.stringifyUrl(
         {
           url: this.url,
-          query: this.initConfig,
+          query: initConfig,
         },
         { arrayFormat: 'comma' }
       );

arduino-ide-extension/src/browser/plotter/protocol.ts

@@ -4,7 +4,7 @@ export namespace SerialPlotter {
     baudrates: number[];
     darkTheme: boolean;
     wsPort: number;
-    generate: boolean;
+    generate?: boolean;
   };
   export namespace Protocol {
     export enum Command {

arduino-ide-extension/src/node/monitor/monitor-service-impl.ts

@@ -126,14 +126,16 @@ export class MonitorServiceImpl implements MonitorService {
     const ws = new WebSocket.Server({ port: 0 });
     const address: any = ws.address();
     this.client?.notifyMessage(address.port);
-    let wsConn: WebSocket | null = null;
+    const wsConn: WebSocket[] = [];
     ws.on('connection', (ws) => {
-      wsConn = ws;
+      wsConn.push(ws);
     });
 
     const flushMessagesToFrontend = () => {
       if (this.messages.length) {
-        wsConn?.send(JSON.stringify(this.messages));
+        wsConn.forEach((w) => {
+          w.send(JSON.stringify(this.messages));
+        });
         this.messages = [];
       }
     };