CEF+ChromiumWebBrowser+vue+elementUI 前后端交互（注意：有后端非前端主动触发回调前端vue前端）

项目背景：

　　项目技术方案定的是前后端分离，采用framework4.0+vue+elementUI  客户端需要加壳(使用CEF+ChromiumWebBrowser)，避免客户端多样，导致环境不支持；

　　并且客户端需要调用微软硬件（键盘、语音）接口进行业务操作；

所遇到的场景：

• 语音

　　　　客户端（前端）需要触发调用；操作系统语音外设播报语音；

• 键盘

　　　　客户端（前端）需要监听键盘输入按键，并在回车的时候，回调前端js并将键盘输入的字符传给前端方法执行vue实例下指定方法；

代码实现

• 语音实现

　　　　后台代码：　　　　

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CardReader;
using CefSharp;
using CefSharp.WinForms;
using FormDLL;
using Newtonsoft.Json;
using RestSharp;
namespace CefSharpOfQueue {
    public partial class FormMain: Form {
        public ChromiumWebBrowser chromeBrowser;
        private Type voiceType;
        private CardReader.CardReader cardReader;
        private dynamic spVoice;
        private string token;
        public Control activeUserControl;
        private Panel panelContent;
        public FormMain() {
                //初始化语音设备
                this.voiceType = Type.GetTypeFromProgID("SAPI.SpVoice");
                this.spVoice = Activator.CreateInstance(this.voiceType);
                //初始化winform控件
                InitializeComponent();
                this.FormBorderStyle = FormBorderStyle.None;
                //winform全屏
                this.WindowState = FormWindowState.Maximized;
                //初始化chromium
                InitializeChromium();
                // 注册一个formMainProcess；用于前端调用后台
                chromeBrowser.RegisterJsObject("formMainProcess", new FormMainProcess(chromeBrowser, this));
            }
            //放在初始化winform控件InitializeComponent 方法中
        private void FormMain_Load(object sender, EventArgs e) {
            //this.activeUserControl = this.AddControl(new ScanCard(this));
            this.cardReader = new CardReader.CardReader(2);
            this.cardReader.CardRead += delegate(string cardCode) {
                if(!string.IsNullOrWhiteSpace(cardCode)) {
                    //将获取到的cardCode回传给前端全局变量
                    try {
                        chromeBrowser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("Vue.prototype.$store.state.isShow=true;Vue.prototype.$store.state.queryCode='" + cardCode + "'");
                    } catch {
                        //或者写日志
                        throw new Exception("error");
                    }
                }
            };
        }
        public void SpeakTxt(string msg) {
            this.spVoice.speak(msg, 1);
        }
        public void InitializeChromium() {
            // 获取配置文件里的前端服务地址
            string url = ConfigurationManager.AppSettings["ServiceAddress"];
            //创建chrome对象
            chromeBrowser = new ChromiumWebBrowser(url);
            // 将chrome对象添加进winform控制器
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Fill;
            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browserSettings.WebSecurity = CefState.Enabled;
            // browserSettings.LegacyJavascriptBindingEnabled = true;
            chromeBrowser.BrowserSettings = browserSettings;
            // 网页开始加载时的处理
            chromeBrowser.FrameLoadStart += (sender, e) => {
                string script = @"const loading = this.$loading({
                lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
            });
        setTimeout(() => {
            loading.close();
        }, 2000);
        ";
        e.Frame.ExecuteJavaScriptAsync(script);
    };
    // 网页加载完毕时的处理
    chromeBrowser.FrameLoadEnd += (sender, e) => {
        string script = "alert('加载完毕！');";
        e.Frame.ExecuteJavaScriptAsync(script);
    };
}
}
internal class FormMainProcess {
    private FormMain _instanceMainForm = null;
    private ChromiumWebBrowser _instanceBrowser = null;
    public FormMainProcess(ChromiumWebBrowser originalBrowser, FormMain mainForm) {
            _instanceBrowser = originalBrowser;
            _instanceMainForm = mainForm;
        }
        /// <summary>
        /// 播放语音
        /// </summary>
        /// <param name="message"></param>
    public void speakMsg(string message) {
        this._instanceMainForm.Invoke(new Action(delegate {
            this._instanceMainForm.SpeakTxt(message);
        }));
    }
}
}

　　　　前端代码：可在vue界面中script中任意一个方法中 使用后端注册了的formMainProcess 对象，调用对应方法。如下：

 

<template>
...
</template>
<script>
...
methods: {
    testf(){
             //呼叫，播报信息
                formMainProcess.speakMsg(
                    '测试语音ABCD'
                );
    }
}
</script>