关于typescript:VS-Code-For-Web-深入浅出-Server-模块设计篇

0次阅读

共计 7226 个字符，预计需要花费 19 分钟才能阅读完成。

在理解了 VS Code 的通信机制后，咱们能够着手剖析 VS Code Server 中各模块的实现以及设计思路了。

<!– more –>

通过之前的介绍咱们能够理解到，VS Code 的能力是前后端拆散的，这使得 remote server 的革新实现变得简略。

通过这一张架构图，咱们能够直观的看到在 VS Code 中，前后端能力职责的划分。

能够看出，除了多数的一些像本地文件上传，语法高亮、主题设置等能力，一些重依赖多过程通信、OS 反对，语言编译的能力都被设计在了 Server 端中，以保障 Client 端足够的轻量简洁，能够运行在 Web 这样的轻环境中。

在本篇中，我来带大家浅要剖析 Server 端的几个重要模块的设计思路与实现。

Remote File System 负责解决文件系统的读写操作，同时还须要解决文件系统的变动事件，以便于客户端可能实时更新文件系统的变动。在 VSCode 中，它封装了一层 Virtual file system 来实现对不同文件系统的兼容管制。

这一部分是 VSCode Server 的外围中最容易实现的局部。它实质上就是使依赖古代浏览器的 File_System_Access_API 来实现的（强制在 HTTPS 下应用）。

async function getTheFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();}

具体的代码申明地位见 FileSystemProvider。

这里应用 vscode-vfs 这个库来实现虚构文件系统。这是一个 URI 计划，它注册了 File System Provider，并且该文件系统上的资源将由应用该模式的 URI 示意（例如vscode-vfs://vscode/package.json）。

因而，间接关上近程存储库也得以实现，例如 Github Codespaces 的关上就是这样实现的。

应用 vscode-vfs://github/microsoft/vscode，通过拜访 https://github.com/microsoft/vscode，就可能在不进行 git clone的状况下，间接关上我的项目文件夹了。

实例化后，全局都能够通过传入 RuntimeEnvironment，通过 runtime.fs 来拜访与调用。

async stat(uri: string): Promise<FileStat> {if (fileFs && uri.startsWith('file:')) {return fileFs.stat(uri);
    }
    const res = await connection.sendRequest(FsStatRequest.type, uri.toString());
    return res;
}

readDirectory(uri: string): Promise<[string, FileType][]> {if (fileFs && uri.startsWith('file:')) {return fileFs.readDirectory(uri);
    }
    return connection.sendRequest(FsReadDirRequest.type, uri.toString());
}

当然，对于不反对这套 API 的浏览器来说，关上时会检测接口，弹出正告。

至于解决形式，之前说过，VSCode 的 server 端是同构的，server 天然也能提供本地文件系统反对，仍能够通过浏览器的上传 API 来实现。

这里实际上是复用了 VSCode 之前推出的 Remote-Server extension 能力，通过 SSH 隧道的形式，将终端的输入输出流转发到近程服务器上。（再一次阐明了为什么强制要求在 HTTPS 下应用）

还记得咱们之前提到过的，Channel 为通信的最小单元吗？VSCode Server 的 Remote Terminal 就是通过一个 RemoteTerminalChannel 来实现的。

通过监听与触发不同的事件（如onExecuteCommand, sendCommandResult），来实现对 Remote Terminal 的不同行为的信息同步。

    async call(ctx: RemoteAgentConnectionContext, command: string, args?: any): Promise<any> {switch (command) {case '$restartPtyHost': return this._ptyService.restartPtyHost?.apply(this._ptyService, args);

            case '$createProcess': {const uriTransformer = createURITransformer(ctx.remoteAuthority);
                return this._createProcess(uriTransformer, <ICreateTerminalProcessArguments>args);
            }
            case '$attachToProcess': return this._ptyService.attachToProcess.apply(this._ptyService, args);
            case '$detachFromProcess': return this._ptyService.detachFromProcess.apply(this._ptyService, args);

            case '$listProcesses': return this._ptyService.listProcesses.apply(this._ptyService, args);
            case '$orphanQuestionReply': return this._ptyService.orphanQuestionReply.apply(this._ptyService, args);
            case '$acceptPtyHostResolvedVariables': return this._ptyService.acceptPtyHostResolvedVariables?.apply(this._ptyService, args);

            case '$start': return this._ptyService.start.apply(this._ptyService, args);
            case '$input': return this._ptyService.input.apply(this._ptyService, args);
            case '$acknowledgeDataEvent': return this._ptyService.acknowledgeDataEvent.apply(this._ptyService, args);
            case '$shutdown': return this._ptyService.shutdown.apply(this._ptyService, args);
            case '$resize': return this._ptyService.resize.apply(this._ptyService, args);
            case '$getInitialCwd': return this._ptyService.getInitialCwd.apply(this._ptyService, args);
            case '$getCwd': return this._ptyService.getCwd.apply(this._ptyService, args);

            case '$processBinary': return this._ptyService.processBinary.apply(this._ptyService, args);

            case '$sendCommandResult': return this._sendCommandResult(args[0], args[1], args[2]);
            case '$installAutoReply': return this._ptyService.installAutoReply.apply(this._ptyService, args);
            case '$uninstallAllAutoReplies': return this._ptyService.uninstallAllAutoReplies.apply(this._ptyService, args);
            case '$getDefaultSystemShell': return this._getDefaultSystemShell.apply(this, args);
            case '$getProfiles': return this._getProfiles.apply(this, args);
            case '$getEnvironment': return this._getEnvironment();
            case '$getWslPath': return this._getWslPath(args[0]);
            case '$getTerminalLayoutInfo': return this._ptyService.getTerminalLayoutInfo(<IGetTerminalLayoutInfoArgs>args);
            case '$setTerminalLayoutInfo': return this._ptyService.setTerminalLayoutInfo(<ISetTerminalLayoutInfoArgs>args);
            case '$serializeTerminalState': return this._ptyService.serializeTerminalState.apply(this._ptyService, args);
            case '$reviveTerminalProcesses': return this._ptyService.reviveTerminalProcesses.apply(this._ptyService, args);
            case '$getRevivedPtyNewId': return this._ptyService.getRevivedPtyNewId.apply(this._ptyService, args);
            case '$setUnicodeVersion': return this._ptyService.setUnicodeVersion.apply(this._ptyService, args);
            case '$reduceConnectionGraceTime': return this._reduceConnectionGraceTime();
            case '$updateIcon': return this._ptyService.updateIcon.apply(this._ptyService, args);
            case '$updateTitle': return this._ptyService.updateTitle.apply(this._ptyService, args);
            case '$updateProperty': return this._ptyService.updateProperty.apply(this._ptyService, args);
            case '$refreshProperty': return this._ptyService.refreshProperty.apply(this._ptyService, args);
            case '$requestDetachInstance': return this._ptyService.requestDetachInstance(args[0], args[1]);
            case '$acceptDetachedInstance': return this._ptyService.acceptDetachInstanceReply(args[0], args[1]);
            case '$freePortKillProcess': return this._ptyService.freePortKillProcess?.apply(this._ptyService, args);
        }

        throw new Error(`IPC Command ${command} not found`);
    }

    listen(_: any, event: string, arg: any): Event<any> {switch (event) {
            case '$onPtyHostExitEvent': return this._ptyService.onPtyHostExit || Event.None;
            case '$onPtyHostStartEvent': return this._ptyService.onPtyHostStart || Event.None;
            case '$onPtyHostUnresponsiveEvent': return this._ptyService.onPtyHostUnresponsive || Event.None;
            case '$onPtyHostResponsiveEvent': return this._ptyService.onPtyHostResponsive || Event.None;
            case '$onPtyHostRequestResolveVariablesEvent': return this._ptyService.onPtyHostRequestResolveVariables || Event.None;
            case '$onProcessDataEvent': return this._ptyService.onProcessData;
            case '$onProcessReadyEvent': return this._ptyService.onProcessReady;
            case '$onProcessExitEvent': return this._ptyService.onProcessExit;
            case '$onProcessReplayEvent': return this._ptyService.onProcessReplay;
            case '$onProcessOrphanQuestion': return this._ptyService.onProcessOrphanQuestion;
            case '$onExecuteCommand': return this.onExecuteCommand;
            case '$onDidRequestDetach': return this._ptyService.onDidRequestDetach || Event.None;
            case '$onDidChangeProperty': return this._ptyService.onDidChangeProperty;
            default:
                break;
        }

        throw new Error('Not supported');
    }

VSCode Server 会将通过 code-server --install-extension <extension id> 命令装置的 extensions 存储在 $XDG_DATA_HOME/code-server/extensions 下。

用户配置信息存储在本地的~/.vscode 下，应用官网的 Settings Sync 插件进行配置漫游。

VSCode 将插件分为了 UI Extension 与 Workspace Extension 两种，通过 extensionKind 字段进行指定。

如果不波及到 Node.js 调用的简略插件，是纯申明性质的代码的话（例如 Themes、key-binding，或者能间接利用客户端 API 能笼罩能力的插件等），则能够定义为 UI Extension，间接在客户端中执行，服务端只保留插件的配置信息，无需进行通信。

这也是为什么 vscode.dev 中（截至目前地位，该网页不蕴含 Server 能力），所有的主题、包含例如 TS、Python、Markdown、HTML 等语言的文件补全、语法高亮、括号着色都是能够失常应用的起因。因为在架构上，这些能力都是由客户端的内置插件 (语言补全等相干个性是通过专门编写的 web worker thread 旁路执行) 提供的，通过 VSCode API 间接进行调用。

但如果性能波及到运行时的零碎级调用，则须要被定义为Workspace Extension，它能够齐全拜访源码、文件系统、以及大部分 OS API。

Workspace Extension 须要装置在服务端，并须要在插件中显式申明。

体现在编码标准上，咱们须要为插件我的项目的 package.json 文件中增加 main 的 entrypoint，以执行服务端插件调用，而 UI Extension 的 entrypoint 应用 browser 示意。

{
    ...
    "main": "./dist/node/extension.js",
    "browser": "./dist/browser/extension.js",
    "capabilities": {"virtualWorkspaces": true}
    ...
}

逻辑上，插件须要依据 web 端与 server 端离开编写，并自行做好兼容。

正文完