Electron 进程通信

server/2024/10/4 20:21:39/

预加载（preload）脚本只能访问部分 Node.js API，但是主进程可以访问全部API。此时，需要使用进程通信。
比如，在preload.js中，不能访问__dirname，不能使用 Node 中的 fs 模块，但主进程（main.js ）是可以的，这时候就需要使用进程通信。也就是说：要让 preload.js 通知 main.js，去调用 Node.js API 实现功能。

Electron 进程通信：

  • IPC：全称是 InterProcess Communication ，即：进程间通信。
  • IPC连接不同进程：在 Electron 应用中，主进程和渲染进程各自有不同的职责和运行环境。IPC是它们之间进行交互和协同工作的关键机制。没有有效的 IPC，主进程和渲染进程将无法有效地沟通和协调，导致应用功能受限。
  • 调用原生 API 的唯一途径：IPC 是 Electron 中最为核心的内容。IPC 是从 UI（通常在渲染进程中）调用原生 API 的唯一方法。这意味着如果想要在 Electron 应用中实现诸如文件系统操作、与操作系统交互等功能，必须通过 IPC 让主进程执行这些操作，然后将结果返回给渲染进程进行展示或进一步处理。
  • Electron 提供了 ipcMain 和 ipcRenderer 模块用于主进程和渲染进程之间的通信。

    • ipcMain（主进程中使用，从主进程到渲染进程的异步通信。）：

      • 发送消息时，事件名称为channel ，即 通信通道。
      • 回复同步信息时，需要设置event.returnValue。
      • 可以使用event.reply(...)将异步消息发送回发送者。

    • ipcRenderer（渲染进程中使用，从渲染器进程到主进程的异步通信。）：

模式1：渲染器进程到主进程（单向）

  • 概述：要将单向 IPC 消息从渲染器进程发送到主进程，需要在渲染器进程中 ipcRenderer.send 发送消息，在主进程中使⽤ ipcMain.on 接收消息。

  • 常用于：从 Web 内容调用主进程 API。

  • ipcRenderer.send(channel,...args)

    • 用于从渲染进程向主进程发送消息。
    • channel：字符串，表示消息的通道名称。主进程可以通过监听这个特定的通道名称来接收来自渲染进程的消息。例如：可以定义一个名为 'custom-action' 的通道。
    • ...args：这是一个可变参数，可以传递任意数量的参数。这些参数可以是任何有效的 JavaScript 值，如字符串、数字、对象等。
    • 用于单向通信的 ipcRenderer.send API 也可用于双向通信。在 Electron 7 之前，官方推荐使用 ipcRenderer.send 进行异步双向通信。在 Electron 7 中，官方添加 ipcRenderer.invoke API，用于处理渲染器进程中双向 IPC。

  • ipcMain.on(channel, listener)

    • 在主进程中监听来自渲染进程的特定通道消息。
    • hannel：这是一个字符串，表示特定的通信通道名称。渲染进程使用相同的通道名称通过 ipcRenderer.send 或 ipcRenderer.invoke 向主进程发送消息。
    • listener：这是一个回调函数，当主进程接收到来自渲染进程通过指定通道发送的消息时，这个回调函数会被执行。
      • 回调函数通常接受两个参数：event 和 args。event 代表事件对象，可用于回复渲染进程等操作；args 是渲染进程发送的参数，可以是单个值或一组值，具体取决于渲染进程的发送方式。

示例：

实现需求：点击按钮后，在⽤户的 D 盘创建⼀个 hello.txt ⽂件，⽂件内容来⾃于⽤户输⼊。

  1. 在页面中添加相关元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Electron</title><link rel="stylesheet" href="./index.css"></head><body><input id="content" type="text"><br><br><button id="btn">在⽤户的D盘创建⼀个hello.txt</button></body><script src="./render.js"></script>
</html>
  1. 在 preload.js 中使⽤ ipcRenderer.send('信道', 参数) 发送消息，与主进程通信。
// contextBridge：在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
// ipcRenderer是渲染进程中用于与主进程进行通信的模块。
const {contextBridge, ipcRenderer} = require('electron')// 把方法/数据暴露给渲染进程
contextBridge.exposeInMainWorld('customAPI', {saveFile: data => {// 渲染进程给主进程发送⼀个消息ipcRenderer.send('save-file', data)}
})
  1. 在render.js中，调用 preload.js 暴露的 saveFile 方法，通知主进程
const btn = document.getElementById('btn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {// 在render.js 调用 preload.js 暴露出来的saveFile方法，通知主进程customAPI.saveFile(content.value);
});
  1. 主进程中，在加载页面之前，使用 ipcMain.on('信道', 回调) 配置对应回调函数，接收
    消息。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path')
const fs = require('fs')
// 保存文件
function saveFile(event,data) {console.log(event, data)fs.writeFileSync('D:/hello.txt',data)// 通过 'response-save-file' 通道将结果回复给渲染进程。event.reply('response-save-file', '保存文件啦！');
}function createWindow() {const win = new BrowserWindow({width: 1000, // 窗口宽度height: 800, // 窗口高度webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, 'preload.js')}});// 主进程注册对应回调ipcMain.on('save-file',saveFile)// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');
}

渲染进程与主进程通信的流程

  1. 渲染进程触发：
    • 当渲染进程中的某个事件发生时，比如用户点击按钮或页面加载完成，可以调用 ipcRenderer.send('信道', 参数) 方法向主进程发送消息。
  2. 主进程接收和处理：
    • 主进程使用 ipcMain.on('信道', 回调) 方法监听特定的通道名称。当主进程接收到来自渲染进程的消息时，它可以根据通道名称和传递的参数执行相应的操作。
  3. 渲染进程接收回复：
    • 渲染进程可以使用 ipcRenderer.on 方法监听主进程的回复通道。当渲染进程接收到主进程的回复时，可以根据结果进行界面更新或其他处理。

模式2：渲染器进程到主进程（双向）

概述：渲染进程通过 ipcRenderer.invoke 发送消息，主进程使⽤ ipcMain.handle 接收并处理消
息。
常用于：从渲染器进程代码调用主进程模块并等待结果 。

  • ipcRenderer.invoke(channel, ...args)
    • channel：这是一个字符串，表示消息的通道名称。与ipcRenderer.send类似，主进程通过监听这个特定的通道名称来接收来自渲染进程的请求。
    • ...args：这是一个可变参数，可以传递任意数量的参数给主进程。这些参数可以是任何有效的 JavaScript 值，用于向主进程提供请求所需的信息。
    • ipcRender.invoke 的返回值是 Promise 实例。
  • ipcMain.handle(channel, listener)
    • channel：一个字符串，代表特定的通信通道名称。
    • listener：一个回调函数，当主进程接收到来自渲染进程通过指定通道发送的同步请求时，这个回调函数会被执行。
      • 回调函数通常接受两个参数：event 和 args。event 代表事件对象，可用于回复渲染进程等操作；args 是渲染进程发送的参数，可以是单个值或一组值，具体取决于渲染进程的发送方式。
      • 回调函数需要返回一个值，这个值将作为响应发送回渲染进程。

示例：

实现需求：点击按钮从 D 盘读取 hello.txt 中的内容，并将结果呈现在页面上。

  1. 在页面中添加相关元素
<div id="content"></div>
<button id="btn">读取⽤户D盘的hello.txt</button
  1. 在 preload.js 中使⽤ ipcRenderer.invoke('信道', 参数) 发送消息，与主进程通信。
// contextBridge：在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
// ipcRenderer是渲染进程中用于与主进程进行通信的模块。
const {contextBridge, ipcRenderer} = require('electron')// 把方法/数据暴露给渲染进程
contextBridge.exposeInMainWorld('customAPI', {readFile: () => {// invoke 的返回值永远是Promisereturn ipcRenderer.invoke('read-file')}
})
  1. 在render.js中，调用 preload.js 暴露的 saveFile 方法，通知主进程
const btn = document.getElementById('btn');
const content = document.getElementById('content');
btn.addEventListener('click', async () => {let txt = await customAPI.readFile();content.innerHTML = txt
});
  1. 主进程中，在加载页面之前，使用 ipcMain.handle('信道', 回调) 配置对应回调函数，接收
    消息。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path')
const fs = require('fs')
// 保存文件
function readFile(event,data) {return fs.readFileSync('D:/hello.txt').toString()
}function createWindow() {const win = new BrowserWindow({width: 1000, // 窗口宽度height: 800, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, 'preload.js')}});// 主进程注册对应回调ipcMain.handle('read-file', readFile)// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');
}

ipcRenderer.invoke(channel, ...args) 与 ipcRenderer.send(channel, ...args) 用于双向IPC的区别

  • ipcRenderer.send需要设置第二个 ipcRenderer.on 监听器来处理渲染器进程中的响应。 使用 ipcRenderer.invoke，直接获得作为 Promise 返回到原始 API 调用的响应值。
  • 没有显而易见的方法可以将 ipcRenderer.on('asynchronous-reply', (_event, arg) => {}) 消息与原始的 ipcRenderer.send('asynchronous-message') 消息配对。 如果不写备注，开发者可能也不知道asynchronous-reply是asynchronous-message 通道的回复结果。如果通过这些通道非常频繁地来回传递消息，则需要添加其他应用代码来单独跟踪每个调用和响应。

模式3：主进程到渲染器进程

概述：主进程使用 win.webContents.send 发送消息，渲染进程使⽤ ipcRenderer.on 接收并处理消
息。
常用于：从主进程主动发送消息到渲染器进程。

示例：

需求：应⽤加载 6 秒钟后，主动给渲染进程发送⼀个消息

  1. 主进程中，使⽤ win.webContents.send('信道', 数据) 发送消息。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
function createWindow() {const win = new BrowserWindow({width: 1000, // 窗口宽度height: 800, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, 'preload.js')}});// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');// 创建⼀个定时器setTimeout(() => {win.webContents.send('message', 'hello!');}, 6000);
}
  1. preload.js 中使⽤ ipcRenderer.on ('信道', 回调) 接收消息，并配置回调函数。
window.onload = () => {customAPI.getMessage(logMessage);
};
function logMessage(event, str) {console.log(event, str);
}

http://www.ppmy.cn/server/127094.html

相关文章

Linux云计算 |【第四阶段】RDBMS1-DAY5

Linux云计算 |【第四阶段】RDBMS1-DAY5

主要内容&#xff1a; 试图概述&#xff08;创建视图VIEW、修改、查看、删除&#xff09;、变量&#xff08;全局变量、会话变量、用户变量、局部变量&#xff09;、存储过程&#xff08;创建、调用、删除存储过程&#xff09;、流程控制结构&#xff08;分支结构&#xff1a;…
阅读更多...
每日学习一个数据结构-树

每日学习一个数据结构-树

文章目录 树的相关概念一、树的定义二、树的基本术语三、树的分类四、特殊类型的树五、树的遍历六、树的应用场景 树的遍历一、前序遍历二、中序遍历三、后序遍历使用java代码实现遍历总结 树的相关概念 树是一种重要的非线性数据结构&#xff0c;在计算机科学中有着广泛的应用…
阅读更多...
深入理解.NET中的委托与事件：实现灵活的事件驱动编程

深入理解.NET中的委托与事件：实现灵活的事件驱动编程

好的&#xff0c;主人&#xff01;以下是关于.NET中委托和事件的详细博客内容。 深入理解.NET中的委托和事件 引言 在现代软件开发中&#xff0c;事件驱动编程是一种常见模式。为了实现这种模式&#xff0c;.NET框架提供了委托和事件这两种重要的概念。它们不仅促进了方法的灵…
阅读更多...
鸿蒙harmonyos next flutter混合开发之开发package

鸿蒙harmonyos next flutter混合开发之开发package

​​​​​​ 创建 package flutter create --templatepackage mypackage package代码如下&#xff1a; 创建hello_world.dart ///HelloWorld返回hello world 拼接param class HelloWorld {String helloWorld(String param) > "hello world ${param}"…
阅读更多...
回归预测合集|基于灰狼优化21个机器学习和深度学习的数据回归预测Matlab程序 多特征输入单输出

回归预测合集|基于灰狼优化21个机器学习和深度学习的数据回归预测Matlab程序 多特征输入单输出

回归预测合集|基于灰狼优化21个机器学习和深度学习的数据回归预测Matlab程序 多特征输入单输出 文章目录 一、清单二、实验结果三、核心代码四、代码获取五、总结 一、清单 基于灰狼优化BP神经网络的数据预测Matlab程序GWO–BP 基于灰狼优化卷积神经网络的数据预测Matlab程序G…
阅读更多...
shadcn-vue 快速开始

shadcn-vue 快速开始

介绍 基于 Radix Vue 和 Tailwind CSS 构建的可重复使用的组件 一个由社区主导的非官方 Vue 版本的 shadcn/ui。虽然我们与 shadcn 没有正式的合作或联系&#xff0c;但在开始这个项目之前得到了作者本人的同意。创建这个项目的原因是 Vue 生态系统中缺乏类似的项目&#xff…
阅读更多...
STM32 F1移植FATFS文件系统 USMART组件测试相关函数功能

STM32 F1移植FATFS文件系统 USMART组件测试相关函数功能

STM32 F1移植FATFS文件系统 使用USMART调试组件测试相关函数功能 文章目录 STM32 F1移植FATFS文件系统 使用USMART调试组件测试相关函数功能前言部分主要相关代码# USMART介绍1. mf_scan_files 扫描磁盘文件2. mf_mount 挂载磁盘3. mf_open 打开文件4. mf_read 读数据内容5. mf…
阅读更多...
PostgreSQL 17新特性merge语法增强

PostgreSQL 17新特性merge语法增强

PostgreSQL 17 merge语法增强&#xff0c;支持 RETURNING 子句&#xff0c;可以返回新增、更新或者删除的数据行 参考官方文档 https://www.postgresql.org/docs/17/sql-merge.html 1、merge语法 [ WITH with_query [, ...] ] MERGE INTO [ ONLY ] target_table_name [ * ] …
阅读更多...
最新文章

Copyright @ 2022~2023