усилの博客

Electron:渲染和主进程通信

2022/9/24 Electron

# 渲染进程主动给主进程发送消息，主进程接收并回复消息

  • ipcMain：主进程接收和发送消息
  • ipcRenderer：渲染进程接收和发送消息

分别加载渲染进程和主进程文件

ipcMain/ipcMain.js主进程

const createWindow = () => {    
    require('./ipcMain/ipcMain');  
}
1
2
3

ipcRenderer/ipcRenderer.js 渲染进程

<html>
    <head></head>
    <script src="./ipcRenderer/ipcRenderer.js"></script>
</html>
1
2
3
4

场景一：渲染进程给主进程发送异步消息

<button id="sendMsg">渲染进程执行主进程里面的方法 （异步）</button>
1
// ipcRenderer.js
const { ipcRenderer } = require('electron');

var sendMsgDom = document.querySelector("#sendMsg");

sendMsgDom.onclick = () => {
   //渲染进程给主进程发送消息
   ipcRenderer.send("sendMsg", {name: "张三", age: 20});
}
1
2
3
4
5
6
7
8
9
// ipcMain.js
const { ipcMain } = require('electron');
//接收渲染进程的通知
ipcMain.on("sendMsg",(e,data) => {
    // 数据
    console.log(data); // 输出： {name: "张三", age: 20}
    // 事件对象
    console.log(e);
})
1
2
3
4
5
6
7
8
9

场景二：渲染进程给主进程发送异步消息，主进程接收到异步消息以后通知渲染进程

 <button id="sendMsgReplay">渲染进程执行主进程里面的方法，主进程给渲染进程反馈处理结果 （异步）</button>
1
// ipcRenderer.js
const { ipcRenderer } = require('electron');

var sendMsgReplayDom = document.querySelector("#sendMsgReplay"); 

//渲染进程给主进程发送消息
sendMsgReplayDom.onclick=()=>{        
    ipcRenderer.send("sendMsgReplay","渲染进程发送消息");
 }

//监听主进程的回复的消息
 ipcRenderer.on("replayRenderer",(e,data) => {
    console.log(data) // 输出： {state: "接收到消息了"}
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ipcMain.js
const { ipcMain } = require('electron');

//主进程接收到异步消息以后通知渲染进程
ipcMain.on("sendMsgReplay",(e,data) => {
    console.log(data);   // 输出：渲染进程发送消息
    // 给渲染进程发送消息
    e.sender.send("replayRenderer", {state: "接收到消息了"}) 
})
1
2
3
4
5
6
7
8
9

场景三：渲染进程给主进程发送同步消息

<button id="sendMsgSync">渲染进程和主进程通信 （同步）</button>
1
// ipcRenderer.js
const { ipcRenderer } = require('electron');

var sendMsgReplaySyncDom = document.querySelector("#sendMsgSync");  

//同步发送消息
sendMsgReplaySyncDom.onclick = () => {        
    var replay= ipcRenderer.sendSync("sendMsgReplaySync","渲染进程发送同步消息");
    console.log(replay);// 输出：我是主进程 已经收到了你的消息
 }
1
2
3
4
5
6
7
8
9
10
11
// ipcMain.js
const { ipcMain } = require('electron');

//接收同步消息
ipcMain.on("sendMsgReplaySync",(e,data) => {
    console.log(data);   // 输出：渲染进程发送同步消息
    e.returnValue = "我是主进程 已经收到了你的消息"    
})
1
2
3
4
5
6
7
8

# 主进程主动给渲染进程发送消息，渲染进程接收

具体看： 05.electron-(自定义菜单)