VsCode插件與Node.js交互通訊

時間 2019-12-07

標籤 vscode 插件 node.js node 交互通訊欄目 Node.js 简体版

原文原文鏈接

首先關於VsCode插件通訊，若是不明白的能夠參考個人這篇博客VsCode插件開發之插件初步通訊javascript

若是須要詳細例子的話，能夠參考VsCode插件開發html

如今又有一個新的需求是，VsCode插件能夠經過jQuery的方式/或者引入某種前端通訊框架實現與後臺交互。可是針對以前某個需求，需求描述:用戶登陸後在本地某盤建立特定的文件夾。一般像建立特定文件夾的話，通常都是後端語言實現。而我當時編寫的這個插件是用JavaScript，JavaScript是不能讀寫文件的，固然了，有些朋友可能會說可使用ActiveXObject，可是這個ActiveXObject有侷限性，它僅僅只能支持IE瀏覽器，而不能支持像Google Chrome和火狐這樣的通用性廣的瀏覽器。前端

爲了解決這個需求，我決定結合node.js解決這個問題。java

首先明確一點，vscode插件開發，無論是使用JavaScript仍是TypeScript，一般因爲本地調試的需求，都須要安裝對應庫，而管理這個庫，一般使用npm或yarn。由此咱們即可知，咱們直接能夠在該插件中編寫node.js相關的代碼。node

實現需求的步驟以下:git

引入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是如何接收它的?github

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的通訊。web

Node.js如何響應JavaScript的通訊(至關於打電話，我打電話給你，不能僅僅是我在說，也須要你的響應(回答))

Node.js響應JavaScript通訊代碼以下(發送消息給window.addEventListener與前端JavaScript發送消息給Node.js本質上是同樣的)npm

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;

    }
});