使用Electron开发出来的桌面应用都是多进程的,其中包含了一个主进程(Main)和至少一个渲染进程(Renderer)。

主进程控制整个应用的生命周期,通过electron中的一些模块与GUI交互,同时控制每一个渲染进程。

渲染进程会在BrowserWindow对象创建出的窗口中渲染出Web页面,每个渲染页面都运行在独立的进程中。

主进程与渲染进程之间通信

ipc模块 + window.webContents

ipc模块包含ipcMain和 ipcRenderer两个模块,其中ipcMain在主进程中使用,ipcRenderer在渲染进程中使用,在使用之前,要使用require引入对应的模块。

ipc模块中的方法:

  • ipcMain.on(msg, () => {}):监听渲染进程发送的msg消息,并做出响应。
  • ipcMain.once(msg, () => {}):监听渲染进程发送的msg消息,并做出响应,但是监听到一次msg事件后自动移除这个监听器。
  • ipcRenderer.on(msg, () => {}):监听主进程发送的msg消息,并做出响应。
  • ipcRenderer.once(msg, () => {}):监听主进程发送的msg消息,并做出响应,但是监听到一次msg事件后自动移除这个监听器。
  • ipcRenderer.send(msg, data):监听渲染进程向主进程发送msg异步消息,并携带参数data。
  • ipcRenderer.sendSync(msg, data):监听渲染进程向主进程发送msg同步消息,并携带参数
  • ipcRenderer.sentTo(webContentId, msg, data):监听渲染进程向具有webContentId的窗口发送消息
  • ipcRenderer.sendToHost(msg, data):监听渲染进程向host页面上的 <webview> 元素发送消息

ipc模块还提供了删除指定监听器和删除所有监听器的方法:removeListener()、removeAllListener(),这两个方法在ipcMain和ipcRenderer这两个模块中的用法是一样的。

通过上面的几个监听器我们发现,单独使用ipc模块无法实现主进程主动向渲染进程发送消息。所以我一般把BrowserWindow实例中的webContents和ipc模块结合使用

一个主进程与渲染进程间通信的例子

// 在主进程中使用ipcMain
const { ipcMain, BrowserWindow } = require('electron');

window = new BrowserWindow({
    width: 800,
    height: 600
});

// 主进程主动向渲染进程发送消息
window.webContents.send('main webContents msg', data);

// 主进程接收渲染进程发送的消息,并通过回调函数做出响应
ipcMain.on('renderer ipc msg', (event, arg) => {
    // TODO something
})
// 在渲染进程中使用ipcRender
const ipcRender = require('electron');

// 渲染进程中使用ipcRenderer.on接收主进程消息,并通过回调函数做出相应
ipcRenderer.on('main webContents msg', (event, arg) => {
    // 在相应主进程事件时,通过ipcRenderer.send方法像主进程发送另一条消息
    ipcRenderer.send('renderer ipc msg', data);
})

ipcRenderer发送的同步消息和异步消息

在上面列举的几个方法中,其中ipcRenderer发送消息的方法分为发送同步消息的方法ipcRenderer.send和发送异步消息的方法ipcRenderer.sendSync。主程序在监听到这两种不同方法的消息时,可以通过不同的方式给渲染进程返回消息:

// 渲染进程

// 渲染进程发送异步消息
ipcRenderer.send('msg', data);

// 渲染进程发送同步消息。 发送同步消息,任务未完成时会阻止其他操作
var message = ipcRenderer.sendSync('sync msg', data);
ipcMain.on('msg', (event, arg) => {
    // 主进程监听到渲染进程发的异步消息后,通过event.sender.send()的方式进行响应,可以在渲染进程中使用ipcRenderer.on监听'return msg'消息
    event.sender.send('return msg', data)
})

ipcMain.on('sync msg', (event, arg) => {
    event.retuenValue = 'msg';
})

remote模块

在渲染进程中使用remote,可以调用主进程所提供的一些方法。(例如:dialog、menu等模块)

const { BrowserWindow } = require('electron').remote;

//通过remote模块,可以在渲染进程中调用BrowserWindow模块
let win = new BrowserWindow({ width: 800, height: 600});
win.loadURL('index.html');

渲染进程中使用remote模块返回的对象,都代表了主进程中的一个对象,一般称为远程对象。调用远程对象的方法时,实际上是在想主进程发送同步消息。

比如上面的代码中,BrowserWindow实例是通过remote模块返回的,所以渲染进程中的BrowserWindow和win都是远程对象。在执行new BrowserWindow({...})这段代码的时候,并没有在渲染进程中创建BrowserWindow实例的对象,而是在主进程中创建了BrowserWindow对象,并把这个对象返回到渲染进程中。

remote的方法和属性

  • remote.require(module):返回主进程中的对象
  • remote.getCurrentWindow():返回此网页所属的窗口
  • remote.getGlobal(name):返回主进程中name的全局变量
  • remote.process:返回主进程中的process对象

渲染进程之间通信

上面提到的通信方法,经过测试发现都无法在渲染进程之间直接通信,有时候我们开发中可以使用主进程作为中转进行渲染进程间的通信:

// renderer process A
const { ipcRenderer } = require('electron');
ipcRenderer.send('A send msg', data);
// main process
const { ipcMain, BrowserWindow } = require('electron');

let win = new BrowserWindow({...});

ipcMain.on('A send msg', (event ,arg) => {
    // TODO something
    win.webContents.send('main send msg', data);
})
const { ipcRenderer } = require('electron');
ipcRenderer.on('main send msg', (event, arg) => {
    // TODO something
})

除了上面这种需要main process中转的方式之外,还有一种方式能够实现渲染进程之间的直接通信:

// main process
// 两个窗口互相获取对方的窗口 id, 并发送给渲染进程
const { BrowserWindow} = require('electron');

let win1 = new BrowserWindow({...});
let win2 = new BrowserWindow({...});

win1.webContents.send('distributeIds',{
    win2Id : win2.id
});
win2.webContents.send('distributeIds',{
    win1Id : win1.id
});
// renderer process
const { remote } = require('electron').remote;

// fromId() 可以根据窗口id找到目标窗口
remote.BrowserWindow.fromId(win2Id).webContents.send('msg', data);

到此这篇关于Electron进程间通信的实现的文章就介绍到这了,更多相关Electron进程间通信内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Electron进程间通信的实现的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. android – 在不同的进程中运行服务有哪些优点和缺点?

    我想在我的App.so后台运行一个长期运行的服务我正在使用服务,但在服务中有标签名为android:process所以我的服务就像..题::所以我想知道在不同的流程中运行服务的优缺点.解决方法我的头顶……

  3. electron打包vue项目的方法 步骤

    本文主要介绍了electron打包vue项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 用electron打包vue项目中的报错问题及解决

    这篇文章主要介绍了用electron打包vue项目中的报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  5. Vue electron零基础使用教程

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

  6. 使用Electron构建React+Webpack桌面应用的方法

    本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Electron点击穿透不规则窗体的透明区域的实现

    本文主要介绍了Electron点击穿透不规则窗体的透明区域的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. vite + electron-builder 打包配置详解

    这篇文章主要为大家介绍了electron基于vite + electron-builder 打包配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  9. 关于node-bindings无法在Electron中使用的解决办法

    今天小编就为大家分享一篇关于关于node-bindings无法在Electron中使用的解决办法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  10. Electron集成React和Vue流程方法讲解

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Electron集成React和Vue的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部