From 5424078d38ab96137810c6e544b3438418541d0a Mon Sep 17 00:00:00 2001 From: go0p Date: Tue, 7 May 2024 20:44:29 +0800 Subject: [PATCH] feat(wsc): fix --- public/background.js | 65 +++++++++-------------------------- public/connect.js | 72 +++++++++++++++++++++++++++++++++++++++ public/manifest.json | 3 +- src/assets/icon/icon.tsx | 26 +++++++------- src/components/Contro.tsx | 22 +++++++----- src/network/chrome.ts | 21 ++++++++---- 6 files changed, 132 insertions(+), 77 deletions(-) create mode 100644 public/connect.js diff --git a/public/background.js b/public/background.js index 111c8bc..c0c90c4 100644 --- a/public/background.js +++ b/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: ""}) } }); } diff --git a/public/connect.js b/public/connect.js new file mode 100644 index 0000000..846d52e --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json index f0c0086..5c60c8f 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -12,7 +12,8 @@ } }, "background": { - "service_worker": "background.js" + "service_worker": "background.js", + "type": "module" }, "permissions": [ "activeTab", diff --git a/src/assets/icon/icon.tsx b/src/assets/icon/icon.tsx index 5fbaba4..cc04997 100644 --- a/src/assets/icon/icon.tsx +++ b/src/assets/icon/icon.tsx @@ -18,8 +18,8 @@ const X = () => ( ); @@ -41,8 +41,8 @@ const Check = () => ( ); @@ -64,8 +64,8 @@ const PencilAlt = () => ( ); @@ -87,8 +87,8 @@ const Refresh = () => ( ); @@ -110,7 +110,7 @@ const Exit = () => ( ); @@ -132,8 +132,8 @@ const PlusSm = () => ( ); @@ -155,8 +155,8 @@ const Trash = () => ( ); diff --git a/src/components/Contro.tsx b/src/components/Contro.tsx index 4c5ec3a..3da355a 100644 --- a/src/components/Contro.tsx +++ b/src/components/Contro.tsx @@ -10,6 +10,7 @@ import { } from "@assets/icon/icon"; import { wsc } from "@network/chrome"; import "./Contro.css"; +import {ActionType} from "../../public/connect"; interface ControProps {} export const Contro: React.FC = () => { @@ -46,15 +47,18 @@ export const Contro: React.FC = () => { const connectPort = (port: number) => { wsc.connect(port); - wsc.onWSCMessage((req: { connected: boolean }) => { - if (req["connected"] === undefined) { - return; - } - setConnected(req.connected); - if (req.connected === false) { - setAutoFindFailedReason("Yakit WebSocket Controller Port is not right"); - } else { - setAutoFindFailedReason(""); + wsc.onWSCMessage((message) => { + if (message.action === ActionType.STATUS) { + console.log("onWSCMessage", message) + if (message.connected === undefined) { + return; + } + setConnected(message.connected); + if (message.connected === false) { + setAutoFindFailedReason("Yakit WebSocket Controller Port is not right"); + } else { + setAutoFindFailedReason(""); + } } }); }; diff --git a/src/network/chrome.ts b/src/network/chrome.ts index 6727193..89f409a 100644 --- a/src/network/chrome.ts +++ b/src/network/chrome.ts @@ -1,9 +1,18 @@ import {chrome} from "./chromeapi"; +enum ActionType { + CONNECT = 'connect', + DISCONNECT = 'disconnect', + STATUS = 'status', + PROXYSTATUS = 'proxystatus', + SETPROXY = 'setproxy', + CLEARPROXY = 'clearproxy' +} + export namespace wsc { export function connect(port: number, host?: string) { chrome.runtime.sendMessage({ - action: 'connect', + action: ActionType.CONNECT, host: host || '127.0.0.1', port: port, }); @@ -11,19 +20,19 @@ export namespace wsc { export function disconnect() { chrome.runtime.sendMessage({ - action: 'disconnect', + action: ActionType.DISCONNECT, }); } export function updateWSCStatus() { chrome.runtime.sendMessage({ - action: 'status', + action: ActionType.STATUS, }); } export function updateProxyStatus() { chrome.runtime.sendMessage({ - action: 'proxystatus', + action: ActionType.PROXYSTATUS, }); } @@ -36,11 +45,11 @@ export namespace wsc { } export function setproxy(scheme: string, host: string, port: number) { - chrome.runtime.sendMessage({action: "setproxy", scheme, host, port}) + chrome.runtime.sendMessage({action: ActionType.SETPROXY, scheme, host, port}) } export function clearproxy() { - chrome.runtime.sendMessage({action: 'clearproxy'}) + chrome.runtime.sendMessage({action: ActionType.CLEARPROXY}) }