electron-vue小试身手

最近一个项目(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实现主进程和渲染进程之间通信已经告一段落，可是项目要打包成桌面应用啊，这块有几个坑须要注意一下：

1⃣️安装依赖不要使用淘宝镜像！！！使用淘宝镜像会疯狂报错！！！直接npm install，速度慢就速度吧(虽然不能用淘宝镜像，可是yarn貌似能够)；

2⃣️用electron脚手架构建的项目，安装额外包的话，该依赖可能不会自动写到package.json文件里面去，因此项目npm install的话，没有自动写到配置文件的依赖不会下载，项目运行的话，不会报错，可是会一直显示一个文件目录的页面，我的建议，添加依赖以后，检查一下该依赖有没有自动写到配置文件里面去，没有的话手动添加一下，以避免到时候除了问题半天查不出来；

3⃣️.electron-vue/webpack.renderer.config.js，打包成桌面应用以前，该文件122行的判断改为以下代码段：

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

4⃣️最后贡献两条electron-vue下桌面应用的打包脚本(win、mac平台)：

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

 

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