websocket to web

2024-10-20 19:14:33 -07:00
parent 51af825b27
commit 8e4a94f8c5
8 changed files with 274 additions and 12 deletions
--- a/frontend/src/composables/websocket.ts
+++ b/frontend/src/composables/websocket.ts
@@ -0,0 +1,112 @@
+import { computed, onMounted, onUnmounted, ref, type Ref, shallowRef, watch } from 'vue'
+
+class WebsocketHandle {
+  websocket: WebSocket | null;
+  should_be_connected: boolean;
+  connected: Ref<boolean>;
+  on_telem_value: Map<string, Array<(value: any)=>void>>;
+
+  constructor() {
+    this.websocket = null;
+    this.should_be_connected = false;
+    this.connected = ref(false);
+    this.on_telem_value = new Map();
+  }
+
+  connect() {
+    this.should_be_connected = true;
+    if (this.websocket != null) {
+      return;
+    }
+
+    this.websocket = new WebSocket(location.protocol.replace("http", "ws") + "//" + location.host + "/ws");
+    this.websocket.addEventListener("open", (event) => {
+      this.connected.value = true;
+    });
+    this.websocket.addEventListener("close", (event) => {
+      if (this.should_be_connected) {
+        this.disconnect();
+        setTimeout(() => {
+          this.connect();
+        }, 1000);
+      }
+    });
+    this.websocket.addEventListener("error", (event) => {
+      if (this.should_be_connected) {
+        this.disconnect();
+        setTimeout(() => {
+          this.connect();
+        }, 1000);
+      }
+    });
+    this.websocket.addEventListener("message", (event) => {
+      const message = JSON.parse(event.data);
+      if (message["TlmValue"]) {
+        const uuid = message["TlmValue"]["uuid"];
+        if (uuid) {
+          const listeners = this.on_telem_value.get(uuid);
+          if (listeners) {
+            listeners.forEach((listener) => {
+              listener(message["TlmValue"]["value"]);
+            });
+          }
+        }
+      }
+    });
+  }
+
+  disconnect() {
+    this.should_be_connected = false;
+    if (this.websocket == null) {
+      return;
+    }
+
+    this.websocket.close();
+    this.websocket = null;
+    this.connected.value = false;
+    this.on_telem_value.clear();
+  }
+
+  listen_to_telemetry(telemetry: Ref<any>) {
+    const value_result = ref(null);
+
+    const uuid = computed(() => {
+      if (telemetry.value) {
+        return telemetry.value.uuid;
+      }
+      return null;
+    });
+
+    watch([uuid, this.connected], () => {
+      if (this.connected) {
+        let uuid_value = uuid.value
+        this.websocket?.send(JSON.stringify({
+          "RegisterTlmListener": {
+            uuid: uuid_value
+          }
+        }));
+        if (!this.on_telem_value.has(uuid_value)) {
+          this.on_telem_value.set(uuid_value, []);
+        }
+        this.on_telem_value.get(uuid_value)?.push((value) => {
+          value_result.value = value;
+        });
+      }
+    });
+
+    return value_result;
+  }
+}
+
+export function useWebsocket() {
+  const handle = shallowRef<WebsocketHandle>(new WebsocketHandle());
+
+  onMounted(() => {
+    handle.value.connect();
+  });
+  onUnmounted(() => {
+    handle.value.disconnect();
+  })
+
+  return handle;
+}