PWA: create a WebSocket connection in the background at startup.

Author: paveloom

pwa/src/index.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 
 import App from "./components/App.vue";
+import { ws } from "./ws";
 
 if ("storage" in navigator && "persist" in navigator.storage) {
   const isPersisted = await navigator.storage.persist();
@@ -15,4 +16,8 @@ if ("serviceWorker" in navigator) {
   });
 }
 
-createApp(App).mount("#app");
+const app = createApp(App);
+
+app.config.globalProperties["ws"] = ws;
+
+app.mount("#app");

pwa/src/ws.ts

@@ -0,0 +1,40 @@
+import { state, store } from "@/store";
+
+class WebSocketService {
+  ws: WebSocket | null;
+
+  constructor() {
+    this.ws = null;
+  }
+
+  async init() {
+    await store.ready;
+    this.connect(new URL("ws", state.endpoint.value));
+  }
+
+  connect(url: URL) {
+    this.ws = new WebSocket(url);
+
+    this.ws.onopen = () => {
+      console.log("[Websocket] Connected");
+    };
+
+    this.ws.onclose = (event) => {
+      const code = event.code;
+      const reason = event.reason;
+      const clean = event.wasClean ? "clean" : "not clean";
+      console.log(`[WebSocket] Connection closed (${code}, "${reason}", ${clean})`);
+    };
+
+    this.ws.onerror = (error) => {
+      console.error("[WebSocket] Encountered error: ", error);
+    };
+
+    this.ws.onmessage = (event) => {
+      console.log("[WebSocket] Received message: ", event.data);
+    };
+  }
+}
+
+export const ws = new WebSocketService();
+void ws.init();