上一篇讲了使用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上的所有事件
  • listener (event, data)

    • event.sender.send(channel, data) --> 这是唯一ipcMain可以异步返回消息的方法,通过event参数向渲染进程发送消息.(与ipcRenderer.send对应)
    • event.returnValue(channel,data) --> ipcMain同步返回消息(与ipcRenderer.sendSync对应)
    • data是消息发送者携带的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)---主进程与渲染进程之间的通信的更多相关文章

  1. 研究Electron主进程、渲染进程、webview之间的通讯

    背景 由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的 ...

  2. 使用electron进行原生应用的打包

    因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土. 今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需 ...

  3. Electron:主进程和渲染进程

  4. electron 主进程,和渲染进程的通信

    ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进 ...

  5. 【Electron】在 WSL2 中 打包 electron Linux 版本

    [Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://do ...

  6. Electron结合React,在渲染进程中使用 node 模块

    Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...

  7. Window10 Electron 开发环境搭建及打包exe程序

    1.安装 Electron 首先要安装Node.js     (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安 ...

  8. Electron:将前端应用打包成桌面应用

    首先戳我下载安装对应版本的node.js. 安装完成后,打开命令行输入node -v以及npm -v查看对应版本.能够正常显示说明安装成功. 写一个最简单的hello world的nodejs应用.n ...

  9. Electron – 基础学习(3): 项目打包成exe桌面应用 之electron-builder

    前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系 ...

随机推荐

  1. Spring Boot(三):logback打印日志

    springboot对logback的支持是非常好的,不需要任何配置,只需要在resource下加logback.xml就可以实现功能直接贴代码: <?xml version="1.0 ...

  2. NGUI中获取鼠标在控件内部坐标

    在UIWidget 中添加以下函数.获得的坐标系是以右上角为原点坐标,x轴向左,一轴向下. public Vector2 GetTouchPoint() { Vector3 p0 =  cachedT ...

  3. 新型I/O架构引领存储之变(二)

    新型I/O架构引领存储之变(二) 作者:廖恒 众所周知,支持存储及网络I/O服务的接口协议有很多种.比方,以太网及Infiniband接口都支持採用iSCSI协议来实现存储业务,它们也因而成为了ser ...

  4. iOS开发多线程篇 08 —GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  5. Java 堆内存

    堆内存 Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象. 在 Java 中,堆被划分成两个不同的区域:新生代 ( Young ).老年代 ( Old ).新生代 ...

  6. superobject 序列数据集

    unit uDBJson; interface {$HINTS OFF} uses SysUtils, Classes, Variants, DB, DBClient, SuperObject; ty ...

  7. CCNA2.0笔记_IPv4

    ipv4对于OSI是个网络层协议,对于TCP/IP是个Internet层协议 ipv4是一个无连接/尽力传输协议 Ipv4定义了两大类广播地址 1,全向广播:255.255.255.255 2,定向广 ...

  8. ef6 code first with Oracle 试玩记录

    对于oracle 使用code first 这边文章不错: http://www.cnblogs.com/wlflovenet/p/4187455.html 补充一下: 文章中提到machine.co ...

  9. java文件对话框操作

        完毕文件打开与保存   FileDialog : FileDialog fd = new FileDialog(this); fd.setVisible(true);//或fd.show(); ...

  10. redisson笔记

    简介 Redisson - 是一个高级的分布式协调Redis客服端,能帮助用户在分布式环境中轻松实现一些Java的对象 (Bloom filter, BitSet, Set, SetMultimap, ...