vue electron node koa 实现桌面应用

1、构建electron+vue

这个部分之前文章写过，就不再赘述。vuecli4 electron13.3.0 创建客户端应用_jmszl1991的博客-CSDN博客1、创建项目// 这个步骤不在多说vue create vue-electron-demo2、添加electron# 项目创建完毕之后,进入项目文件夹cd vue-electron-demo# 添加electronvue add electron-bilder注意，这里开始出现问题。不管你的npm是不是淘宝镜像，你会发现这个electron下载的很慢或者干脆就是报错。这里有个技巧：当执行到node install.js ....你就需要ctrl+c，https://blog.csdn.net/jmszl1991/article/details/120313089?spm=1001.2014.3001.5501

2、使用koa构建websocket服务

首先，安装所需的koa相关依赖

npm i -S koa koa-route koa-websocket

 安装版本参考如下：

"koa": "^2.13.4",
"koa-route": "^3.2.0",
"koa-websocket": "^6.0.0",

然后开始写构建 websocket服务的程序，根目录下新建一个server.js,代码如下：

const port = 10001;
const Koa = require('koa')
const route = require('koa-route')
const websockify = require('koa-websocket')
const app = websockify(new Koa());
let wsObj = {};
app.ws.use(route.all('/websocket', function (ctx) {
    // 客户端链接传过来的客户端身份
    const { client } = ctx.query
    // 将链接保存起来
    wsObj[client] = ctx;
    //console.log('连接 -- wsObj', JSON.stringify(wsObj));
    ctx.websocket.send("连接成功");
    /**接收消息*/
    ctx.websocket.on('message', function(message) {
        
        // uid为接收方，将接收到的信息发送给接收方uid,可以根据自己的需求处理数据再发送
        const {
            messageType,
            data
        } = JSON.parse(message);
        console.log('接收到的消息', messageType);
        // 如果发来请求登录的消息
        if (messageType === 'clientLoginIn') {
            let str = JSON.stringify({"messageType":"loginAck","data":{"code":"0000","reason":"登录成功"}});
            wsObj.phone.websocket.send(str)
        } else if (messageType === 'callMsg') {
        //  接收外呼信号
            let str = JSON.stringify({"messageType":"outCall","data":{"callPhone": data.callPhone}});
            wsObj.phone.websocket.send(str)
        } else if (messageType === 'clientPing') {
        // 接收心跳包 ping 发送相应 pong
            let str = JSON.stringify({"messageType":"pong"});
            wsObj.phone.websocket.send(data)
        } 
    });

    /* ctx.websocket.on("close", (message) => {
        wsObj = {};
    }); */
}));


app.listen(port, () => {
    console.log("localhost:" + port);
});

 可以实验以下，打开cmd执行命令：

node server.js

可以看到下图就说明，websocket服务启动成功：

3、在vue项目中，连接websocket服务

比如在app.vue中连接websocket服务

export default {
    name: 'App',
    data () {
        return {
            websock: null,
            lockReconnect: false, //是否真正建立连接
            timeout: 28 * 1000, //30秒一次心跳
            timeoutObj: null, //心跳心跳倒计时
            serverTimeoutObj: null, //心跳倒计时
            timeoutnum: null, //断开 重连倒计时
            reconnctNum: 0, //
        }
    },
    methods:{
        // 初始化websocket
        initWebSocket() {
            if (typeof WebSocket === "undefined") {
                alert("您的浏览器不支持WebSocket");
                return false;
            }
            const wsuri = 'ws://localhost:10001/websocket?client=electron';
            this.websock = new WebSocket(wsuri);
            // 设置全局ws
            this.$ws.setWs(this.websock);
            this.websock.onopen = this.websocketonopen;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onerror = this.websocketonerror;
            this.websock.onclose = this.websocketclose;
        },
        //连接成功
        websocketonopen() {
            console.log("************ WebSocket连接成功 ************ ");
            const str = JSON.stringify({
                messageType: 'vue',
                data: '客户端1连接'
            });
            this.websock.send(str);
            this.start();
        },
        //接收后端返回的数据
        websocketonmessage(e) {
            // let dataJson = typeof(e.data) !== 'string' ? JSON.parse(e.data) : null;
            console.log("************* websocket返回数据 -- data", e.data);
            //收到服务器信息，心跳重置
            this.setSocketHeart();
        },
        //连接建立失败重连
        websocketonerror(e) {
            console.log(`连接失败后尝试重新连接, 连接失败的信息：`, e);
            // 连接失败后尝试重新连接
            //重连
            this.reconnectSocket();
        },
        //关闭连接
        websocketclose(e) {
            console.log("断开连接", e);
            //重连
            this.reconnectSocket();
        },
        // 设置socket心跳
        setSocketHeart() {
            var that = this;
            //清除时间
            clearTimeout(that.timeoutObj);
            clearTimeout(that.serverTimeoutObj);
            //重启心跳
            that.start();
        },
        // 重启心跳
        start() {
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            self.timeoutObj = setTimeout(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                if (self.websock.readyState == 1) {
                    //如果连接正常
                    let str = JSON.stringify({
                        messageType: 'heartCheck',
                        data: 'heartCheck'
                    });
                    self.websock.send(str);
                } else {
                    //否则重连
                    self.reconnectSocket();
                }
                self.serverTimeoutObj = setTimeout(function () {
                    //超时关闭
                    self.websock.close();
                }, self.timeout);
            }, self.timeout);
        },
        // 设置重连socket
        reconnectSocket() {
            var that = this;
            if (that.lockReconnect) {
                return;
            }
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () {
                //新连接
                that.initWebSocket();
                that.lockReconnect = false;
            }, 10000);
        },
    },
    mounted () {
        this.initWebSocket();
    },
    destroyed() {
        //页面销毁时关闭ws连接
        if (this.websock) {
            this.websock.close(); // 关闭websocket
        }
    },
}

随后启动项目， 可以在浏览器控制台看到如下打印信息，即为连接成功：

************ WebSocket连接成功 ************ 

4、serverjs自启动

如果没有处理好serverjs，那么很有可能在打包为exe文件之后，就会发现websocket服务无法启动。

网上一种方法是构建一个子进程，自动执行 'node server.js'代码如下：

// 引入子进程
let exec = require('child_process').exec; 

// 创建子进程 开启node-websocket服务
exec('node ./server.js', function (error, stdout, stderr) {
        if (error) {
          console.log(error.stack);
          console.log('Error code: ' + error.code);
          return;
        }
        console.log('使用exec方法输出: ' + stdout);
        console.log(`stderr: ${stderr}`);
        console.log(process.pid)
    });

但是，非常遗憾。只能在dev环境使用，打包成exe文件之后，server.js应该是丢失了，不能执行，原因暂时没找到。

还有一种方法就是直接在backgrdound.js中直接引入server.js。代码很简单：

require('./server.js')

可以打包成exe文件，安装一下试一试。

npm run electron:build

最终证明方法能行。