Electron主进程渲染进程间通信的四种方式

news2024/11/24 1:33:27

在这里插入图片描述
在electron中进程使用 ipcMain 和 ipcRenderer 模块，通过开发人员定义的“通道”传递消息来进行通信。新的版本中electron推荐使用上下文隔离渲染器进程进行通信，这种方式的好处是无需在渲染进程中直接使用ipcRenderer发送消息，这种在渲染进程中调用nodejs对象的方法对于渲染进程有侵入性。当我们使用vue或者其他前端框架开发界面时，上下文隔离方式使用起来更加方便，基本上感受不到electron对前端框架的影响。

一、Electron 进程通信

上下文隔离的进程间通信方式有四种：

1. 渲染器进程到主进程（单向）

要将单向 IPC 消息从渲染器进程发送到主进程，您可以使用 ipcRenderer.send API 发送消息，然后使用 ipcMain.on API 接收。通常使用场景是从 Web 向主进程发送消息。

使用 ipcMain.on 监听事件

在主进程中，使用 ipcMain.on 在 set-title 通道上设置一个 IPC 监听器:

const handleSetTitle = (event, title) => {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
}

ipcMain.on('set-title', handleSetTitle)

上面的 handleSetTitle 回调函数有两个参数：一个 IpcMainEvent 结构和一个 title 字符串。每当消息通过 set-title 通道传入时，此函数找到附加到消息发送方的 BrowserWindow 实例，并在该实例上调用win.setTitle函数设置窗口标题。

通过预加载脚本暴露 ipcRenderer.send

要将消息发送到上面创建的监听器，您可以使用 ipcRenderer.send。默认情况下，渲染器进程没有权限访问 Node.js 和 Electron 模块。作为应用开发者，你需要使用 contextBridge 来选择要从预加载脚本中暴露哪些 API。
在您的预加载脚本中添加以下代码，向渲染器进程暴露一个全局的 window.electronAPI 变量。

import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title)
})

然后我们就能够在渲染器进程中使用 window.electronAPI.setTitle() 函数。

构建渲染器进程 UI

在 BrowserWindow 加载的我们的 HTML 文件中，添加一个由文本输入框和按钮组成的基本用户界面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>
    <script src="./renderer.js"></script>
  </body>
</html>

为了使这些元素具有交互性，我们将在导入的 renderer.js 文件中添加几行代码，以利用从预加载脚本中暴露的 window.electronAPI 功能：

const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
    const title = titleInput.value
    window.electronAPI.setTitle(title)
});

这种方式只能把消息从web中发送到主进程，并不能从主进程中获取到返回值。

2. 渲染器进程到主进程（双向）

双向 IPC 的一个常见应用是从渲染器进程代码调用主进程模块并等待结果。这可以通过将 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成。

我们依然通过一个示例来了解这种通信方式：

使用 ipcMain.handle 监听事件

在主进程中，我们将创建一个 handleFileOpen() 函数，它调用 dialog.showOpenDialog 并返回用户选择的文件路径值。每当渲染器进程通过 dialog:openFile 通道发送 ipcRender.invoke 消息时，此函数被用作一个回调。然后，返回值将作为一个 Promise 返回到最初的 invoke 调用。

async function handleFileOpen() {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (canceled) {
    return
  } else {
    return filePaths[0] // 返回文件名给渲染进程
  }
}

ipcMain.handle('dialog:openFile', handleFileOpen)

通过预加载脚本暴露 ipcRenderer.invoke

在预加载脚本中，我们暴露了一个单行的 openFile 函数，它调用并返回 ipcRenderer.invoke(‘dialog:openFile’) 的值。

import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

构建渲染器进程 UI

在渲染器中调用window.electronAPI.openFile调用打开文件对话框，并获取打开的文件名，并显示在界面上。

<!DOCTYPE html>
<html>
  <head>`在这里插入代码片`
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    <button type="button" id="btn">Open a File</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

渲染器进程脚本

const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 主进程到渲染器进程（双向）

将消息从主进程发送到渲染器进程时，需要指定是哪一个渲染器接收消息。消息需要通过其 WebContents 实例发送到渲染器进程。此 WebContents 实例包含一个 send 方法，其使用方式与 ipcRenderer.send 相同。

使用 webContents 模块发送消息

在菜单中通过使用 webContents.send 将 IPC 消息从主进程发送到目标渲染器。

const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment',
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement',
        }
      ]
    }
  ])
  Menu.setApplicationMenu(menu)

通过预加载脚本暴露 ipcRenderer.on

使用预加载脚本中的 contextBridge 和 ipcRenderer 模块向渲染器进程发送消息：

import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
    onUpdateCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

构建渲染器进程 UI

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Menu Counter</title>
  </head>
  <body>
    Current value: <strong id="counter">0</strong>
    <script src="./renderer.js"></script>
  </body>
</html>

更新 HTML 文档中的值

const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((_event, value) => {
    const oldValue = Number(counter.innerText)
    const newValue = oldValue + value
    counter.innerText = newValue
})

返回一个回复

对于从主进程到渲染器进程的 IPC，没有与 ipcRenderer.invoke 等效的 API。不过，您可以从 ipcRenderer.on 回调中将回复发送回主进程。

在渲染器进程中，使用 event 参数，通过 counter-value 通道将回复发送回主进程。

const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((event, value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue
  event.sender.send('counter-value', newValue) // 发送消息到主进程
})

在主进程中，监听 counter-value 事件并适当地处理它们。

//...
ipcMain.on('counter-value', (_event, value) => {
  console.log(value) // 将打印到 Node 控制台
})
//...

4. 渲染器进程到渲染器进程

没有直接的方法可以使用 ipcMain 和 ipcRenderer 模块在 Electron 中的渲染器进程之间发送消息。为此，我们有两种选择：

  • 将主进程作为渲染器之间的消息代理。这需要将消息从一个渲染器发送到主进程，然后主进程将消息转发到另一个渲染器。

  • 从主进程将一个 MessagePort 传递到两个渲染器。这将允许在初始设置后渲染器之间直接进行通信

二、Electron + Vue 通信

上面我们创建好了项目结构，那么在使用Vue开发Electron桌面应用的时候还有一个比较重要的知识点要了解，就是消息通信。在新版本的electron中，推荐使用上下文隔离方式进行内部进程通信，electron官网有很详细的介绍和示例，这里我们只介绍一种方式，其他的方式大家可以通过查看官网示例来了解。

我们的示例是在Vue界面中显示当前系统平台。

注册上下文隔离接口

在electron-preload/index.ts中添加如下代码：

import os from 'os';
import { contextBridge } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  platform: os.platform(),
});

编写上下文隔离接口的typescript类型声明

通过electron注册的上下文隔离接口会添加给window对象，但是原始的window对象并不存在这些接口和属性，ts就会报错，这时就需要我们为其编写ts类型声明文件.d.ts。

// src/types/global.d.ts
export interface IElectronAPI {
  platform: string;
}

declare global {
  interface Window {
    electronAPI: IElectronAPI;
  }
}

在Vue中调用接口

我们在App.vue中调用window.electronAPI.platform接口，把系统平台信息显示在界面上

// src/App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue';
const platform = window.electronAPI.platform;
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld :msg="`Hello Vue 3 + TypeScript + Vite in ${platform}`" />
</template>

执行完以上步骤后，运行项目看一下效果。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/144409.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JWT令牌入门

JWT令牌入门

上篇文章我们写了如何登录&#xff0c;我们着重学习Token模式下的单点登录 一、访问令牌的类型 透明令牌&#xff0c;是客户端存储一段引用数字&#xff0c;然后到达服务器指向服务器中特定的令牌 类似于&#xff0c;cookie中存储了sessionId他们之间的关系 自包含令牌&#x…
阅读更多...
猿代码超算实习生，五步助力拿到高薪offer

猿代码超算实习生，五步助力拿到高薪offer

虽说行行出状元&#xff0c;但是一旦入错行&#xff0c;那就是一辈子的事。互联网的潮水已经退去&#xff0c;普通人再进入也只是勉强温饱。与其朝不保夕的被裁员&#xff0c;倒不如提前锁定未来30年的幸福。 20大以来&#xff0c;芯片国产化、超算&#xff08;先进计算&#…
阅读更多...
docker的run,cmd,entrypoint分析和对比

docker的run,cmd,entrypoint分析和对比

写在前面 本文一起看下Dockerfile中经常用到的几个类似命令&#xff0c;RUN&#xff0c;CMD&#xff0c;ENTRYPOINT。 1&#xff1a;容器是怎么来的&#xff1f; 想要有容器我们就必须先创建镜像&#xff0c;而想要有镜像&#xff0c;我们则必须写一个用来描述想要创建的镜像…
阅读更多...
Struts2基本架构

Struts2基本架构

Struts2基本架构1、Struts2执行流程2、web.xml配置3、Action控制器3.1、核心控制器3.2、业务控制器4、Result配置5、struts.xml核心配置5.1、constant元素5.2、package元素5.3、配置文件加载顺序1、Struts2执行流程 如下例子&#xff1a; 执行流程如下&#xff1a; 浏览器将请…
阅读更多...
Python Flask开发笔记

Python Flask开发笔记

Python Flask开发笔记一、创建flask项目1.开发环境&#xff1a;2.安装Flask3.使用pycharm&#xff0c;创建flask项目二、flask介绍1.介绍初始flask主程序接口文件2.Flask() 类1.Flask参数解释0.sys.modules用于缓存程序导入模块名1.import_name 主程序模块名2.static_url_path …
阅读更多...
IconJar - Mac 上的一款多功能图标素材管理工具

IconJar - Mac 上的一款多功能图标素材管理工具

IconJar - Mac 上的一款多功能图标素材管理工具 IconJar 是一个多功能的图标管理工具&#xff0c;由世界各地的设计师和开发人员使用。在一个应用程序中搜索、组织、预览和检索图标&#xff0c;而不是创建大量的文件夹来存储你的收藏。这款应用针对黑暗模式进行了优化&#xff…
阅读更多...
2022年自动化测试工具汇总——实用的功能测试工具篇

2022年自动化测试工具汇总——实用的功能测试工具篇

如今&#xff0c;UI自动化测试工具就和雨后春笋般&#xff0c;层出不穷。由于每种工具都有自己的重点和策略&#xff0c;所以总是让人无从下手。今天我们来对比现在使用比较广泛的几个UI自动化测试工具&#xff0c;来看看他们之间的优缺点。 首先&#xff0c;我们先简单介绍一下…
阅读更多...
4.6.4、边界网关 BGP 的基本工作原理

4.6.4、边界网关 BGP 的基本工作原理

1、力求寻找较好的路由 因特网采用分层次的路由选择协议 内部网关协议&#xff08;例如&#xff1a;路由信息协议 RIP 或开放最短路径优先 OSPF&#xff09; 它们都是设法使分组在一个自治系统内尽可能有效地从源网络传输到目的网络无需考虑自治系统外部其他方面的策略 外部…
阅读更多...
内网渗透-src挖掘-外网打点到内网渗透-3层内网渗透测试记录-2023年1月

内网渗透-src挖掘-外网打点到内网渗透-3层内网渗透测试记录-2023年1月

1、通过信息搜集&#xff0c;发现目标有一个外网访问的通达OA系统 2、通达OA的漏洞是非常多的&#xff0c;这里利用大佬写好的通达OA一键getshell工具 成功获取webshell 3、连接webshell&#xff0c;上传cs马儿到服务器 4、执行获取主机权限 成功上线 5、通过Ladon插件发…
阅读更多...
百分之80新手都不知道，SEO搜索引擎优化【sitemap网站地图 配置】

百分之80新手都不知道，SEO搜索引擎优化【sitemap网站地图 配置】

Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式&#xff0c;就是XML 文件&#xff0c;在其中列出网站中的网址以及关于每个网址的其他元数据&#xff08;上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等&am…
阅读更多...
浅析oauth2.0及应用场景

浅析oauth2.0及应用场景

讲OAuth2.0之前&#xff0c;我们先理解一个概念&#xff0c;授权用户和资源权限的概念授权用户&#xff1a;用户访问某个应用系统&#xff0c;该应用系统请求认证中心授权以获取这个登录用户的信息&#xff0c;但并没有得到这个用户的密码&#xff0c;这个就是OAuth2.0实现的要…
阅读更多...
N个点，求距离最近的两个点---分治策略（1）

N个点，求距离最近的两个点---分治策略（1）

设平面有n个点的直角坐标是,i 1, 2, ...,n,求距离最近的2个点&#xff0c;距离计算&#xff1a; 首先这个问题是可以使用蛮力算法&#xff0c;一共n(n-1)/2个点对&#xff0c;每对点对计算需要常数的时间&#xff0c;蛮力算法需要的时间。 由于点对有二维的空间坐标&#xf…
阅读更多...
（三十）Vue之回顾本地存储webStorage

（三十）Vue之回顾本地存储webStorage

文章目录webStorageLocalStoragesessionStorage改造TodoList案例为本地存储Vue学习目录 上一篇&#xff1a;&#xff08;二十九&#xff09;Vue之组件化编码流程 下一篇&#xff1a;&#xff08;三十一&#xff09;Vue之自定义事件 webStorage 使用HTML5可以在本地存储用户…
阅读更多...
Python基础（二十二）：文件操作

Python基础（二十二）：文件操作

文章目录 文件操作 一、文件操作的作用 二、文件的基本操作 1、文件操作步骤
阅读更多...
同时开启的revit模型和navisworks如何同步呢?

同时开启的revit模型和navisworks如何同步呢?

一、 Navisworks与Revit同步问题 同时开启的revit模型和同时开启的navisworks如何同步呢? 1.如图1所示打开了一个revit模型 将模型保存在指定的路径上&#xff0c;然后通过直接拖拽的方式在navisworks manage打开模型文件&#xff0c;过程中会出现读条状态&#xff0c;如图2所…
阅读更多...
【MySQL进阶教程】 索引使用与设计原则

【MySQL进阶教程】 索引使用与设计原则

前言 本文为 【MySQL进阶教程】 索引使用与设计原则 相关知识&#xff0c;下边将对索引的使用&#xff08;包括&#xff1a;验证索引效率&#xff0c;最左前缀法则&#xff0c;范围查询&#xff0c;索引失效情况&#xff0c;SQL提示&#xff0c;覆盖索引&#xff0c;前缀索引&a…
阅读更多...
Struts2获取表单数据

Struts2获取表单数据

Struts2获取表单数据Struts2获取表单数据1、原始Servlet方法2、属性封装3、表达式封装4、模型驱动封装Struts2获取表单数据 在Struts2中获取表单数据或提交路径的参数值的方式有4种。如下&#xff1a; 原始Servlet方法属性封装表达式封装模型驱动封装 1、原始Servlet方法 该…
阅读更多...
文章书写方法

文章书写方法

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…
阅读更多...
Python爬虫 xpath解析基础

Python爬虫 xpath解析基础

今天继续给大家介绍Python爬虫相关知识&#xff0c;本文主要内容是Python爬虫 xpath解析基础。 一、xpath简介 xpath&#xff0c;即XML Path Language&#xff0c;是一种用来确定XML文档中某部分位置的语言&#xff0c;Xpath以XML为基础&#xff0c;可以提供用户在数据结构树…
阅读更多...
8、可观测性--链路追踪

8、可观测性--链路追踪

文章目录链路追踪服务之间的依赖Span 的构成Span 之间关系链路图链路追踪与 Dapper链路追踪的作用链路查询性能分析拓扑图依赖关系跨应用/语言采样率链路追踪 首先&#xff0c;我来带你了解一下什么是链路追踪&#xff1f; 服务之间的依赖 在前言中介绍了数据的来源&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023