VsCode插件与Node.js交互通信

锅炉發表於 2019-6-8 21:48:00

首先关于VsCode插件通信，如果不明白的可以参考我的这篇博客VsCode插件开发之插件初步通信
如果需要详细例子的话，可以参考VsCode插件开发
现在又有一个新的需求是，VsCode插件可以通过jQuery的方式/或者引入某种前端通信框架实现与后台交互。但是针对之前某个需求，需求描述:用户登录后在本地某盘创建特定的文件夹。通常像创建特定文件夹的话，一般都是后端语言实现。而我当时编写的这个插件是用JavaScript，JavaScript是不能读写文件的，当然了，有些朋友可能会说可以使用ActiveXObject，但是这个ActiveXObject有局限性，它仅仅只能支持IE浏览器，而不能支持像Google Chrome和火狐这样的通用性广的浏览器。
为了解决这个需求，我决定结合node.js解决这个问题。
首先明确一点，vscode插件开发，不管是使用JavaScript还是TypeScript，通常由于本地调试的需求，都需要安装对应库，而管理这个库，通常使用npm或yarn。由此我们便可知，我们直接可以在该插件中编写node.js相关的代码。
实现需求的步骤如下:
<h2>引入vscode相关的库(因为要调用消息传递命令)</h2>
<div class="cnblogs_code">
<pre>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 = cb;
 data.cbid = cbid;
}
vscode.postMessage(data);
}</pre>
</div>
<h2>消息传到node.js</h2>
<div class="cnblogs_code">
<pre>vscode.postMessage({
command: 'login',
text: nickName
});</pre>
</div>
那么有朋友会问，那么node.js是如何接收它的?
<div class="cnblogs_code">
<pre>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);

}));</pre>
</div>
通过message.command我们就可以获取对应的command，根据command对应的字符走对应的case。这就是前端JavaScript与Node.js的通信。
 
<h2>Node.js如何响应JavaScript的通信(相当于打电话，我打电话给你，不能仅仅是我在说，也需要你的响应(回答))</h2>
Node.js响应JavaScript通信代码如下(发送消息给window.addEventListener与前端JavaScript发送消息给Node.js本质上是一样的)
<div class="cnblogs_code">
<pre>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;

}
});</pre>
</div>
window.addEventListener在此相当于监听全局。
通过message.text我们可以获取node.js响应给前端JavaScript的文本消息或者是json数据。
上述说的两点用官方的话语表示如下: (1)JavaScript与Node.js通信; (2)Node.js与JavaScript通信; 
来源：https://www.cnblogs.com/youcong/p/10991826.html

頁: [1]

琼殿技术论坛's Archiver

VsCode插件与Node.js交互通信