簡介

vscode提供了一些方式比如通過命令讓插件之間通信，但是兩個不同插件的webview的頁面間通信比較複雜，如果還想交換數據，涉及的步驟會更多。

MessageChannel的目的是讓所有vscode的通信都通過它來完成，不過目前階段僅實現了不同插件webview之間的通信以及交換數據。

使用方法

web端發送消息

使用方法

window.mc.pubWithSub(extensionId, options, callback);

參數解析

1. extensionId，要通信的插件的唯一標識，由package.json中的name和publisher組成。

2. options，是一個對象，包含如下選項：

   1). viewType，要打開的webview的type，一般聲明為靜態類型。

   2). source

   文件預覽型webview	命令打開的webview面板
   D:\\project\\vscode\\vscode-extension-samples\\url-webview-sample\\exampleFiles\\example.cscratch'	相應的命令

   3).selector，打開web後要自動點擊的元素的選擇器列表，多個元素依次點擊。比如打開env的頁面後自動添加添加按鈕。

   4). payload，要傳遞的額外參數，這個參數會自動添加為selector對應元素的payload屬性

使用示例如下：

    window.mc = (${MessageChannel.toString()})()
    // 設置發、收消息的對象。對於web來説carrier是vscode引擎內置到html中vscode對象，對於node來説是webview的示例。
    window.mc.setCarrier();

    document.querySelector('.url-webview button').addEventListener('click', () => {
        const input = document.querySelector('.url-webview .send-message input');
        const value = input.value;
        // 文件預覽型
        window.mc.pubWithSub('walker.response-url-webview-sample', 
        { 
            viewType: 'catCustoms.catScratch',
            source: 'D:\\\\project\\\\vscode\\\\vscode-extension-samples\\\\url-webview-sample\\\\exampleFiles\\\\example.cscratch',
            selector: ['input'],
            payload: value
        },
        (data) => {
            document.querySelector('.url-webview .response-message').innerText = data;
        });
    });
      document.querySelector('.command-webview button').addEventListener('click', () => {
        const input = document.querySelector('.command-webview .send-message input');
        const value = input.value;
          // 命令打開型
        window.mc.pubWithSub('walker.command-webview-sample', { viewType: 'catCoding', source: 'catCoding.start', selector: ['input'], payload: value }, (data) => {
            document.querySelector('.command-webview .response-message').innerText = data;
        });
    });

消息方法方對應的node部分

這裏只需初始化，傳入的參數為當前webview的viewType。

示例如下
mc.initiator(ColorsViewProvider.viewType);

消息接受方對應的node部分

這裏只需初始化，傳入的參數為當前webview的viewType。

示例如下
mc.initiator(CatScratchEditorProvider.viewType);

消息接受方對應的web部分

按上述參數傳遞已經能夠打開webview對應的web頁面了，如果需要給發送方返回一些數據，可以調用feedbackResult全局函數。

示例如下

    document.querySelector('button').addEventListener('click', (args) => {
        const result = document.querySelector('input').value;
        feedbackResult && feedbackResult(result);
    });