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怎樣實現主進程與渲染進程之間的通信。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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秒。