背景
之前写了一篇Electron通信的方式,讲述了一下三者之间的通信机制,比较恶心,后来发现有个@electron/remote,
Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解-CSDN博客文章浏览阅读58次。remote是个老库,早期Electron版本中有个remote对象,这个对象可以横跨所有进程,随意通信,后来官方认为不安全,被干掉了,之后有人利用Electron的IPC通信,底层通过Promise的await能力,模拟了一个类似的remote对象,即@electron/remote没有当年的remote那么强大,但是也很好用,当然,若觉得自己生命值较长,可以不屑一顾,自己再造轮子。https://blog.csdn.net/wangsenling/article/details/140616875
可以让渲染进程直接访问主进程,但遗憾的是,preload.js无法使用这个库,webview更是不可能直接触达主进程,总要通过preload.js绕一圈才能找到渲染进程。为此,我们需要一个新的方式,来解决所有通信链路的问题。
Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总-CSDN博客文章浏览阅读2.2k次,点赞2次,收藏5次。preload.js 就像插件的 content script 与网页的原生的环境还是隔离的,两个环境的变量互不影响,比如在 preload.js给 window 追加一个函数A,在原生网页中window.A 是 undefined,所以 preload.js 是沙盒环境。实际代码,其中__static就是我们存放静态文件的地方,这个 static 是 electron 源代码根目录下的文件,最终打完包后会放在 dist/electron/ 根目录下。_electron webviewhttps://blog.csdn.net/wangsenling/article/details/133884639
思路
1. 就像vuex的诞生一样,没有vuex的时候,只能通过父子通信,后来层级太多,有了子子孙孙,一层层汇报显得不可能,同理多webview,多子进程,多渲染进程相互之间如何通信,只要有个中转站即可。
2. 上文已经写明,通过websocket对所有节点进行互联,无论你是子进程(用可执行文件创建的子进程,本身可以发送fetch或request请求,甚至有些可以实现websocket连接),渲染进程和webview自然支持websocket,但是需要修改CSP,CSP怎么修改,我们留在后面的内容讲解,https中访问http需要去除安全机制。
具体实现
消息中转websocket服务
1. 主进程实现websocket服务, `"ws": "6.2.2",` 这个版本比较稳,其他版本会报错,这个大致结构已经给了,就是每个接入的client都要带着自己的名字进行握手,一般通过url的path进行获取,不起名字后续无法实现消息中转。
const WebSocket = require('ws')let isBusy = 0
const clients = new Map()function wssInit() {// 创建 WebSocket 服务器const wss = new WebSocket.Server({ port: 59296 })wss.on('listening', () => {console.log('WebSocket Server start')})wss.on('error', (error) => {console.error('WebSocket Server Error:', error.message)// 服务器发生错误时,关闭服务器并重启wss.close(() => {setTimeout(wssInit, 1000) // 设置1秒的延迟,避免过于频繁的重启})})// 当有新的 WebSocket 连接时wss.on('connection', (ws) => {console.log('WebSocket connection established with Webview')const clientId = getClientName()clients.set(clientId, ws)// 监听从 Webview 收到的消息ws.on('message', (message) => {})// 连接关闭时的处理ws.on('close', () => {clients.delete(clientId)console.log('WebSocket connection with Webview closed')});})// 监听服务器关闭事件,并自动重启wss.on('close', () => {console.log('WebSocket Server closed')setTimeout(wssInit, 1000) // 设置1秒的延迟,避免过于频繁的重启})
}
本地数据CURD的Http服务
可以引入Express框架,实现本地化的Http服务,这样所有的客户端都可以直接操作数据库,而不必绕一大堆通信
这样渲染进程就可以访问主进程中的sqlite,且还可以阻塞式请求,相当Nice,通信链路大大降低,开发复杂度大大降低,产出bug率大大降低
未来展望
1. websocket & http 服务可以进行合并为一体,通过python的fastapi框架,可直接打包成一个可执行文件,windows下就是一个大概6M左右的exe文件,直接通过子进程运行,会将大量代码从主进程抽离,来减轻主进程未知异常和内存溢出的问题,说实话Electron做得是真柔弱,一不小心就内存溢出,崩溃给你看,对于纯前端开发,上手容易,深入太难!