摘要:为了能使不同的进程互相访问资源并进行协调工作,才有了进程间通信。此时,就需要与渲染进程通信了。发消息,渲染进程收消息内部使用来发消息。
前言作者:钟离,酷家乐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进行通信。实现的功能都是一样的。从这个例子中可以发现:
使用ipcMain/ipcRenderer通信,业务逻辑同时存在于主进程和渲染进程的代码中。同时为了通信,会产生非常多的event & event handler。
使用remote通信,渲染进程直接获取主进程模块。而且,使用remote通信不需要使用事件和回调函数,写出来的代码清晰直观。
主进程可以视作为模块提供者,而渲染进程是模块的消费者,渲染进程通过remote来获取主进程的模块,实现业务逻辑。这样做有以下好处:
主进程/渲染进程代码解耦,职责分明,提升可维护性
业务逻辑内聚在渲染进程
减少主进程/渲染进程冗余无用的代码
具体实现介绍了一下前置知识,现在来看看不同情况下,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中的逻辑 // 1、第一步,获取到目标窗口的webContents // 可以根据id,title来找到目标窗口,也可以用其他办法 const targetId = 1; const targetTitle = "目标窗口"; // let targetWindow = allWindows.find(w => w.id === targetId); let targetWindow = allWindows.find(w => w.title === targetTitle); // 2、第二步,使用目标窗口的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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114820.html
摘要:为了能使不同的进程互相访问资源并进行协调工作,才有了进程间通信。此时,就需要与渲染进程通信了。发消息,渲染进程收消息内部使用来发消息。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...
摘要:为了能使不同的进程互相访问资源并进行协调工作,才有了进程间通信。此时,就需要与渲染进程通信了。发消息,渲染进程收消息内部使用来发消息。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...
摘要:系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要:系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要:作者钟离,酷家乐客户端负责人原文地址酷家乐客户端下载地址文章背景在酷家乐客户端在改版成功后,我们积累了许多的宝贵的经验和最佳实践。用户在电脑上安装客户端,实际上会将客户端代码文件持久储存到本机。通常我们会在软件启动时检查更新。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-autoupdate/酷家乐客户端:下载地址...
阅读 3879·2021-10-12 10:12
阅读 2847·2021-09-10 11:18
阅读 3633·2019-08-30 15:54
阅读 2729·2019-08-30 15:53
阅读 604·2019-08-30 13:54
阅读 938·2019-08-30 13:21
阅读 2224·2019-08-30 12:57
阅读 1657·2019-08-30 11:10