主进程给渲染进程发送消息,得用到ipcMain和ipcRenderer,流程和vue的父子通信很像
1,渲染进程给主进程通信(异步)
html里面定义一个按钮,并加载渲染进程
<button id="sendMsg">渲染进程执行主进程里面的方法(异步)</button><script src="./ipcRenderer/ipcRenderer.js"></script>
渲染进程被加载,先获取按钮,然后定义一个点击事件,触发ipcRenderer.send发送消息给主进程
const { ipcRenderer } = require("electron");window.onload = () => {var sendMsgDom = document.querySelector("#sendMsg");sendMsgDom.onclick = () => {//给主进程发送消息,执行主进程里面的方法ipcRenderer.send("sendMsg", "this is Renderer");};}
主进程使用ipcMain.on进行监听,触发后打印this is Renderer
const { ipcMain } = require("electron");//接收渲染进程的通知ipcMain.on("sendMsg", (e, data) => {console.log(data);});
2,主进程给渲染进程通信(异步)
上面主进程已经接收到了渲染进程的消息,那么我们也要给渲染进程回个消息,说我们收到了
同样的,我们在主进程使用e.sender.send发送一个消息
const { ipcMain } = require("electron");//接收渲染进程的通知ipcMain.on("sendMsg", (e, data) => {console.log(data);e.sender.send("replayRenderer", "我收到了");});
在渲染进程中,我们接收一下,添加如下代码
//监听主进程的广播ipcRenderer.on("replayRenderer", (e, data) => {console.log(data);});
这时,我们就完成了主进程和渲染进程的相互通信
3,主进程和渲染进程通信(同步)
如果不想这么麻烦,那我们也可以使用同步通信
在渲染进程中,我们直接定义一个sendSync,可以直接在发送后返回一个主进程的回复,我们使用replay接收这个回复,并直接打印
const { ipcRenderer } = require("electron");var sendMsg = document.querySelector("#sendMsg");sendMsgSync.onclick = () => {let replay = ipcRenderer.sendSync("sendMsg", "this is Renderer3");console.log(replay);};
主进程代码中,我们使用e.returnValue进行直接回复,如果你想看看渲染进程发过来的消息,也可以打印data
ipcMain.on("sendMsg", (e, data) => {e.returnValue = "我是主进程,已经收到消息";});