🐛 修复vscode连接问题 #412 #400

close 在之前为了快速上线mv3到chrome商店未实现此功能

Author: CodFrm

src/app/service/offscreen/client.ts

@@ -1,7 +1,8 @@
 import { WindowMessage } from "@Packages/message/window_message";
 import { SCRIPT_RUN_STATUS, ScriptRunResouce } from "@App/app/repo/scripts";
-import { sendMessage } from "@Packages/message/client";
+import { Client, sendMessage } from "@Packages/message/client";
 import { MessageSend } from "@Packages/message/server";
+import { VSCodeConnect } from "./vscode-connect";
 
 export function preparationSandbox(msg: WindowMessage) {
   return sendMessage(msg, "offscreen/preparationSandbox");
@@ -35,3 +36,21 @@ export function stopScript(msg: MessageSend, uuid: string) {
 export function createObjectURL(msg: MessageSend, data: Blob) {
   return sendMessage(msg, "offscreen/createObjectURL", data);
 }
+
+export class VscodeConnectClient extends Client {
+  constructor(msg: MessageSend) {
+    super(msg, "offscreen/vscodeConnect");
+  }
+
+  connect(params: Parameters<VSCodeConnect["connect"]>[0]): ReturnType<VSCodeConnect["connect"]> {
+    return this.do("connect", params);
+  }
+
+  changeReConnect(params: Parameters<VSCodeConnect["changeReConnect"]>[0]): ReturnType<VSCodeConnect["changeReConnect"]> {
+    return this.do("changeReConnect", params);
+  }
+
+  disconnect(): ReturnType<VSCodeConnect["disconnect"]> {
+    return this.do("disconnect");
+  }
+}

src/app/service/offscreen/index.ts

@@ -7,6 +7,7 @@ import { ServiceWorkerClient } from "../service_worker/client";
 import { sendMessage } from "@Packages/message/client";
 import GMApi from "./gm_api";
 import { MessageQueue } from "@Packages/message/message_queue";
+import { VSCodeConnect } from "./vscode-connect";
 
 // offscreen环境的管理器
 export class OffscreenManager {
@@ -54,9 +55,10 @@ export class OffscreenManager {
 
     const gmApi = new GMApi(this.windowServer.group("gmApi"));
     gmApi.init();
+    const vscodeConnect = new VSCodeConnect(this.windowServer.group("vscodeConnect"));
+    vscodeConnect.init();
 
     this.windowServer.on("createObjectURL", (data: Blob) => {
-      console.log("createObjectURL", data);
       const url = URL.createObjectURL(data);
       setTimeout(() => {
         URL.revokeObjectURL(url);

src/app/service/offscreen/vscode-connect.ts

@@ -0,0 +1,94 @@
+import LoggerCore from "@App/app/logger/core";
+import Logger from "@App/app/logger/logger";
+import { prepareScriptByCode } from "@App/pkg/utils/script";
+import { Group } from "@Packages/message/server";
+
+// 在offscreen下与scriptcat-vscode建立websocket连接
+// 需要在vscode中安装scriptcat-vscode插件
+export class VSCodeConnect {
+  logger: Logger = LoggerCore.logger().with({ service: "VSCodeConnect" });
+
+  reconnect: boolean = false;
+
+  wsConnect: WebSocket | undefined;
+
+  connectVSCodeTimer: any;
+
+  constructor(private group: Group) {}
+
+  connect({ url, reconnect }: { url: string; reconnect: boolean }) {
+    // 如果已经连接，断开重连
+    if (this.wsConnect) {
+      this.wsConnect.close();
+    }
+    // 清理老的定时器
+    if (this.connectVSCodeTimer) {
+      clearInterval(this.connectVSCodeTimer);
+      this.connectVSCodeTimer = undefined;
+    }
+    const handler = () => {
+      if (!this.wsConnect) {
+        return this.connectVSCode({ url });
+      }
+      return Promise.resolve();
+    };
+    if (reconnect) {
+      this.connectVSCodeTimer = setInterval(() => {
+        handler();
+      }, 30 * 1000);
+    }
+    return handler();
+  }
+
+  // 连接到vscode
+  connectVSCode({ url }: { url: string }) {
+    return new Promise<void>((resolve, reject) => {
+      // 如果已经连接，断开重连
+      if (this.wsConnect) {
+        this.wsConnect.close();
+      }
+      try {
+        this.wsConnect = new WebSocket(url);
+      } catch (e: any) {
+        this.logger.debug("connect vscode faild", Logger.E(e));
+        return Promise.reject(e);
+      }
+      let ok = false;
+      this.wsConnect.addEventListener("open", () => {
+        this.wsConnect!.send('{"action":"hello"}');
+        ok = true;
+        resolve();
+      });
+      this.wsConnect.addEventListener("message", async (ev) => {
+        const data = JSON.parse(ev.data);
+        switch (data.action) {
+          case "onchange": {
+            // 调用安装脚本接口
+            // const code = data.data.script;
+            // const prepareScript = await prepareScriptByCode(code, "", uuidv5(data.data.uri, uuidv5.URL), true);
+            // this.scriptManager.event.upsertHandler(prepareScript.script, "vscode");
+            break;
+          }
+          default:
+        }
+      });
+
+      this.wsConnect.addEventListener("error", (e) => {
+        this.wsConnect = undefined;
+        this.logger.debug("connect vscode faild", Logger.E(e));
+        if (!ok) {
+          reject(new Error("connect fail"));
+        }
+      });
+
+      this.wsConnect.addEventListener("close", () => {
+        this.wsConnect = undefined;
+        this.logger.debug("vscode connection closed");
+      });
+    });
+  }
+
+  init() {
+    this.group.on("connect", this.connect.bind(this));
+  }
+}

src/app/service/service_worker/client.ts

@@ -12,6 +12,7 @@ import CacheKey from "@App/app/cache_key";
 import { Subscribe } from "@App/app/repo/subscribe";
 import { Permission } from "@App/app/repo/permission";
 import { ResourceBackup } from "@App/pkg/backup/struct";
+import { VSCodeConnect } from "../offscreen/vscode-connect";
 
 export class ServiceWorkerClient extends Client {
   constructor(msg: MessageSend) {
@@ -332,3 +333,13 @@ export class SubscribeClient extends Client {
     return this.do("enable", { url, enable });
   }
 }
+
+export class SystemClient extends Client {
+  constructor(msg: MessageSend) {
+    super(msg, "serviceWorker/system");
+  }
+
+  connectVSCode(params: Parameters<VSCodeConnect["connect"]>[0]): ReturnType<VSCodeConnect["connect"]> {
+    return this.do("connectVSCode", params);
+  }
+}

src/app/service/service_worker/index.ts

@@ -12,6 +12,7 @@ import { SubscribeService } from "./subscribe";
 import { ExtServer, ExtVersion } from "@App/app/const";
 import { systemConfig } from "@App/pages/store/global";
 import { ScriptCodeDAO, ScriptDAO } from "@App/app/repo/scripts";
+import { SystemService } from "./system";
 
 export type InstallSource = "user" | "system" | "sync" | "subscribe" | "vscode";
 
@@ -67,6 +68,8 @@ export default class ServiceWorkerManager {
     synchronize.init();
     const subscribe = new SubscribeService(systemConfig, this.api.group("subscribe"), this.mq, script);
     subscribe.init();
+    const system = new SystemService(systemConfig, this.api.group("system"), this.sender);
+    system.init();
 
     // 定时器处理
     chrome.alarms.onAlarm.addListener((alarm) => {

src/app/service/service_worker/system.ts

@@ -0,0 +1,34 @@
+import { SystemConfig } from "@App/pkg/config/config";
+import { Group, MessageSend } from "@Packages/message/server";
+import { VscodeConnectClient } from "../offscreen/client";
+import Cache from "@App/app/cache";
+
+// 一些系统服务
+export class SystemService {
+  constructor(
+    private systemConfig: SystemConfig,
+    private group: Group,
+    private sender: MessageSend
+  ) {}
+
+  async init() {
+    const vscodeConnect = new VscodeConnectClient(this.sender);
+    // 如果开启了自动连接vscode，则自动连接
+    // 使用tx来确保service_worker恢复时不会再执行
+    Cache.getInstance().tx("vscodeReconnect", async (init) => {
+      if (init) {
+        if (await this.systemConfig.getVscodeReconnect()) {
+          // 调用连接
+          vscodeConnect.connect({
+            url: await this.systemConfig.getVscodeUrl(),
+            reconnect: true,
+          });
+        }
+      }
+      return true;
+    });
+    this.group.on("connectVSCode", (params) => {
+      return vscodeConnect.connect(params);
+    });
+  }
+}

src/pages/options/routes/Tools.tsx

@@ -8,8 +8,10 @@ import { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import { useTranslation } from "react-i18next";
 import FileSystemFactory, { FileSystemType } from "@Packages/filesystem/factory";
 import { File, FileReader } from "@Packages/filesystem/filesystem";
-import { systemConfig } from "@App/pages/store/global";
+import { message, systemConfig } from "@App/pages/store/global";
 import { synchronizeClient } from "@App/pages/store/features/script";
+import { SystemConfig } from "@App/pkg/config/config";
+import { SystemClient } from "@App/app/service/service_worker/client";
 
 function Tools() {
   const [loading, setLoading] = useState<{ [key: string]: boolean }>({});
@@ -310,9 +312,12 @@ function Tools() {
             onClick={() => {
               systemConfig.setVscodeUrl(vscodeUrl);
               systemConfig.setVscodeReconnect(vscodeReconnect);
-              const ctrl = IoC.instance(SystemController) as SystemController;
-              ctrl
-                .connectVSCode()
+              const systemClient = new SystemClient(message);
+              systemClient
+                .connectVSCode({
+                  url: vscodeUrl,
+                  reconnect: vscodeReconnect,
+                })
                 .then(() => {
                   Message.success(t("connection_success")!);
                 })