最近一個項目(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寫點有意思的桌面應用吧。