初识Electron 进程通信

server/2024/11/14 10:30:31/

概述

Electron = chromium + nodejs + native API，也就是将node环境和浏览器环境整合到了一起，这样就构成了桌面端（chromium负责渲染、node负责操作系统API等）

流程模型

预加载脚本：运行在浏览器环境下，但是也能访问部分node API
在这里插入图片描述

初始化项目

先创建一个vue3+vite的项目，然后在项目当中安装electron。具体命令就是这样

npm create vite@latest vue-electron
cd vue-electron
npm i
npm i electron -D

构建Electron项目

在package.json文件当中修改和添加type和main配置，electron脚本运行在node环境下，所以type要设置为commonjs，然后main指向electron运行的入口文件，再将启动命令加进去，这样就可以通过 npm run start 来启动electron座面应用了

  "type": "commonjs","main": "electron/main/index.js"// 启动命令"start": "electron .",

编写electron/main/index.js。通过BrowserWindow创建一个浏览器窗口，然后可以通过loadURL加载一个网页，或者通过loadFile加载一个html文件进行渲染。然后还可以通过初始化监听去创建对应的窗口和关闭窗口的时候去退出electron。

const { app, BrowserWindow } = require('electron')
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadURL('http://localhost:5173/');// win.loadFile('index.html')}
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
app.on("window-all-closed", () => {console.log("在关闭一个应用的所有窗口后让它退出");// 在关闭一个应用的所有窗口后让它退出if (process.platform === "darwin") {app.quit();}
});

github 仓库地址：https://github.com/lizuoqun/vue-electron.git

窗口常用方法

在win【BrowserWindow】对象当中会有一些常用的方法，这里简单列出来一下，完整的在这BrowserWindow Object API

  • getAllWindows：所有打开的窗口的数组
  • getFocusedWindow：此应用程序中当前获得焦点的窗口
  • fromBrowserView：通过给定的视图返回对应的窗口
  • close：关闭窗口
  • maximize：最大化窗口
  • unmaximize：取消窗口最大化
  • 还有最小化、全屏、聚焦、背景、阴影、透明等等，用的时候可以再去文档里面找一下对应的方法调用

命令合并

在这里是vue3和electron项目都在一起，并且是直接访问5137端口加到桌面端的，这个时候可以通过 npm-run-all 这个包可以将命令进行合并。先npm install npm-run-all这个包，然后改一下下面的启动脚本，通过 npm run deva 就可以直接启动vue3和electron项目了。

{"scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview","start": "electron .","deva": "npm-run-all --parallel dev start"},
}

预加载脚本

预加载脚本通过进行配置，在electron入口文件中进行配置，这里配置了一个同目录下的preload作为先进行加载的js脚本。

其中对于 WebPreferences Object 对象的配置可以看这个官方文档的配置，其中有几个比较常用的

  • devTools boolean 是否开启 DevTools
  • preload string 预加载的脚本文件地址
  • nodeIntegration boolean 是否启用Node integration 是否可以使用 Node.js 功能的配置
  • contextIsolation boolean 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true。
    • nodeIntegration设置为true后require is not define。需要设置contextIsolation为false
  const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}});

扩展

这里来一个简单的electron当中的预加载脚本看一下并且进行扩展下

contextBridge API 上下文桥梁，其他更多详细的配置可以参考官方文档，下面只说一下使用到的

在隔离的上下文中创建一个安全的、双向的、同步的桥梁。

exposeInMainWorld方法

contextBridge.exposeInMainWorld(apiKey, api)

  • apiKey string - 将 API 注入到 窗口 的键。 API 将可通过 window[apiKey] 访问。
  • api any - 你的 API可以是什么样的以及它是如何工作的相关信息如下。
const { contextBridge } = require('electron')
/*** 在预处理的过程当中，不能直接将值给绑定到window对象上再取值，* 虽然预加载脚本与其所附着的渲染器在共享着一个全局 window 对象，* 但并不能从中直接附加任何变动到 window 之上，因为 contextIsolation 是默认的。* 所以在preload当中window.myAPI = { desktop: true } 设置了myAPI，但是在render当中获取不到console.log(window.myAPI)*/
contextBridge.exposeInMainWorld('versions', {node: () => process.versions.node,chrome: () => process.versions.chrome,electron: () => process.versions.electron,
})

因为这个脚本是预加载的，在项目启动之后就会执行，并且他里面的数据都是直接绑定在window对象上，那么在这个项目里面其他的地方就可以直接使用了，比方说在vue代码当中使用：

这里不能通过模版插值直接写的，原因很简单，在vue里面只会去加载setup里面的数据，但是versions是window的，所以要在js里面用

<script setup lang="ts">
import {onMounted} from 'vue';onMounted(() => {const information = document.getElementById('info') as HTMLDivElement;information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`;
});
</script><template><div id="info"></div><div>versions: {{ versions }}</div>
</template>

进程通信

概述

Electron 继承了来自 Chromium 的多进程架构，网页浏览器的基本架构是单个浏览器进程控制不同标签页进程，以及整个应用程序的生命周期。这样可以避免单个浏览器的无响应不会影响到整个浏览器。

Electron 应用的大致工作流程是：启动APP——主进程创建window——win加载页面（渲染进程）

Electron 应用程序将控制两种类型的进程：主进程和渲染器进程。

主进程&渲染进程是啥

主进程 ipcMain

  • 是应用的核心，在应用启动时运行，并在整个应用的生命周期中保持活动状态
  • 主要功能
    • 创建和管理应用程序窗口
    • 管理窗口生命周期
    • 使用原生API

渲染进程

  • 是应用的用户界面部分，渲染线程运行在 Chromium 内核中，可以像 Web 浏览器一样加载和呈现网页
  • 主要功能
    • 一个应用可以有多个渲染进程
    • Windows 中展示的界面通过渲染进程表现
    • 每个窗口都是一个独立的渲染线程
    • 无法直接操作原生API

渲染进程到主进程（单向通信）

在这里借用预加载脚本进行通信，这里演示一下直接以vue3页面作为渲染进程，然后通过preload预加载脚本传递到electron入口也就是主进程。

<script setup lang="ts">
const renderToMainProcess = () => {electronApi.setTitle('渲染进程');
};
</script>

然后这个方法是在预加载脚本preload.js通过exposeInMainWorld进行绑定在window对象上的，所以在上面可以直接使用

contextBridge.exposeInMainWorld('electronApi', {// 渲染器进程到主进程的通信（单向通信）setTitle: (title) => ipcRenderer.send('set-title', title)
});

在最后可以在electron入口当中拿到这个数据。这里就有问题了，这是怎么知道触发了setTitle方法？

ipcMain：API在这

ipcRenderer：是一个 EventEmitter 的实例。 当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。

在ipcMain当中可以通过on、once等方法来监听ipcRenderer发送的事件。这就类比一个bus事件总线，从ipcRenderer发的set-title事件之后，从ipcMain当中拦截监听这个事件，并且指定对应的回调来处理后续操作。

  • event：他是一个 IpcMainEvent 对象。在这个可以直接通过点去获取里面的属性，其中sender WebContent - 返回发送消息的 webContents
  • 然后通过 fromWebContents() 方法找到对应的窗口对象，最后通过setTitle设置标题
  • 补充：直接用win.setTitle其实也是一样的效果，这是因为这个渲染进程和主进程是在同一个页面上的，所以效果其实是一样的。因为 win 对象是在创建窗口时定义的，它代表了整个窗口，而不是特定的渲染进程。而我们需要的是找到发送消息的特定渲染进程对应的窗口对象，
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}});ipcMain.on('set-title', (event, title) => {const webContents = event.sender;const ipcWin = BrowserWindow.fromWebContents(webContents);ipcWin.setTitle(title);// win.setTitle(title)});win.loadURL('http://localhost:5173/');
};

渲染进程到主进程（双向通信）

在主进程（入口）当中添加以下代码：这里模拟的效果是在vue当中点击按钮后通过electron主进程打开文件系统选择文件，选择文件之后拿到文件的路径之后再传递给渲染进程（vue）进行显示。

dialog API在这

  • 显示用于打开和保存文件、警报等的本机系统对话框
  • showOpenDialog打开这是一个异步的所以给他加了async和await变成同步，他对应的也有一个showOpenDialogSync同步方法。
  • Promise成功包含的数据
    • canceled boolean - 对话框是否被取消。
    • filePaths string[] - 用户选择的文件路径的数组. 如果对话框被取消，这将是一个空的数组。因为前面调用showOpenDialog方法的时候没有给他设置multiSelections参数（文件多选），这里直接取数组下标0也就是文件的路径了。
  • ipcMain.handle：为一个invokeable的IPC 添加一个handler。 每当一个渲染进程调用 ipcRenderer.invoke(channel, ...args) 时这个处理器就会被调用。
async function handleFileOpen () {const { canceled, filePaths } = await dialog.showOpenDialog({})if (!canceled) {return filePaths[0]}
}app.whenReady().then(() => {ipcMain.handle('dialog:openFile', handleFileOpen)createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});

在预加载脚本当中把dialog:openFile给定义下。这里用的是invoke：表示通过 channel 向主过程发送消息，并异步等待结果。拿到这一步就实现了主进程和渲染进程的双向通信机制，和单向通信进行对比的区别在于单向通信使用到的send和on是单向传递（理解成on和emit就可以了，只能单向传递）。而双向通信通过invoke和handle就像是一个监听和异步等待的效果，每一个事件都会在ipcRenderer当中异步等待响应结果，得到结果之后直接响应给渲染进程也就完成了双向通信

contextBridge.exposeInMainWorld('electronApi', {// 渲染器进程到主进程的通信（双向通信）openFile: () => ipcRenderer.invoke('dialog:openFile')
});

最后就是在vue渲染进程当中进行触发

<script setup lang="ts">
import {ref} from 'vue';const renderToMainSingleProcess = () => {electronApi.setTitle('渲染进程');
};let filePath = ref('')
const renderToMainMultiProcess = async () => {filePath.value = await window.electronApi.openFile()
};
</script><template><div>渲染进程->主进程通信</div><el-button type="primary" @click="renderToMainSingleProcess">单向</el-button><el-button type="primary" @click="renderToMainMultiProcess">双向</el-button><div>双向通信的文件路径为:{{ filePath }}</div>
</template>

主进程到渲染进程

在electron主进程当中添加一个menu菜单项，这里通过webContents.send发送消息

  const menu = Menu.buildFromTemplate([{label: app.name,submenu: [{click: () => win.webContents.send('update-counter', 1),label: '加一'},{click: () => win.webContents.send('update-counter', -1),label: '减一'}]}]);Menu.setApplicationMenu(menu);

预加载脚本暴露

contextBridge.exposeInMainWorld('electronApi', {// 主进程向渲染器进程发送消息onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),counterValue: (value) => ipcRenderer.send('counter-value', value)
});

最后在渲染进程当中调用即可实现效果，在这里的onUpdateCounter相对于一个回调触发，在主进程当中调用update-counter之后会通过预加载暴露的方法到渲染进程，这个渲染进程可以理解成一个监听器，得到监听结果之后就可以拿到改变的值了。

补充：然后这里的渲染进程和主进程的通信看前面的就好了，也就是预加载脚本通过send发送，在主进程当中通过ipcMain.on得到发送的消息

<script setup lang="ts">
import {ref} from 'vue';let counter = ref(0);
const mainToRender = () => {window.electronApi.onUpdateCounter((value) => {const oldValue = Number(counter.value);const newValue = oldValue + value;counter.value = newValue.toString();window.electronApi.counterValue(newValue);});
};
</script><template><el-button type="primary" @click="mainToRender">主进程->渲染进程通信</el-button><div>Current value = {{ counter }}</div>
</template>

遇见的问题

问题一：-32601

开启了控制台报错：win.webContents.openDevTools();

{"code":-32601,"message":"'Autofill.enable' wasn't found"}

异常信息：在打开了控制台的时候会报这个错误，但是并不影响实际使用：这个持续可以看一下Electron GitHub issues

问题二：Authors is required
An unhandled rejection has occurred inside Forge:
Error: Failed with exit code: 1
Output:
���ڳ��Դӡ�web_electron.nuspec�����ɳ������
Authors is required.
Description is required.

可以看到这个的报错是Authors和Description都是必填的，这个在package.json文件当中可能在初始化项目时没有填这两项，这两项是必填的，补充一下即可

打包之后在out目录下会有改exe文件，exe文件名对应的是项目名称，out\web-electron-win32-x64到这里也就完成了electron的打包了，这个exe文件就可以直接在电脑上打开了。

打包

electronbuild_399">electron-build打包

这里安装electron-builder，需要安装在开发环境当中

npm i electron-builder -D

而后在package.json里面添加build配置，这里简化些，下面是需要添加的打包配置。打包后在dist目录下的exe直接安装即可

{"scripts": {"build-win": "electron-builder"},"build": {"productName": "Electron","appId": "com.modify","copyright": "by modify","asar": true,"win": {"icon": "electron/logo.ico"},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "electron/logo.ico","uninstallerIcon": "electron/logo.ico","installerHeaderIcon": "electron/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "APP","runAfterFinish": true}}
}

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

相关文章

半导体制造技术导论（第二版）萧宏 第五章集成电路加热工艺答案

半导体制造技术导论（第二版）萧宏 第五章集成电路加热工艺答案

本章要求 1. 至少列出三种重要的加热工艺 水平式高温炉加热、垂直式高温炉加热&#xff08;即传统的管式炉加热&#xff09;、快速加热工艺RTP、激光镭射 退火LSA 2. 说明直立式和水平式炉管的基本系统&#xff0c;以及直立式炉管的优点 基本系统&#xff1a;控制系统…
阅读更多...
VR的左右眼渲染方法

VR的左右眼渲染方法

VR的左右眼视频渲染shader unity_StereoEyeIndex 结点可以判断当前渲染的时候左眼还是右眼&#xff0c;所以可以通过着色器来更根据当前眼睛使用不同的渲染方式达到左右眼渲染不同。 Shader "Unlit/VRVideoPlay" {Properties{_MainTex ("Texture", 2D) …
阅读更多...
【Flume实操】实时监听 NetCat 端口和本地文件数据到 HDFS 案例分析

【Flume实操】实时监听 NetCat 端口和本地文件数据到 HDFS 案例分析

聚合&#xff1a;实时监听 NetCat 端口和本地文件数据到 HDFS 案例分析 案例需求&#xff1a;假设有一个生产场景&#xff0c;Flume1 在实时产生日志数据&#xff0c;日志类型为 flume.log。Flume2 在持续监控一个 netcat 端口的数据流。先需要将 Flume1、Flume2产生的数据采集…
阅读更多...
关于word 页眉页脚的一些小问题

关于word 页眉页脚的一些小问题

去掉页眉底纹&#xff1a; 对文档的段落边框和底纹进行设置&#xff0c;也是页眉横线怎么删除的一种解决方式&#xff0c;具体操作如下&#xff1a; 选中页眉中的横线文本&#xff1b; 点击【开始】选项卡&#xff0c;在【段落】组中点击【边框】按钮的下拉箭头&#xff1b; …
阅读更多...
FreeRTOS 23：事件组EventGroup创建、删除、置位操作

FreeRTOS 23：事件组EventGroup创建、删除、置位操作

FreeRTOS 提供了事件标志组的一些相关操作函数&#xff0c;如下表所示&#xff1a; 创建一个事件组 xEventGroupCreate() 动态方式创建事件标志组 xEventGroupCreate()用于创建一个事件组&#xff0c;并返回对应的句柄。 要想使用该函数必须 在头文件 FreeRTOSConfig.h 定义宏…
阅读更多...
Linux安装Mysql详细教程(两种安装方法)

Linux安装Mysql详细教程(两种安装方法)

Linux之Mysql安装配置 第一种&#xff1a;Linux离线安装Mysql&#xff08;提前手动下载好tar.gz包&#xff09;第二种&#xff1a;通过yum安装配置Mysql&#xff08;服务器有网络&#xff09; 第一种&#xff1a;tar.gz包安装 1、 查看是否已经安装 Mysql rpm -qa | grep m…
阅读更多...
AMD-OLMo：在 AMD Instinct MI250 GPU 上训练的新一代大型语言模型。

AMD-OLMo：在 AMD Instinct MI250 GPU 上训练的新一代大型语言模型。

AMD-OLMo是一系列10亿参数语言模型&#xff0c;由AMD公司在AMD Instinct MI250 GPU上进行训练&#xff0c;AMD Instinct MI250 GPU是一个功能强大的图形处理器集群&#xff0c;它利用了OLMo这一公司开发的尖端语言模型。AMD 创建 OLMo 是为了突出其 Instinct GPU 在运行 “具有…
阅读更多...
计算机网络常见面试题（一）：TCP/IP五层模型、TCP三次握手、四次挥手，TCP传输可靠性保障、ARQ协议

计算机网络常见面试题（一）：TCP/IP五层模型、TCP三次握手、四次挥手，TCP传输可靠性保障、ARQ协议

文章目录 一、TCP/IP五层模型&#xff08;重要&#xff09;二、应用层常见的协议三、TCP与UDP3.1 TCP、UDP的区别&#xff08;重要&#xff09;3.2 运行于TCP、UDP上的协议3.3 TCP的三次握手、四次挥手3.3.1 TCP的三次握手3.3.2 TCP的四次挥手3.3.3 随机生成序列号的原因 四、T…
阅读更多...
最新文章

Copyright @ 2022~2023