使用electron进行原生应用的打包(2)---主进程与渲染进程之间的通信
上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式.
首先解释一个概念: electron打包的应用包含两个部分
- electron的环境(node),也就是主进程.
- web渲染环境,副进程.
这两个环境之间是相互隔离的,无法直接进行数据通信,所以有了这篇文章.
三个角色:
- ipcRender
- ipcMain
- webContents
ipcRenderer用于渲染进程
- ipcRenderer.on(channel, listener) --> channel为事件频道,字符串.listener为触发回调函数,用于响应webContent.send()
- ipcRenderer.send(channel, data) --> 概念同上,用于向ipcMain发送异步信息.
- ipcRenderer.sendSync(channel, data) --> 用于向ipcMain发送同步信息,此时会阻塞掉渲染进程,除非必须,谨慎使用.
ipcMain用于主进程,响应从渲染进程中发送的消息
- ipcMain.on(channel,listener) --> 响应从ipcRender中相同channel.
- ipcMain.once(channel,listener) --> 同上,但是只触发一次,触发后自动取消绑定
- ipcMain.removeListener(channel,listener) --> 移除时事件,listener一定要为函数引用,不能是匿名函数或箭头函数,否则不能解绑
- ipcMain.removeAllListener([channel]) --> 移除channel上的所有事件
- event.sender.send(channel, data) --> 这是唯一ipcMain可以异步返回消息的方法,通过event参数向渲染进程发送消息.(与ipcRenderer.send对应)
- event.returnValue(channel,data) --> ipcMain同步返回消息(与ipcRenderer.sendSync对应)
- data是消息发送者携带的data
listener (event, data)
最后一个是webContent
不知道细心的读者有没有发现,ipcMain本身是无法直接发送事件的,只能通过响应事件回调的event来发送,那如果我们想先让主进程发送消息呢?那就才用这个办法.这个webcontent是在BrowserWIndow实例中的方法
- webContent.send(channel,data) --> 主进程向渲染进程发送消息.
注意,这些方法全部需要在主进程已经创建了BrowserWindow之后才有效,下面来一个例子:
在关闭客户端之前需要判断已修改的文件已保存.下图为流程图:
首先是渲染端代码:
const electron = require('electron') // 引入electron
const ipcRenderer = electron.ipcRenderer; // 获取ipcRender渲染进程
let to_close = false // 定义允许关闭变量 ipcRenderer.on('save_complete', () => to_close = true) // 如果保存完成则设置为可以关闭 ipcRenderer.on('not_save', () => to_close = false) // 否则设置为不可关闭 // 全局的点击关闭按钮后调用
window.onbeforeunload = (e) => {
!to_close && (e.returnValue = false) // 如果不允许关闭则return false阻止关闭
ipcRenderer.send('need_close') // 发送需要进行关闭信息
}
其次是主进程代码
const electron = require('electron')
const app = electron.app
const dialog = electron.dialog // 创建对话框
const BrowserWindow = electron.BrowserWindow
const ipcMain = electron.ipcMain let need_close = false // 是否需要关闭(如果只是点击保存则不需要关闭) ipcMain.on('need_close', () => need_close = true) // 如果需要,则设为true // 当点击保存时
mainWindow.webContents.session.on('will-download', (event, downloadItem,webContents) => {
// 阻止默认保存行为(点击a标签)
event.returnValue = false;
// 显示保存对话框,默认扩展为.txt
const fileName = dialog.showSaveDialog({
defaultPath: '新的作品',
filters: [
{ name: 'txt', extensions: ['txt'] }],
});
// 如果没有正常保存
if (typeof fileName == 'undefined') {
// 不能退出
need_close = false
// 向渲染端发送没有保存消息
webContents.send('not_save')
// 取消下载
return downloadItem.cancel();
}
// 正常下载
downloadItem.setSavePath(fileName);
// 当下载项结束时
downloadItem.on('done', (event, state) => {
// 有三种state completed, cancelled, interrupted,此处只监听完成时
if (state === 'completed') {
// 发送完成保存
webContents.send('save_complete')
// 如果需要关闭的话则退出app
need_close && app.quit();
}
});
})
这是很简单的展示了如何在渲染端以及服务端进行消息传递.可以基本满足通信需求.
使用electron进行原生应用的打包(2)---主进程与渲染进程之间的通信的更多相关文章
- 研究Electron主进程、渲染进程、webview之间的通讯
背景 由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的 ...
- 使用electron进行原生应用的打包
因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土. 今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需 ...
- Electron:主进程和渲染进程
- electron 主进程,和渲染进程的通信
ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进 ...
- 【Electron】在 WSL2 中 打包 electron Linux 版本
[Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://do ...
- Electron结合React,在渲染进程中使用 node 模块
Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...
- Window10 Electron 开发环境搭建及打包exe程序
1.安装 Electron 首先要安装Node.js (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安 ...
- Electron:将前端应用打包成桌面应用
首先戳我下载安装对应版本的node.js. 安装完成后,打开命令行输入node -v以及npm -v查看对应版本.能够正常显示说明安装成功. 写一个最简单的hello world的nodejs应用.n ...
- Electron – 基础学习(3): 项目打包成exe桌面应用 之electron-builder
前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系 ...
随机推荐
- Spring Boot(三):logback打印日志
springboot对logback的支持是非常好的,不需要任何配置,只需要在resource下加logback.xml就可以实现功能直接贴代码: <?xml version="1.0 ...
- NGUI中获取鼠标在控件内部坐标
在UIWidget 中添加以下函数.获得的坐标系是以右上角为原点坐标,x轴向左,一轴向下. public Vector2 GetTouchPoint() { Vector3 p0 = cachedT ...
- 新型I/O架构引领存储之变(二)
新型I/O架构引领存储之变(二) 作者:廖恒 众所周知,支持存储及网络I/O服务的接口协议有很多种.比方,以太网及Infiniband接口都支持採用iSCSI协议来实现存储业务,它们也因而成为了ser ...
- iOS开发多线程篇 08 —GCD的常见用法
iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...
- Java 堆内存
堆内存 Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象. 在 Java 中,堆被划分成两个不同的区域:新生代 ( Young ).老年代 ( Old ).新生代 ...
- superobject 序列数据集
unit uDBJson; interface {$HINTS OFF} uses SysUtils, Classes, Variants, DB, DBClient, SuperObject; ty ...
- CCNA2.0笔记_IPv4
ipv4对于OSI是个网络层协议,对于TCP/IP是个Internet层协议 ipv4是一个无连接/尽力传输协议 Ipv4定义了两大类广播地址 1,全向广播:255.255.255.255 2,定向广 ...
- ef6 code first with Oracle 试玩记录
对于oracle 使用code first 这边文章不错: http://www.cnblogs.com/wlflovenet/p/4187455.html 补充一下: 文章中提到machine.co ...
- java文件对话框操作
完毕文件打开与保存 FileDialog : FileDialog fd = new FileDialog(this); fd.setVisible(true);//或fd.show(); ...
- redisson笔记
简介 Redisson - 是一个高级的分布式协调Redis客服端,能帮助用户在分布式环境中轻松实现一些Java的对象 (Bloom filter, BitSet, Set, SetMultimap, ...