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寫點有意思的桌面應用吧。