【Electron】酷家乐客户端开发实践分享 — 进程通讯

做者：钟离，酷家乐PC客户端负责人
原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/
酷家乐客户端：下载地址 https://www.kujiale.com/activity/136
文章背景：在酷家乐客户端在V12改版成功后，咱们积累了许多的宝贵的经验和最佳实践。前端社区里关于Electron知识相对较少，所以但愿将这些内容以系列文章的形式分享出来。
系列文章：

• 【Electron】酷家乐客户端开发实践分享 — 入坑篇
• 【Electron】酷家乐客户端开发实践分享 — 软件自动更新
• 【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端
• 【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

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

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

左侧代码使用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来作通讯。

// main.js
// 主进程无需添加任何代码

// index.html 中的js，获取主进程模块
const { remote } = require('electron');
const {app, BrowserWindow, dialog, ...} = remote;

渲染进程与渲染进程通讯

渲染进程之间也是会频繁通讯的，具体场景举例：在设置窗口点击更换皮肤，须要通知全部窗口进行颜色、背景的更新。

最佳实践：渲染进程A经过remote模块，获取到须要目标窗口的webContents对象，而后经过webContents向目标窗口的发送消息。目标窗口使用ipcRenderer监听事件。

const { remote } = require('electron')
const allWindows = remote.BrowserWindow.getAllWindows();

// 窗口A中的逻辑

// 一、第一步，获取到目标窗口的webContents
// 能够根据id，title来找到目标窗口，也能够用其余办法
const targetId = 1;
const targetTitle = '目标窗口';
// let targetWindow = allWindows.find(w => w.id === targetId);
let targetWindow = allWindows.find(w => w.title === targetTitle);

// 二、第二步，使用目标窗口的webContents发送消息
targetWindow.webContents.send('theme-change', 'gray');


// 目标窗口内的逻辑，使用ipcRenderer监听事件
// 窗口收到theme-change事件，改变窗口颜色。不须要关注事件从哪里发出，只须要关注接收到该事件后作什么
ipcRenderer.on('theme-change', (e, theme) => {
    console.log(theme); // gray
});

还有一种传统的办法，不用remote，改用ipcMain作通讯，可是会在主进程冗余不少事件代码。所以仍是推荐使用remote，理由同上。小例子:

// mian.js 
// 用于事件转发，没有实际的逻辑
ipcMain.on('send-event-to-window', (e, id, eventName, ...args) => {
    BrowserWindow.getAllWindows()
    .find(w = > w.id === id)
    .webContents
    .send(eventName, ...args);
});

// 窗口A内部，向主进程发事件
const targetId = 1;
ipcRenderer.send('send-event-to-window', id, 'theme-change', 'gray');

// 目标窗口
ipcRenderer.on('theme-change', (e, theme) => {
    console.log(theme); // gray
});

webview与渲染进程通讯

内嵌的web页面运行在客户端中，也能够获取本地化的能力。此时，webview就须要与渲染进程通讯了。

在文章开头讲到了，为了应用的安全性webview是须要禁用node集成的，经过preload的方式，注入了一个ipcRenderer并挂载到window上。

webview发消息，渲染进程收消息：webview内部使用ipcRenderer.sendToHost来发消息。渲染进程获取到webview的dom元素，监听dom元素的ipc-message事件接收消息

// 渲染进程拿到webview的dom，接收事件
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel); // hello
});

// webview页面内，伪装点了一个按钮，发送事件
btn.onclick = () => {
    window.ElectronIpcRenderer.sendToHost('hello')
}

渲染进程发消息，webview收消息：渲染进程使用webview.send发消息。webview使用内置的ipcRenderer收消息。

// webview内部
window.ElectronIpcRenderer.on('event-from-renderer', (e, data) => {
    console.log(e, data); // {a: 1}
});

// 渲染进程内部
const webview = document.querySelector('webview')
webview.send('event-from-renderer', {a: 1})

总结

这三种通讯方式是最基础的，在此之上进行排列组合也是很常见的，这个由开发者自行拓展便可。

举一个小例子：webview内部触发更换皮肤功能 -> 通知渲染进程同步更新皮肤 -> 渲染进程收到消息，向其余渲染进程通讯 -> 同步更新皮肤完成。

最后

欢迎你们在评论区讨论，技术交流 & 内推 -> zhongli@qunhemail.com