当前位置：首页 > news >正文

vscode插件开发之 - 消息通信

news 来源：原创 2024/6/26 23:18:48

在开发vscode插件过程中，有一个典型场景是webview与extension.ts进行通信，例如，webview上的某些信息发送改变时，需要发送消息传递给extension.ts. 如果使用react框架构建vscode插件的webview，如何实现webview与extension.ts之间通信呢？如果要实现信息通信，需要三个步骤：

步骤一：在react的src目录下，定义一个全局变量vscode，代码如下所示：这里定义了Message数据结构，定义了VSCode别名。

interface Message {command: string;content: string;[key: string]: any;
}
type VSCode = {Uri: any;env: any;postMessage(message: Message): void;getState(): any;setState(state: any): void;
};declare const vscode: VSCode;

步骤二：在react的source code下面，在需要发送共享消息的地方，调用vscode.postMessage()发送消息。示例代码如下所示，当input中的信息或者dropdown中的信息发生改变时，就会通过postMessage发送消息出去。

const App = () => {const [sex, setSex] = useState('');const handleChange = (event: any) => {setSex(event.target.value);vscode.postMessage({ command: "sexChange", content: event.target.value });};const handleNameChange = (event: any) => {const value = event.target.value;vscode.postMessage({ command: "nameChange", content: value });}const handelAgeChange = (event: any) => {const value = event.target.value;vscode.postMessage({ command: "ageChange", content: value });}return (<div><div><input type="text" name="name" onChange={handleNameChange}></input></div><div><input type="text" name="age" onChange={handelAgeChange}></input></div><div><select value={sex} onChange={handleChange} ><option>girl</option><option>boy</option></select></div><div><button>ShowIt</button></div></div>);
};
const rootElement = document.getElementById('root');
if (rootElement) {const root = (ReactDOM as any).createRoot(rootElement);root.render(<App />);
} else {console.error('Root element not found!');
}

步骤三：在extension.ts代码中，增加监听消息的代码，如果是多个信息需要汇聚，那么可以定义个公共的数据对象，直接更新这个对象即可。调用webview.onDidReceiveMessage监听消息，并将接受到的内容，更新到info这个变量上。

        webviewView.webview.onDidReceiveMessage((message: any) => {if (message.command === "nameChange") {info.name = message.content} else if (message.command === "ageChange") {info.age = message.content} else if (message.command === "sexChange") {info.sex = message.content}})

export interface Info {name: string,age: number,sex: string
}export let info: Info = {name: "",age: 0,sex: "boy"
}

修改完上述代码后，就可以进行验证，是否能在extension.ts上接受不了webview上的输入信息了，这里当trigger demo.showOne command的时候，在message上，打印了info这个对象。

    context.subscriptions.push(vscode.commands.registerCommand('demo.showOne', () => {vscode.window.showInformationMessage('I am showOne.');vscode.window.showInformationMessage(JSON.stringify(info))}));

重新编译后，在extension的webview上输入一些信息，在点击右键菜单的showOne，在右下角的message上成功打印出了消息，说明消息传递成功。

那么，为什么在webview的source code上定义了Message和VSCode对象后，就能调用postMessage发送消息呢？实际上如果要成功发送消息，在extension.ts的webview.html代码中还需要添加上“const vscode = acquireVsCodeApi()”才行。

    private getWebviewContent(webviewUri: vscode.Uri): string {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Taoli Webview</title></head><body><div id="root"></div><script>const vscode = acquireVsCodeApi();</script><script src="${webviewUri}"></script></body></html>`;}
}

消息通信工作原理

在 VS Code 扩展中，webview 是一个内嵌的 HTML 环境，类似于一个 iframe。acquireVsCodeApi 函数是 VS Code 提供的一个全局函数，允许 webview 内部的 JavaScript 代码获取一个 VS Code API 对象，从而与扩展主进程进行通信。调用该函数会返回一个包含一组方法的对象，这些方法用于与扩展主进程进行双向通信。主要的方法包括：
postMessage(message: any): void
getState(): any
setState(state: any): void

在步骤一中定义的VScode和Message对象，这些代码是告诉 TypeScript 编译器，在运行时将会有一个全局的 vscode 对象，该对象符合 VSCode 类型。这是为了让 TypeScript 知道 vscode 对象的存在，并进行类型检查和自动补全。实际当webview运行的时候，使用的是acquireVsCodeApi 函数返回的VScode常量。这个常量提供的方法和之前定义的一致。通过这种方式实现了消息通信。

1.发送消息：webview 内部的代码使用 vscode.postMessage 方法发送消息到主进程。
2.接收消息：主进程使用 webview.onDidReceiveMessage 方法接收并处理这些消息。
3.双向通信：如果需要，主进程还可以使用 webview.postMessage 方法向 webview 发送消息，从而实现双向通信。