Electron 企业级开发通信与本地存储实用解决方案

背景

之前写了一篇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做得是真柔弱，一不小心就内存溢出，崩溃给你看，对于纯前端开发，上手容易，深入太难！