Add websocket client to webui

services/webui/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@autoplex-api/request": "^0.0.0",
     "@autoplex/restful": "^0.0.0",
+    "@autoplex/websocket-client": "^0.0.0",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "fastify": "^3.14.1",
     "fastify-static": "^4.0.1",
@@ -24,8 +25,7 @@
     "vue": "^3.0.5",
     "vue-router": "^4.0.6",
     "vuedraggable": "^4.0.1",
-    "vuex": "^4.0.0",
-    "websocket": "^1.0.33"
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.1",

services/webui/src/app/index.ts

@@ -3,11 +3,14 @@ import router from "./routes";
 import store from "./store";
 import App from './App.vue'
 import "./styles/index.css";
+import "./websocket";
 
+/**
+ * Create the Vue application
+ */
 let app = createApp(App);
 app.use(router);
 app.use(store);
-
 app.mount("#app");
 
 /**

services/webui/src/app/websocket.ts

@@ -0,0 +1,32 @@
+import { WebSocketClient as WSClient } from "@autoplex/websocket-client";
+import store, { Action } from "./store";
+
+class WebSocketClient extends WSClient
+{
+	/**
+	 * Setup the socket
+	 */
+	protected setup() {
+		store.watch(state => state.user, () => this.authStateChanged());
+		setTimeout(async () => {
+			let result = await this.request("test", "snthaoeu onstehu soehu soeuh ou");
+			console.log("The result is:", result);
+		}, 5000);
+	}
+
+	/**
+	 * Get the app's current auth JWT
+	 */
+	protected jwt() {
+		return store.state.user?.token ?? null;
+	}
+
+	/**
+	 * Forget the JWT and log out of the app
+	 */
+	protected forgetJwt() {
+		store.dispatch(Action.AuthForget, undefined);
+	}
+}
+
+export default new WebSocketClient("ws://localhost:3250/");

services/webui/tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "es2015",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     // "module": "commonjs",                        /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
@@ -43,7 +43,7 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     "baseUrl": "./src",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {}                                  /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */