Electron中經過ipcMain和ipcRender實現主進程和渲染進程之間的相互通訊

用HTML和CSS和JS構建跨平臺桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試後，那麼Electron怎樣實現主進程與渲染進程之間的通訊。

實現

ipcMain

從主進程到呈現程序進程異步通訊。

ipcMain模塊是EventEmitter類的一個實例。在主進程中使用時，它處理從渲染器進程（網頁）發送的異步和同步消息。從渲染器發送的消息將發送到此模塊。

ipcRenderer

從呈現程序進程到主進程異步通訊。

ipcRenderer模塊是EventEmitter類的一個實例。它提供了一些方法，所以您能夠將渲染進程（網頁）中的同步和異步消息發送到主進程。您還能夠收到主流程的回覆。

渲染進程向主進程通訊，主進程收到數據並回應，渲染進程接收回應

打開主進程main.js,首先引入ipcMain

• 
  

const {app, BrowserWindow,ipcMain} = require('electron')

而後經過ipcMain.on註冊事件

• 
  
• 
  
• 
  
• 
  

ipcMain.on("send-message-to-main",(event,args)=>{  console.log("主進程接受到的數據是:",args);  event.reply("send-message-to-renderer","這是來自主進程的問候");})

第一個參數是事件名，本身定義。

而後經過args接收渲染進程傳遞的參數。

經過event.reply迴應一個事件和數據給渲染進程。

而後打開渲染進程renderer.js,引入ipcRenderer

• 
  

const {ipcRenderer} = require("electron");

而後在index.html中新建一個button並設置一個id

• 
  
• 
  
• 
  

<div>  <button id="sendToMain">發送信息給主進程</button></div>

而後在renderer.js中經過id獲取button並設置點擊事件

• 
  
• 
  

var btnSendToMain=document.getElementById('sendToMain');btnSendToMain.onclick = SendToMain;

在點擊事件中經過ipcRender.sender向主進程發送消息

• 
  
• 
  
• 
  
• 
  

function SendToMain(){  ipcRenderer.send("send-message-to-main","這是來自渲染進程的數據：公衆號：霸道的程序猿");}

這裏發送數據時的第一個參數要與上面主進程的on裏面的第一個參數同樣。

而後在renderer.js中經過ipcRenderer.on接收主進程的響應的事件和數據。

• 
  
• 
  
• 
  

ipcRenderer.on("send-message-to-renderer",(event,args)=>{  console.log("渲染進程收到的數據:",args);})

其中第一個參數要與上面主進程reply裏面的參數同樣。

而後調試運行項目，打開調試頁面。點擊按鈕

此時打查看主進程的控制檯輸出

 

主進程主動和渲染進程通訊

打開主進程main.js,設置一個5秒的延遲，而後經過mainWindow去實現

• 
  
• 
  
• 
  

  setTimeout(()=>{    mainWindow.webContents.send("send-message-to-renderer","我是主進程，主動和你通訊");  },5000);

這裏的第一個參數send-message-to-renderer要與渲染進程中

• 
  
• 
  
• 
  

ipcRenderer.on("send-message-to-renderer",(event,args)=>{  console.log("渲染進程收到的數據:",args);})

所綁定的事件名稱相對應。

調試運行項目打開調試頁面，等待5秒。