记录第一次浏览器调起exe程序，实现asr转译

由于浏览器收音效果强差人意。所以搞了个exe程序，安装到电脑上，用于收音，效果要比浏览器强一些

我需要在课程详情页，获取电脑是否已安装这个exe，然后安装了直接打开，没安装提示安装，并点击按钮下载

<div v-if="showDownload" class="sdk-tips">
    <i class="el-icon-warning"></i>
    <span class="warning-text">
        注意：检测到您尚未安装"语音识别程序"会影响收音识别效果，请
        <!-- 这里的asrSdkUrl对应的是你们项目里的静态文件地址路径，比如public/aaa/文件夹下的exe,asrSdkUrl就是'/aaa/tes.exe' -->
        <a
            class="sdk-download-text"
            :href="asrSdkUrl"
            target="_self"
        >
        	点击安装
        </a>
    </span>
</div>

async created() {
    // 当前系统是windows，提示打开语音sdk
    if (navigator.platform.indexOf('Win') !== -1) {
        this.isWindows = true;
        // 这里是因为没有好的方法判断 用户是否已经打开了exe程序，所以只能建立一个链接，通过ws的回调来判断exe是否一打开
        await this.openWs();
        if (!this.isSdk) {
            openUrlWithTimeoutHack(
            	// 这个就是exe的调起语句，可以在注册表里的看到 对应的js方法就是 window.location = 'testExe://'
                'TestExe://',
                () => {
                    this.isSdk = false;
                    this.showDownload = true;
                },
                () => {}
            );
        }
    }
},
methods: {
	async openWs() {
        return new Promise(resolve => {
        	// exe 就是起了个本地的ws服务，所以这里创建一个ws连接
            this.socket = new WebSocket(asrLiveUrl);
            this.socket.onerror = () => {
                this.isSdk = false;
                resolve();
            };
            this.socket.onopen = () => {
                this.isSdk = true;
                resolve();
            };
            this.socket.onclose = () => {
                this.isSdk = false;
                resolve();
            };
        });
    }，
    async toCourseTest() {
        if (this.isWindows) {
        	// 我们是在ws的回调里赋值的isSdk，所以这里必须得写成async await 否则，下面传值的时候一直都是默认值
            await this.openWs();
        }
        this.$router.push({
        	path: '/course/test',
            query: {
                courseId: this.courseId,
                isSdk: this.isSdk
            }
        })
    },
}

protocolcheck.js

// 读取注册表信息，查看是否已安装某个exe程序，已安装就打开并执行successCb成功回调，未安装则执行failCb失败回调
function _registerEvent(target, eventType, cb) {
    if (target.addEventListener) {
        target.addEventListener(eventType, cb);
        return {
            remove: function () {
                target.removeEventListener(eventType, cb);
            }
        };
    }
    else {
        target.attachEvent(eventType, cb);
        return {
            remove: function () {
                target.detachEvent(eventType, cb);
            }
        };
    }
}

export function openUrlWithTimeoutHack(url, failCb, successCb) {
    let target = window;
    while (target !== target.parent) {
        target = target.parent;
    }
    let handler = _registerEvent(target, 'blur', onBlur);

    const timeout = setTimeout(function () {
        failCb();
        handler.remove();
    }, 1000);

    function onBlur() {
        clearTimeout(timeout);
        handler.remove();
        successCb();
    }

    window.location = url;
}

本来想实现 判断是否存在，不打开exe的，结果找遍了也没找到，有的是只能ie浏览器用，有的是github库已经不维护了，最后就只能这样了 存在就打开，不存在就展示文案

ps：
这个项目没有public静态文件，静态文件是在webpack里配置的，打包后的静态文件路径是自己配的 所以我的 asrSdkUrl是’/assets/sdk/test.exe’

plugins: [
	new CopyWebpackPlugin([
	{
            from: path.resolve(__dirname, '../src/assets/sdk/test.exe'), // 不打包直接输出的文件
            to: folder + 'assets/sdk/', // 打包后静态文件放置位置
            ignore: ['.*'] // 忽略规则。（这种写法表示将该文件夹下的所有文件都复制）
        },
	])
]