Electron 进程间通信的四种方式（electron线程）

ztj100 2024-10-28 21:09 32 浏览 0 评论

在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.ts
export 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-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>

update canceled

上一篇：「C#.NET 拾遗补漏」16:几个常见的TAP异步操作
下一篇：Android 开发中文引导-应用小部件

Electron 进程间通信的四种方式（electron线程）

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

使用 ipcMain.on 监听事件

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

构建渲染器进程 UI

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

使用 ipcMain.handle 监听事件

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

构建渲染器进程 UI

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

使用 webContents 模块发送消息

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

构建渲染器进程 UI

返回一个回复

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

Electron与Vue进程通信

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

Electron 进程间通信的四种方式（electron线程）

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

使用 ipcMain.on 监听事件

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

构建渲染器进程 UI

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

使用 ipcMain.handle 监听事件

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

构建渲染器进程 UI

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

使用 webContents 模块发送消息

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

构建渲染器进程 UI

返回一个回复

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

Electron与Vue进程通信

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起