feat(wsc): fix

public/background.js

@@ -1,55 +1,21 @@
-let socket;
-const connectWebsocket = url => {
-    disconnectWebsocket()
-    socket = new WebSocket(url);
-    socket.onopen = () => {
-        chrome.runtime.sendMessage({ connected: true })
-    }
-    socket.onclose = () => {
-        chrome.runtime.sendMessage({ connected: false })
-    }
-}
+import {ActionType, WebSocketManager} from './connect.js';
 
-const disconnectWebsocket = () => {
-    if (socket) {
-        try {
-            socket.close()
-            socket = null;
-        } catch (e) {
-
-        }
-    }
-}
-
-heartbeat = () => {
-    if (socket) {
-        if (socket.readyState === WebSocket.OPEN) {
-            try {
-                socket.send(JSON.stringify({
-                    "type": "heartbeat",
-                }))
-            } catch (e) {
-                console.error("Error sending heartbeat:", e);
-            }
-        } else {
-            disconnectWebsocket()
-        }
-    }
-}
-heartbeat()
-setInterval(heartbeat, 3000)
 
 console.info("Chrome Extenstion Background is loaded")
 
+const websocketManager = new WebSocketManager();
+
+
 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-    if (msg.action === "connect") {
+    console.log("msg", msg)
+    if (msg.action === ActionType.CONNECT) {
         console.info("Start to connect websocket")
         const host = msg['host'] || "127.0.0.1"
         const port = msg['port'] || 11212
-        connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
-    } else if (msg.action === 'disconnect') {
-        disconnectWebsocket()
-    } else if (msg.action === 'setproxy') {
+        websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
+    } else if (msg.action === ActionType.DISCONNECT) {
+        websocketManager.disconnectWebsocket()
+    } else if (msg.action === ActionType.SETPROXY) {
         chrome.proxy.settings.set({
             value: {
                 mode: "fixed_servers",
@@ -64,15 +30,18 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
             scope: 'regular',
         })
 
-    } else if (msg.action === 'clearproxy') {
+    } else if (msg.action === ActionType.CLEARPROXY) {
         chrome.proxy.settings.clear({})
-    } else if (msg.action === 'proxystatus') {
+    } else if (msg.action === ActionType.PROXYSTATUS) {
         chrome.proxy.settings.get({}, function (details) {
             if (details.value && details.value.mode === "fixed_servers") {
                 let proxyConfig = details.value.rules.singleProxy;
-                chrome.runtime.sendMessage({ enable: true, proxy: `${proxyConfig.scheme}://${proxyConfig.host}:${proxyConfig.port}` })
+                chrome.runtime.sendMessage({
+                    enable: true,
+                    proxy: `${proxyConfig.scheme}://${proxyConfig.host}:${proxyConfig.port}`
+                })
             } else {
-                chrome.runtime.sendMessage({ enable: false, proxy: "" })
+                chrome.runtime.sendMessage({enable: false, proxy: ""})
             }
         });
     }

public/connect.js

@@ -0,0 +1,72 @@
+export const ActionType = {
+    CONNECT: 'connect',
+    DISCONNECT: 'disconnect',
+    STATUS: 'status',
+    PROXYSTATUS: 'proxystatus',
+    SETPROXY: 'setproxy',
+    CLEARPROXY: 'clearproxy'
+}
+
+export class WebSocketManager {
+    constructor() {
+        this.socket = null;
+        this.intervalId = null;
+    }
+
+    connectWebsocket(url) {
+        this.disconnectWebsocket();
+        this.socket = new WebSocket(url);
+
+        this.socket.onopen = () => {
+            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true});
+            this.startHeartbeat();
+        };
+
+        this.socket.onclose = () => {
+            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false});
+        };
+
+        this.socket.onerror = (error) => {
+            console.error("WebSocket Error:", error);
+        };
+    }
+
+    disconnectWebsocket() {
+        if (this.socket) {
+            try {
+                this.socket.close();
+            } catch (e) {
+                console.error("Error closing websocket:", e);
+            }
+            this.socket = null;
+            this.stopHeartbeat();
+        }
+    }
+
+    startHeartbeat() {
+        this.intervalId = setInterval(() => this.heartbeat(), 3000);
+    }
+
+    stopHeartbeat() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    heartbeat() {
+        if (this.isConnected()) {
+            try {
+                this.socket.send(JSON.stringify({"type": "heartbeat"}));
+            } catch (e) {
+                console.error("Error sending heartbeat:", e);
+            }
+        } else {
+            this.disconnectWebsocket();
+        }
+    }
+
+    isConnected() {
+        return this.socket && this.socket.readyState === WebSocket.OPEN;
+    }
+}

public/manifest.json

@@ -12,7 +12,8 @@
     }
   },
   "background": {
-    "service_worker": "background.js"
+    "service_worker": "background.js",
+    "type": "module"
   },
   "permissions": [
     "activeTab",