Add start script to gui

gui/react/package.json

@@ -36,7 +36,8 @@
   },
   "proxy": "http://localhost:3000",
   "scripts": {
-    "build": "npx tsc && npx webpack"
+    "build": "npx tsc && npx webpack",
+    "start": "npx webpack serve"
   },
   "browserslist": {
     "production": [

gui/react/src/provider/MessageChannel.tsx

@@ -50,14 +50,14 @@ async function messageAndResponse<T extends keyof MessageTypes>(socket: WebSocke
         resolve(parsed);
       }
     };
-    socket.addEventListener('message', handler); 
+    socket.addEventListener('message', handler);
   });
   const toSend = msg as WSMessageWithID<T>;
   toSend.id = id;
 
   socket.send(JSON.stringify(toSend));
   return ret;
-} 
+}
 
 const MessageChannelProvider: FCWithChildren = ({ children }) => {
 
@@ -103,7 +103,7 @@ const MessageChannelProvider: FCWithChildren = ({ children }) => {
       });
     }
 
-    const wws = new WebSocket(`ws://${process.env.NODE_ENV === 'development' ? 'localhost:3000' :  window.location.host}/ws?${search}`, );
+    const wws = new WebSocket(`ws://${process.env.NODE_ENV === 'development' ? 'localhost:3000' :  window.location.host}/private?${search}`, );
     wws.addEventListener('open', () => {
       console.log('[INFO] [WS] Connected');
       setSocket(wws);
@@ -146,7 +146,7 @@ const MessageChannelProvider: FCWithChildren = ({ children }) => {
       const currentService = await messageAndResponse(socket, { name: 'type', data: undefined });
       if (currentService.data !== undefined)
         return dispatch({ type: 'service', payload: currentService.data });
-      if (store.service !== currentService.data) 
+      if (store.service !== currentService.data)
         messageAndResponse(socket, { name: 'setup', data: store.service });
     })();
   }, [store.service, dispatch, socket]);
@@ -241,4 +241,4 @@ const MessageChannelProvider: FCWithChildren = ({ children }) => {
   </messageChannelContext.Provider>;
 };
 
-export default MessageChannelProvider;
+export default MessageChannelProvider;

gui/react/webpack.config.ts

@@ -1,8 +1,18 @@
-import webpack from 'webpack';
+import type { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
+import type { Configuration as DevServerConfig } from 'webpack-dev-server';
 
-const config: webpack.Configuration = {
+const config: Configuration & DevServerConfig = {
+  devServer: {
+    proxy: [
+      {
+        target: 'http://localhost:3000',
+        context: ['/public', '/private'],
+        ws: true
+      }
+    ],
+  },
   entry: './src/index.tsx',
   mode: 'production',
   output: {
@@ -13,11 +23,12 @@ const config: webpack.Configuration = {
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
   },
+  performance: false,
   module: {
     rules: [
       {
-        test: /\.(ts|tsx)$/, 
-        exclude: /node_modules/, 
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
         use: {
           'loader': 'babel-loader',
           options: {
@@ -29,7 +40,7 @@ const config: webpack.Configuration = {
               }]
             ]
           }
-        }, 
+        },
       },
       {
         test: /\.css$/i,
@@ -44,4 +55,4 @@ const config: webpack.Configuration = {
   ]
 };
 
-export default config;
+export default config;

gui/server/websocket.ts

@@ -21,12 +21,12 @@ export default class WebSocketHandler {
   public events: ExternalEvent = new ExternalEvent();
 
   constructor(server: Server) {
-    this.wsServer = new ws.WebSocketServer({ noServer: true, path: '/ws' });
+    this.wsServer = new ws.WebSocketServer({ noServer: true, path: '/private' });
 
     this.wsServer.on('connection', (socket, req) => {
       console.info(`[WS] Connection from '${req.socket.remoteAddress}'`);
       socket.on('error', (er) => console.error(`[WS] ${er}`));
-      socket.on('message', (data) => {       
+      socket.on('message', (data) => {
         const json = JSON.parse(data.toString()) as UnknownWSMessage;
         this.events.emit(json.name, json as any, (data) => {
           this.wsServer.clients.forEach(client => {
@@ -88,7 +88,7 @@ export class PublicWebSocket {
     this.wsServer.on('connection', (socket, req) => {
       console.info(`[WS] Connection to public ws from '${req.socket.remoteAddress}'`);
       socket.on('error', (er) => console.error(`[WS] ${er}`));
-      socket.on('message', (msg) => {       
+      socket.on('message', (msg) => {
         const data = JSON.parse(msg.toString()) as UnknownWSMessage;
         switch (data.name) {
         case 'isSetup':
@@ -120,4 +120,4 @@ export class PublicWebSocket {
         console.error(`[WS] ${er}`);
     });
   }
-}
+}