Electron开发: Electron 进程通信详解

前言

Electron 中的进程，其实就是计算机中的进程，我们先来看看什么是进程通信。

进程间通信（IPC，Inter-Process Communication），指至少两个进程或线程间传送数据或信号的一些技术或方法

每个进程都有自己的一部分独立的系统资源，彼此是隔离的。为了能使不同的进程互相访问资源并进行协调工作，才有了进程间通信。

一个 Electron 应用有一个主进程和多个渲染进程，渲染进程还可能内嵌多个 webview。两两之间都可能需要进行通信，情况还是比较复杂的。

需要通信的对象

主进程: 使用ipcMain进行通信

渲染进程: 使用ipcRenderer和remote模块进行通信

webview: 一般会禁用 webview 的 node 集成，然后使用 preload 的方式拿到 ipcRenderer 来做进程通信。

// preload.js

const electron = require('electron');

const { ipcRenderer } = electron;

// 把ipcRenderer挂载到window上，webview内部的js可以拿到这个模块
window.ElectronIpcRenderer = ipcRenderer;

ipcRenderer/ipcMain VS remote

主进程和渲染进程通信方式，拧出来单独说一下。先来看一个简单例子的:

点击创建按钮，创建一个新的窗口。点击关闭按钮，关掉这个新窗口。

image.png

左侧代码使用ipcRenderer/ipcMain进行通信，右侧代码使用remote进行通信。实现的功能都是一样的。从这个例子中可以发现：

1. 使用ipcMain/ipcRenderer通信，业务逻辑同时存在于主进程和渲染进程的代码中。同时为了通信，会产生非常多的event & event handler。
2. 使用 remote 通信，渲染进程直接获取主进程模块。而且，使用 remote 通信不需要使用事件和回调函数，写出来的代码清晰直观。

主进程可以视作为模块提供者，而渲染进程是模块的消费者，渲染进程通过 remote 来获取主进程的模块，实现业务逻辑。这样做有以下好处：

1. 主进程/渲染进程代码解耦，职责分明，提升可维护性
2. 业务逻辑内聚在渲染进程
3. 减少主进程/渲染进程冗余无用的代码

具体实现

介绍了一下前置知识，现在来看看不同情况下，Electron 进程通信的实现方法。

主进程和渲染进程通信

主进程发消息、渲染进程收消息：主进程使用窗口的 webContents 发消息，渲染进程内使用 ipcRenderer 收消息

// main.js
const win = new BrowserWindow();
win.load('index.html');
win.webContents.send('hello', {a: 1});

// index.html 中的js
const { ipcRenderer } = require('electron');
ipcRenderer.on('hello', (e, data) => {
    console.log(data); // 打印出 {a: 1}
})

渲染进程发消息、主进程收消息: 渲染进程使用ipcRenderer发消息，主进程使用ipcMain收消息。

// main.js
const { ipcMain } = require('electron');
ipcMain.on('hello', (e, data) => {
    console.log(data); // 打印出 {a: 1}
});

// index.html 中的js
const { ipcRenderer } = require('electron');
ipcRenderer.send('hello', {a: 1});

一般遇到主进程和渲染进程通信的情况，大部分都是渲染进程来需要获取主进程的模块，此时推荐使用remote来做通信。