electron-vue小试身手

匿名 (未验证) 提交于 2019-12-02 23:52:01

最近一个项目(vue)需求是用硬件来触发web端页面显示以及效果的切换,客户的硬件设备只支持用tcp协议通讯,而我们的前端呢是用不了tcp的,众所周知在浏览器端,我们只能用http/https协议(ajax)和websocket协议来通讯,前端页面开发完成之后,我用node起了一个websocket实现了项目需求,但是终归还是要用tcp的啊。这时候就得用之前同事说过的electron来构建整个项目了(之前看了一个demo把vue打包后的静态文件打包成桌面程序)。但是,怎么在electron里面用tcp把数据推给vue页面呢?

同事也是非常热心,百度了好些资料,我自己也百度了好多,在electron里面起一个tcp倒是简单,demo奉上:

 //tcp服务端 var net = require('net'); var server = net.createServer(function(connection) {         connection.on('end', function() {       //console.log('客户端关闭连接');    });    connection.on('data',function(data){     //console.log('服务端:收到客户端发送数据为',data)    }) }); server.listen(9002, function() {    console.log('server is listening'); });

这个net模块是node提供的,自然也就方便地起了一个tcp服务,然后用测试工具来发送信息:

electron也是理所当然地收到了(上面tcp监听的是9002端口),但是怎么发给vue页面呢,下面奉上项目结构:

在index.js里面收到了通过tcp协议发来的消息,要推送倒Main.vuue页面,自然想到在该页面起一个事件监听器,当时想到的是用单例模式(vue的中央事件管理器)来处理,但是失败了。

后来在同事的帮助以及指导下,看到了类似如下截图使用的electron通讯方法:

然后就一直在这个ipcMain和ipcRenderer通讯上磨了好长时间,我们的需求是主进程给渲染进程发消息,但是!这个ipcMain居然只有事件监听,而且在主进程里面拿不到ipcRenderer这个对象(想着用这个在tcp里面给页面里面的ipcRenderer发消息)

期间还看了一篇博客(写得有点乱,自己封装了一些东西,但是博客里面写得不明不白,直接让我更加糊涂),多方查找无果之后,抛弃了上述的所有方法,乖乖地去看官方文档!!!

然后发现一个叫mainWindow.webContents的东西,这玩意儿就能给渲染进程(页面)发消息,后来才发现上述ipcMain的监听事件回调函数里面的event.sender对象,其实就是这个mainWindow.webContents;

so,主进程给渲染进程发消息只能通过mainWindow.webContents这个对象的send方法!!!跟ipcMain没有半毛钱关系!!!

所以,最终:

主进程:

渲染进程(页面):

至此,在electron内使用tcp实现主进程和渲染进程之间通讯已经告一段落,但是项目要打包成桌面应用啊,这块有几个坑需要注意一下:

nodeModules: path.resolve(__dirname, '../node_modules'),

"build-win": "node .electron-vue/build.js && electron-builder --win --x64", "build-mac": "node .electron-vue/build.js && electron-builder --mac --x64",

谨以此记录首次electron开发遇到的诸多问题,好在最终还是解决遇到的所有问题,以后有空再用electron写点有意思的桌面应用吧。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!