Electron 进程通信

最新推荐文章于 2025-06-08 09:47:44 发布

原创

最新推荐文章于 2025-06-08 09:47:44 发布 · 1.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

预加载（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 ⽂件，⽂件内容来⾃于⽤户输⼊。

在页面中添加相关元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-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