electron主进程与渲染进程之间的交互--ipcMain-ipcRenderer

最新推荐文章于 2024-04-27 09:08:51 发布

zoepriselife316

最新推荐文章于 2024-04-27 09:08:51 发布

阅读量5.7k

点赞数 1

分类专栏： electron Demo 技术文章标签： electron进程通讯

本文链接：https://blog.csdn.net/zoepriselife316/article/details/87884206

版权

Demo 同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

技术

43 篇文章 0 订阅

订阅专栏

electron

18 篇文章 1 订阅

订阅专栏

要学习主进程与渲染进程之间的交互，需要了解进程是什么、这二者的关是什么？参考：https://electronjs.org/docs/glossary#术语表

进程：process
一个进程是计算机程序执行中的一个实例。 Electron 应用同时使用了 main(主进程) 和一个或者多个 rendere(渲染进程) 来运行多个程序。
在 Node.js 和 Electron 里面，每个运行的进程包含一个 process对象。这个对象作为一个全局的提供当前进程的相关信息和操作方法。作为一个全局变量，它在应用内能够不用 require() 来随时取到。

主进程 main process：
通常是名为main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。
每个 app 的主进程文件都定义在 package.json 中的 main 属性当中。这也是为什么 electron. 能够知道应该使用哪个文件来启动。

renderer process
渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行在不一样的进程。而且它们也能够被隐藏。
在通常的浏览器内，网页通常运行在一个沙盒的环境挡住并且不能够使用原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

异步通信
异步通信，在发送消息之后，不会阻止同一进程中程序的继续运行。此示例渲染进程发送异步消息 “ping” 到主进程, 然后主进程回答 “pong”。
在渲染进程中：

// 引入ipcRenderer
const ipcRenderer = require('electron').ipcRenderer
 
// 发送标识为asynchronous-message的消息'ping'
ipcRenderer.send('asynchronous-message', 'ping')
 
 
// 接收标识为asynchronous-reply的消息
ipcRenderer.on('asynchronous-reply', function (event, arg) {
   console.log(arg)
})

在主进程中：

// 接收来自标识为asynchronous-message的消息
ipcMain.on('asynchronous-message', function (event, arg) {
 
  // 返回标识为asynchronous-reply的消息'pong'
  event.sender.send('asynchronous-reply', 'pong')
})

同步通信
同步通信，程序在完成任务之前会阻止同一进程中的操作。
在渲染进程

// 引入ipcRenderer
const ipcRenderer = require('electron').ipcRenderer
 
// 发送同步消息，返回给变量replay，在等待主进程返回中，会阻止其他操作
const reply = ipcRenderer.sendSync('synchronous-message', 'ping')
console.log(reply)

在主进程：

// 引入ipcMain
const ipcMain = require('electron').ipcMain
 
// 接收标识为synchronous-message的消息，然后返回'pong'
ipcMain.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

主进程的文档
 渲染进程文档

同样也可以从主进程向渲染进程发送消息，使用的是 webContents.send方法，实例demo：

// 主进程.main.js 主进程向渲染进程发送ping事件，内容为hello world!
var window = null;
app.on('ready', function() {
window = new BrowserWindow({width: 800, height: 600});
window.loadURL('file://' + __dirname + '/index.html');
window.webContents.on('did-finish-load', function() {
window.webContents.send('ping', 'hello world!!');
});
});

<!-- index.html 渲染进程监听来自准成发过来的ping事件--> 
<html>
<body>
<script>
require('electron').ipcRenderer.on('ping', function(event, message) {
console.log(message); // Prints "hello world!!"
});
</script>
</body>
</html>

这是ipcMain和ipcRenderer的，还有一个remote的，后续学习后记录，这两个的进程是木有问题的。

zoepriselife316

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
10
评论
electron主进程与渲染进程之间的交互--ipcMain-ipcRenderer

要学习主进程与渲染进程之间的交互，需要了解进程是什么、这二者的关是什么？参考：https://electronjs.org/docs/glossary#术语表进程：process一个进程是计算机程序执行中的一个实例。 Electron 应用同时使用了 main(主进程) 和一个或者多个 rendere(渲染进程) 来运行多个程序。在 Node.js 和 Electron 里面，每个运行的...
复制链接

扫一扫

专栏目录