1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > electron 主进程和渲染进程的通信

electron 主进程和渲染进程的通信

时间:2019-02-23 02:04:12

相关推荐

electron 主进程和渲染进程的通信

主进程给渲染进程发送消息,得用到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 = "我是主进程,已经收到消息";});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。