当前位置： 首页 > news >正文

electron之进程间通信

news 2025/9/17 2:59:07

Electron进程间通信

使用electron编写程序时经常遇到下面这种场景：
当用户点击一个按钮时，需要将页面输入的信息保存到本地电脑上；
或者是点击菜单时，需要页面窗口做出响应。
用户点击的按钮和窗口展示的内容是运行在渲染进程中，而保存的操作和点击菜单是运行在主进程中的，渲染进程和主进程无法直接通信，
这是就需要使用到进程间通信（IPC）

为了实现这种通信，Electron提供了 ipcMain 和 ipcRenderer 模块。

渲染进程到主进程的通信

下面是一个简单的例子，介绍在页面输入文本信息，然后点击按钮将文本信息保存到本地电脑，然后点击查询，读取本地电脑文件并将读取的文本展示出来。

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const {join} = require("path");
const fs = require("fs");// 应用创建窗口
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: join(__dirname, 'preload.js')}})win.loadFile('index.html')win.webContents.openDevTools();
}
app.whenReady().then(() => {// 处理保存文本的事件ipcMain.handle('save-text', async (event, text) => {const filePath = `./output.txt`;fs.writeFileSync(filePath, text);});// 处理查询文本的事件ipcMain.handle('query-text', async (event) => {const filePath = `./output.txt`;return fs.readFileSync(filePath, {encoding: 'utf-8'});});createWindow()
})

preload.js

const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('myAPI', {saveText: (text) => ipcRenderer.invoke('save-text', text),queryText: () => ipcRenderer.invoke('query-text'),
})

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><label>输入文本信息:<input id="input-name" type="text"></label><input id="save" type="button" value="保存"><div><input id="query" type="button" value="读取文本信息"><div id="text"></div></div><script>const saveButton = document.getElementById('save')saveButton.addEventListener('click', () => {const inputName = document.getElementById('input-name')window.myAPI.saveText(inputName.value)})const queryButton = document.getElementById('query')queryButton.addEventListener('click', async () => {const text = document.getElementById('text')text.innerHTML = await window.myAPI.queryText()})</script>
</body>
</html>

运行结果如下：
输入hello world!,点击保存，然后点击读取按钮，就会把保存的文件内容展示出来。
在这里插入图片描述

这个是渲染进程到主进程的通信，下面介绍一下主进程到渲染进程的通信。

主进程到渲染进程的通信

我们在窗口添加一个设置菜单和两个子菜单+1，-1，
点击子菜单时页面数字做出相应反馈。
main.js

const { app, BrowserWindow, Menu } = require('electron')
const {join} = require("path");// 应用创建窗口
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: join(__dirname, 'preload.js')}})// 设置窗口菜单const menu = Menu.buildFromTemplate([{label: '设置',submenu: [{// 点击+1按钮时触发update-counter事件并传递参数1click: () => win.webContents.send('update-counter', 1),label: '+1'},{// 点击-1按钮时触发update-counter事件并传递参数-1click: () => win.webContents.send('update-counter', -1),label: '-1'}]}])Menu.setApplicationMenu(menu)win.loadFile('index.html')win.webContents.openDevTools();
}
app.whenReady().then(() => {createWindow()
})

preload.js


const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('myAPI', {// 渲染进程监听update-counter事件handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div>count:<span id="count">0</span></div><script>const count = document.getElementById('count')// 传入监听update-counter事件的回调函数window.myAPI.handleCounter((event, value) => {const num = Number(count.innerText)count.innerText = num + value})</script>
</body>
</html>

运行结果如下
在这里插入图片描述

以上就是electron的进程间通信，欢迎大家在评论区留言指正，相互学习

相关文章：

electron之进程间通信

Electron进程间通信 使用electron编写程序时经常遇到下面这种场景&#xff1a; 当用户点击一个按钮时&#xff0c;需要将页面输入的信息保存到本地电脑上&#xff1b; 或者是点击菜单时&#xff0c;需要页面窗口做出响应。 用户点击的按钮和窗口展示的内容是运行在渲染进程中&…...

编程日记 2023/10/13 4:28:48

Linux网络编程：UDP协议和TCP协议

目录 一. 对于端口号的理解 1.1 网络通信五元组 1.2 端口号的划分策略 二. 网络通信中常用的指令 2.1 netstat指令 2.2 pidof指令 三. udp协议 3.1 udp的概念及特点 3.2 udp协议端格式 3.3 对于面向数据报及应用层发送与读取数据的理解 四. tcp协议的概念及特点 五.…...

编程日记 2023/10/13 4:27:47

【SCS-CN】SCS-CN模型中CN值的确定

目录 一、说明二、SWAT三、HEC-HMS四、CN值转换公式五、确定CN25.1 ArcSWAT 2009用户指南5.2 SWAT plus Document5.3 National Engineering Handbook5.4 HEC-HMS水文建模系统原理方法应用5.5 Technical Release 55 (TR-55) 六、确定水文土壤单元&#xff08;HSG&#xff09;6.1…...

编程日记 2023/10/13 4:26:46

【C++】继承 ① ( 面向对象特点 | 类之间的关系 | 单继承与多继承 | 继承关系特性 )

文章目录 一、面向对象相关概念1、面向对象特点2、类之间的关系 二、继承概念1、名词说明2、单继承与多继承单继承多继承 3、继承关系特性 一、面向对象相关概念 1、面向对象特点 面向对象的 4 4 4 大特点 : 抽象 : 只关注对象的功能和行为 , 而不过问实现的具体细节 ;封装 :…...

编程日记 2023/10/13 4:25:45

虹科方案 | 虹科ATTO加速虚拟存储管理

虹科方案 | 虹科ATTO加速虚拟存储管理 文章来源&#xff1a;虹科网络安全 点此阅读原文&#xff1a;https://mp.weixin.qq.com/s/SYruurSQSodUvyhZBr-BMQ 1 方案背景 企业越来越多地转向服务器虚拟化&#xff0c;以有效利用硬件资源、降低运营成本&#xff0c;并为维护和灾难恢…...

编程日记 2023/10/13 4:24:44

Docker项目部署lnmp+wordpress

一.项目环境 公司在实际的生产环境中&#xff0c;需要使用Docker 技术在一台主机上创建LNMP服务并运行Wordpress网站平台。然后对此服务进行相关的性能调优和管理工作。 1.1 环境描述 主机 操作系统 IP地址 主要软件 Docker C…...

编程日记 2023/10/13 4:22:42

leetcode 121. 买卖股票的最佳时机、122. 买卖股票的最佳时机 II

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…...

编程日记 2023/10/13 4:20:38

系统架构设计：5 论软件的可靠性设计

目录 一 可靠性设计 1 可靠性 2 影响可靠性的因素 3可靠性设计技术 （1）避错技术...

编程日记 2023/10/13 4:19:33

03 独立看门狗 hal库 stm32cubemx

1.设置配置参数 > 2.初始化 IWDG_HandleTypeDef hiwdg;/* IWDG init function */ void MX_IWDG_Init(void) //Tout((42^prer) rlr) /40 // IWDG_PRESCALER_8 (42^prer) 8/40 *5*2000 64/40 *4095 ---6s {/* USER CODE BEGIN IWDG_Init 0 *//* USER CODE END IWDG_…...

编程日记 2023/10/13 4:17:27

大数据学习(6)-hive底层原理Mapreduce

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博>主哦&#x…...

编程日记 2023/10/13 4:16:26

SQLite：TIMESTAMP类型使用

SQLite&#xff1a;CURRENT_TIMESTAMP是以GMT时区为准&#xff0c;而不是本地机器的时区 在本文中&#xff0c;我们将介绍SQLite数据库中的一个特性&#xff1a;CURRENT_TIMESTAMP。在SQLite中&#xff0c;我们可以使用CURRENT_TIMESTAMP函数来获取当前时间戳。然而&#xff0…...

编程日记 2023/10/13 4:15:25

迅镭激光GI系列高功率激光切割机成功中标覆铜板龙头企业HZ公司

新材料被称为“发明之母”和“产业粮食”&#xff0c;是现代科技发展的基础&#xff0c;和信息技术、生物技术一起并称为最重要和最具发展潜力的三大领域&#xff0c;它是我国先进制造业发展的支撑和保障&#xff0c;对推动技术创新、促进制造业优化升级、保障国家安全等具有重…...

编程日记 2023/10/13 4:14:24

基于SSM的网络安全宣传网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/10/13 4:13:22

k8s修改集群IP--重置集群

原来IP地址 192.168.10.138 k8s-master 192.168.10.139 k8s-node1 192.168.10.140 k8s-node2 新IP地址 192.168.10.148 k8s-master 192.168.10.149 k8s-node1 192.168.10.150 k8s-node2 cp -Rf /etc/kubernetes/ /etc/kubernetes-bak pki 证书目录保留下来&#xff1a; rm -rf …...

编程日记 2023/10/13 4:11:19

记录：R语言生成热图（非相关性）

今天解决了一个困扰了我很久的问题&#xff0c;就是如何绘制不添加相关性的热图。一般绘制热图是使用corrplot包画相关性图&#xff0c;但是这样有一个前提&#xff0c;就是输入的数据集必须进行相关性分析。那么如果我不需要进行相关性分析&#xff0c;而是直接绘制能够反应数…...

编程日记 2023/10/13 4:09:16

第55篇-某did滑块流程分析-滑动验证码【2023-10-12】

声明：该专栏涉及的所有案例均为学习使用，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！如有侵权，请私信联系本人删帖！ 文章目录 一、前言二、滑块流程分析三、参数分析1.verifyParam参数分析2.c参数分析四、captchaToken激活五、流程整理一、前言 我…...

编程日记 2023/10/13 4:07:13

正点原子嵌入式linux驱动开发——Linux内核顶层Makefile详解

之前的几篇学习笔记重点讲解了如何移植uboot到STM32MP157开发板上&#xff0c;从本章就开始学习如何移植Linux内核。 同uboot一样&#xff0c;在具体移植之前&#xff0c;先来学习一下Linux内核的顶层Makefile文件&#xff0c;因为顶层 Makefile控制着Linux内核的编译流程。 L…...

编程日记 2023/10/13 4:03:08

C++ 笔记索引

C 参考手册访问地址 环境 VS coda 配置 VS coda C、python运行与Dbug配置 C、python、VS code插件安装与SSH使用 (不推荐) w10系统一般只用vs w10系统 如何使用 C、cmake、opencv、 语言基础 C main函数 测试例子 C常用基本类型、数组、复制内存 memcpy C if、else、switc…...

编程日记 2023/10/13 4:02:05

Android攻城狮学鸿蒙-配置

1、config.json配置 鸿蒙中的config.json应该类似于Android开发中Manifest.xml&#xff0c;可以进行页面的配置。根据顺序&#xff0c;会识别启动应用的时候&#xff0c;要打开哪个界面。 2、 Ability详解&#xff0c;以及与Android的Activity对比。 他人的学习文章连接&…...

编程日记 2023/10/13 4:01:04

SpringBoot 接口 字节数组直接显示为图片

源码&#xff1a; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; import org.springframework.web.bind.annotation.RequestMapping;/*** 获取二维码图像* 二维码支付** param price 金额* return 二维码图像* throws IOException IOException*/ Requ…...

编程日记 2023/10/13 4:00:04

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/9/16 1:45:45

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/7/22 6:12:57

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/8/18 10:51:07

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/9/2 17:48:53

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/8/6 9:00:09

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2025/9/14 9:57:43