separation of concerns

dist/utils/websocket.js

@@ -0,0 +1,64 @@
+export class WebSocketHandler {
+    ws = null;
+    url = '';
+    subscribedQueries = new Map();
+    onOpen = () => { };
+    onClose = () => { };
+    reconnectAttempts = 0;
+    maxReconnectAttempts = 5;
+    reconnectInterval = 1000;
+    sendQueue = [];
+    startConnection = (url) => {
+        this.url = url;
+        this.ws = new WebSocket(url);
+        const ws = this.ws;
+        ws.onopen = () => {
+            console.log('Connected to Tether');
+            this.onOpen();
+            if (this.sendQueue.length > 0) {
+                this.sendQueue.forEach(message => this.ws?.send(message));
+                this.sendQueue = [];
+            }
+            this.reconnectAttempts = 0;
+        };
+        ws.onmessage = (event) => {
+            const data = JSON.parse(String(event.data));
+            if (data.type === 'query') {
+                this.subscribedQueries.forEach((callback, query) => {
+                    if (data.query === query) {
+                        callback(data.data);
+                    }
+                });
+            }
+            else if (data.type === 'error') {
+                console.error(data.error);
+            }
+        };
+        ws.onclose = () => {
+            console.log('Disconnected from Tether');
+            this.attemptReconnect();
+        };
+    };
+    attemptReconnect = () => {
+        this.ws?.close();
+        this.reconnectAttempts++;
+        if (this.reconnectAttempts > this.maxReconnectAttempts) {
+            console.error('Max reconnect attempts reached');
+            return;
+        }
+        setTimeout(() => {
+            this.startConnection(this.url);
+        }, this.reconnectInterval);
+    };
+    close = () => {
+        this.ws?.close();
+        this.ws = null;
+    };
+    send = (message) => {
+        if (this.ws?.readyState !== WebSocket.OPEN) {
+            this.sendQueue.push(message);
+            return;
+        }
+        this.ws?.send(message);
+    };
+}