VsCode插件与Node.js交互通信
首先关于VsCode插件通信，如果不明白的可以参考我的这篇博客VsCode插件开发之插件初步通信
如果需要详细例子的话，可以参考VsCode插件开发
现在又有一个新的需求是，VsCode插件可以通过jQuery的方式/或者引入某种前端通信框架实现与后台交互。但是针对之前某个需求，需求描述:用户登录后在本地某盘创建特定的文件夹。通常像创建特定文件夹的话，一般都是后端语言实现。而我当时编写的这个插件是用JavaScript，JavaScript是不能读写文件的，当然了，有些朋友可能会说可以使用ActiveXObject，但是这个ActiveXObject有局限性，它仅仅只能支持IE浏览器，而不能支持像Google Chrome和火狐这样的通用性广的浏览器。
为了解决这个需求，我决定结合node.js解决这个问题。
首先明确一点，vscode插件开发，不管是使用JavaScript还是TypeScript，通常由于本地调试的需求，都需要安装对应库，而管理这个库，通常使用npm或yarn。由此我们便可知，我们直接可以在该插件中编写node.js相关的代码。
实现需求的步骤如下:
引入vscode相关的库(因为要调用消息传递命令)
const testMode = false; // 为true时可以在浏览器打开不报错 // vscode webview 网页和普通网页的唯一区别：多了一个acquireVsCodeApi方法 const vscode = testMode ? {} : acquireVsCodeApi(); const callbacks = {}; /** * 调用vscode原生api * @param data 可以是类似 {cmd: 'xxx', param1: 'xxx'}，也可以直接是 cmd 字符串 * @param cb 可选的回调函数 */ function callVscode(data, cb) { if (typeof data === 'string') { data = { cmd: data }; } if (cb) { // 时间戳加上5位随机数 const cbid = Date.now() + '' + Math.round(Math.random() * 100000); callbacks[cbid] = cb; data.cbid = cbid; } vscode.postMessage(data); }
消息传到node.js
vscode.postMessage({ command: 'login', text: nickName });
那么有朋友会问，那么node.js是如何接收它的?
module.exports = function (context) { var interval = null; var i = 0; var flag = false; context.subscriptions.push(vscode.commands.registerCommand('extension.demo.showWelcome', function (uri) { if (flag) { return; } const panel = vscode.window.createWebviewPanel( 'testWelcome', // viewType "功能页", // 视图标题 vscode.ViewColumn.One, // 显示在编辑器的哪个部位 { enableScripts: true, // 启用JS，默认禁用 } ); flag = true; panel.onDidDispose( () => { flag = false; }, null, context.subscriptions); let global = { panel }; panel.webview.html = getWebViewContent(context, 'src/view/custom-welcome.html'); //创建文件 panel.webview.onDidReceiveMessage(message => { switch (message.command) { case 'login': create(message.text, true); break; case 'time': start(); break; case 'showCourseList': vscode.commands.executeCommand('extension.demo.showCourseList', message.text); break; case 'closeTime': stop(); break; case 'themeColor': var name = getTheme(); panel.webview.postMessage({ command: 'refactor', text: name }); break; case 'readToken': var name = getToken(); console.log("-------------go go go go go go go ------------------------:" + name); panel.webview.postMessage({ command: 'checkToken', text: name }); break; case 'storeUserId': console.log("----------------store UserId-----------------:" + message.text); storeUserId(message.text); break; case 'getUserId': var userId = getUserID(); console.log("----------------Get UserId-----------------:" + userId); panel.webview.postMessage({ command: 'readUserId', text: userId }); break; case 'storageToken': storeToken(message.text); break; case 'deleteToken': deleteToken(message.text); break; case 'readUploadFilePath': console.log("------------------------ readUploadFilePath -----------:" + message.text); var content = readExtensionFile(message.text); panel.webview.postMessage({ command: 'uploadConfig', text: content }); break; case 'downloadExtensionFile': downloadExtensionFile(message.text); break; } }, undefined, context.subscriptions); }));
通过message.command我们就可以获取对应的command，根据command对应的字符走对应的case。这就是前端JavaScript与Node.js的通信。
Node.js如何响应JavaScript的通信(相当于打电话，我打电话给你，不能仅仅是我在说，也需要你的响应(回答))
Node.js响应JavaScript通信代码如下(发送消息给window.addEventListener与前端JavaScript发送消息给Node.js本质上是一样的)
switch (message.command) { case 'refactor': console.log("自定义背景颜色 custome background color:" + message.text); if (message.text == "light") { document.body.style.backgroundColor = "#FFFFFF"; } else { document.body.style.backgroundColor = "#333333"; } break; case 'checkToken': console.log("-------------------checkToken----------------------------:" + message.text); if (message.text == null || message.text == "") { Login() } else { $("#exit").show(); $("#settings-sync").show(); $("#upload_settings").show(); $("#token").val(message.text); readUploadFilePath("D://1024Workspace//extension//"); } break; case 'readUserId': console.log("=====================readUserID=========================:" + message.text); $("#userId").val(message.text); checkPermissions(message.text); break; case 'uploadConfig': console.log("========================Upload Config ======================:" + message.text); $("#uploadExtensionContent").val(message.text); break; } });
window.addEventListener在此相当于监听全局。
通过message.text我们可以获取node.js响应给前端JavaScript的文本消息或者是json数据。
上述说的两点用官方的话语表示如下:
(1)JavaScript与Node.js通信;
(2)Node.js与JavaScript通信;
