Electron 进程间通信的四种方式

时间2023-03-14 17:59:13发布分享专员分类系统综合问题浏览134

今天小编给各位分享electron的知识，文中也会对其通过Electron 进程间通信的四种方式和电子邮件采用什么方法传输图片、照片、音频等数据文件？等多篇文章进行知识讲解，如果文章内容对您有帮助，别忘了关注本站，现在进入正文！

内容导航：

一、Electron 进程间通信的四种方式

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

加载预加载脚本后，渲染器进程应有权访问 window.electronAPI.onUpdateCounter() 监听器函数。

构建渲染器进程 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进程通信

上面我们介绍了Electron的四种进程间通信方式，那么将Electron和Vue结合起来，其本质依然是主进程与渲染进程之间的通信，通信方式不会由什么变化，只是目前比较流行的TS编程方式会让一些人束手无策，会报一些属性不存在的错误，这就需要我们去为TS声明这些额外的属性。例如：

注册上下文隔离接口

在预加载脚本中添加如下代码：

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

2.为TS声明类型

// src/types/global.d.tsexport interface IElectronAPI {  platform: string;}declare global {  interface Window {    electronAPI: IElectronAPI;  }}

3.在Vue中调用接口

// 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-setupimport 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>

一、电子邮件采用什么方法传输图片、照片、音频等数据文件？

邮件传输协议（SMTP）
简单邮件传输协议（SMTP）的目标是可靠高效地传送邮件，它独立于传送子系统而且仅要求一条可以保证传送数据单元顺序的通道。附录A，B，C和D描述了不同传送服务下SMTP的使用。在名词表中还定义了本文档中使用的术语。
SMTP的一个重要特点是它能够在传送中接力传送邮件，传送服务提供了进程间通信环境（IPCE），此环境可以包括一个网络，几个网络或一个网络的子网。理解到传送系统（或IPCE）不是一对一的是很重要的。进程可能直接和其它进程通过已知的IPCE通信。邮件是一个应用程序或进程间通信。邮件可以通过连接在不同IPCE上的进程跨网络进行邮件传送。更特别的是，邮件可以通过不同网络上的主机接力式传送。
通过这个协议，但是前提是图片、照片、音频必须上传到网上

二、electron是什么进程，怎么CPU负载这么高

electron是一个桌面开发框架。
如果你没有主动安装的话，我认为是你安装了一个用electron做的软件，所以进程里面会有这个。电脑刚激活的话，软件应该不多，你可以截图给我看下，应该很容易找到是哪款软件。

三、电子邮件的原理是什么?

电子邮件传输的原理为：

1、发信人使用主机上的客户端软件编写好邮件，同时输入发件人、收件人地址。通过SMTP协议与所属发送方邮件服务器建立连接，并将要发送的邮件发送到所属发送方邮件服务器。

2、发送方邮件服务器查看接收邮件的目标地址，如果收件人为本邮件服务器的用户，则将邮件保存在收件人的邮箱中。如果收件人不是本邮件服务器的用户，则将交由发送方邮件服务器的SMTP客户进程处理。

3、发送方邮件服务器的客户进程向收件人信箱所属邮件服务器发出连接请求，确认后，邮件按SMTP协议的要求传输到收件人信箱邮件服务器。收件人信箱邮件服务器收到邮件后，将邮件保存到收件人的邮箱中。

4、当收件人想要查看其邮件时，启动主机上的电子邮件应用软件，通过POP3取信协议进程向收件人信箱邮件服务器发出连接请求。

确认后，收件人信箱邮件服务器上的POP3服务器进程检查该用户邮箱，把邮箱中的邮件按POP3协议的规定传输到收信人主机的POP3客户进程，最终交给收信人主机的电子邮件应用软件，供用户查看和管理。

扩展资料：

电子邮件系统采用的是客户机/服务器工作模式,整个系统的核心是电子邮件服务器。电子邮件应用软件即用户代理，负责邮件的接收、发送、编辑及打印等。用户在邮件服务器上申请的邮箱，用于邮件的存储与转发等。

目前电子邮件主要的通信协议有以下几种：

1、SMTP

SMTP全称Simple Mail Transfer Protocol，是一种TCP协议支持的提供可靠且有效电子邮件传输的应用层协议。SMTP 是建立在 TCP上的一种邮件服务，主要用于传输系统之间的邮件信息并提供来信有关的通知。SMTP主要负责底层的邮件系统如何将邮件从一台机器传至另外一台机器。

2、POP

POP3全称Post Office Protocol，是把邮件从电子邮箱中传输到本地计算机的协议。

3、IMAP

IMAP全称Internet Message Access Protocol，是POP3的一种替代协议，提供了邮件检索和邮件处理的新功能，这样用户可以完全不必下载邮件正文就可以看到邮件的标题摘要，从邮件客户端软件就可以对服务器上的邮件和文件夹目录等进行操作。

IMAP协议增强了电子邮件的灵活性，同时也减少了垃圾邮件对本地系统的直接危害，同时相对节省了用户察看电子邮件的时间。除此之外，IMAP协议可以记忆用户在脱机状态下对邮件的操作（例如移动邮件，删除邮件等）在下一次打开网络连接的时候会自动执行。

关于electron的问题，通过《electron是什么进程，怎么CPU负载这么高》、《电子邮件的原理是什么?》等文章的解答希望已经帮助到您了！如您想了解更多关于electron的相关信息，请到本站进行查找！

electron

Windows 10未发布先送大礼！超级补丁包美媒发现：激怒中国后，“英特尔删了”