Electron工作流程（2）——进程间通信

概述

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

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

Electron 应用程序的结构非常相似。 作为应用开发者，你将控制两种类型的进程：主进程和渲染器进程。

主进程（Main Process）

是应用的核心，在应用启动时运行，并在整个应用的生命周期中保持活动状态。

• 每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。可以看做是 package.json 中 main 属性对应的文件。
• 一个应用只会有一个主进程。
• 只有主进程可以进行 GUI 的 API 操作，所以渲染进程要操作原生API，需要建立和主进程的通信。

主要功能：

• 创建和管理应用程序窗口
• 管理窗口生命周期
• 使用原生API

渲染进程（Renderer Process）

是应用的用户界面部分，渲染线程运行在 Chromium 内核中，可以像 Web 浏览器一样加载和呈现 HTML、CSS 和 JavaScript。

• 一个应用可以有多个渲染进程。
• Windows 中展示的界面通过渲染进程表现。
• 每个窗口都是一个独立的渲染线程。
• 无法直接操作原生API。

**主要功能：**渲染页面

主进程和渲染进程的通信

1. ipcMain 和 ipcRenderer

主进程和渲染进程分别执行不同的职责，它们之间需要通过进程间通信（IPC）进行数据交换。Electron 提供了 ipcMain 和 ipcRenderer 模块来实现。

• ipcMain：从主进程到渲染进程的异步通信。

  主要作用：

  • 在主进程使用时，处理从渲染进程（网页）发送过来的同步或者异步消息。
  • 从主进程向渲染进程发送消息。

  示例：

  1. 监听 channel, 当新消息到达，将通过 listener(event, args…) 调用 listener。

     **// channel 就是监听的 key ，是渲染进程发送消息设置的 key
     // listener 当监听到消息时的处理方法
     ipcMain.on(channel, listener)**
     

  2. 添加一次性 listener 函数。 这个 listener 只会在 channel下一次收到消息的时候被调用，之后这个监听器会被移除。

     ipcMain.once(channel, listener)

  3. 当一个渲染进程调用 ipcRenderer.invoke(channel, ...args) 时，主进程添加一个处理器处理结果。如果 listener 是一个有返回值的方法，那么 Promise 的最终结果就是远程调用的返回值。

     例如：渲染进程调用一个 invoke ，带返回值。

     async () => {
       const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
       // ...
     }
     

     主进程设置处理器，并接收方法返回值

     ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
       const result = await somePromise(...args)
       return result
     })
     

• ipcRenderer：从渲染器进程到主进程的异步通信。

  主要作用：

  • 从渲染进程（web页面）发送异步或同步的消息到主进程。
  • 接收主进程回复的消息。

  示例：

  1. 监听或取消监听 channel, 当新消息到达，将通过 listener(event, args…) 调用 listener。

     **// channel 就是监听的