Electron 多端通信桥 MessageChannelMain和 MessagePortMain 坑点汇集

 注意：该通信方式 Electron 版本要≥22.0.0，低于该版本还没有此功能

简介

1. MessageChannelMain 是 DOM MessageChannel 对象的主进程等价对象。 它的特有功能是创建一对已连接的 MessagePortMain 对象。

   1. Electron 本身为了灵活追加 on("message") 机制，就说明该 MessageChannelMain 已经被创建了，而 Web 开发中，是没有这种权限自由开进程，然后再把 port 塞过去的，所以消息不会丢失，但是 Electron 这种操作非常多，所以，要先写好 port.on("message")，再启动 port.start()避免消息丢失，这是和 MessageChannel 一个大区别

   2. MessagePortMain 是 DOM MessagePort 对象的主进程等价对象。 它的行为类似于DOM版本，不同的是它使用 Node.js EventEmitter 事件系统，而不是 DOM EventTarget 系统。 这意味着你应该用 port.on('message', ...) 来监听事件, 来代替 port.onmessage = ... 或 port.addEventListener('message', ...)

   3. 针对 b 能把你坑哭，尤其你不知道 MessageChannel 是啥的人，在了解了之后，第一反应就是 MessageChannel 的案例，结果不运行，是不是很尴尬？这里特别提醒

   4. MessageChannel 是什么，请参考HTML5 API 多端通信桥 MessageChannel 技术_森叶的博客-优快云博客 

   5. Electron 官方文档

助记解释

1. MessageChannelMain 可以理解为一个独立的协程队列，提供的两个 port 之间互为对方的管道，port2 发送消息的队列会提取出来发给我 port2，同理 port2 的生产的消息也会发给我 port1，因此你在创建了MessageChannelMain 之后呢就可以开始生产消息了，但是你没 port1.start()时，port1.on("message",() => {}) 是不会被消费的。

2. 上面这个结论就是如果你发多了消息，如果没有及时释放，应该都会存在这个队列里，如果一直不打开 port.start()，理论上内存会一直上涨，不打开 port.start()也是一个 bug 了，但是有可能，比如创建了之后，消费者因为什么原因没启动起来，只有生产者再发，就导致了内存溢出。

3. MessageChannel 是 HTML5 API 的产物，只适合 Web 环境下的互相通信，不适合 Electon 进程级别的通信，所以 Electron 就搞了一个 MessageChannelMain ，这个可以在任意进程中来去自如。

问题

1. 主进程创建了这个通信桥如何分发给其他各种进程？

   1. 渲染进程和工具进程（utility-process）

2. 其他进程如何接收 port？

   1. 渲染进程、webview、utility-process（工具进程）

   2. 补充：MessageChannelMain 可以在渲染进程中进行传递，通过 ipcRender.send函数发送，但是 webview.send('channel', port); 是行不通的，提示 port 为复杂对象，在renderer 和 webview 之间无法实现拷贝

3. 其他进程如何通过 port 收发信息？

渲染进程直接和 webview 标签的 preload.js 通信（该方案行不通，会只能在渲染进程和工具进程间随意传递）

深度传递时，要注意 webview 加载完毕后，再发过去，不然可能导致没收到的尴尬问题

webview.send('channel', port); 是行不通的，提示 port 为复杂对象，在renderer 和 webview 之间无法实现拷贝；

完美解决方案：

利用主进程启动 Websocket 服务，直连所有渲染进程和 webview，实现端对端的消息互联互通，具体细节，请看我另外一篇文档

// 在主进程中
const { MessageChannelMain } = require('electron');

const channel = new MessageChannelMain();

// 这里意味着可以做一个定时轮询数据库操作 等到 webview 完成加载后再发过去
senderWebContents.once('did-finish-load', () => {
  senderWebContents.postMessage('channel', null, [channel.port1]);
});

containerWebContents.once('did-finish-load', () => {
  containerWebContents.postMessage('channel', null, [channel.port2]);
});

// 在sender渲染进程中
const { ipcRenderer } = require('electron');

ipcRenderer.on('channel', (event, ports) => {
  const port = ports[0];
  port.postMessage('Hello from sender!');
  port.on("message", (e) => {
    console.log("sender renderer receive message:", e.data);
  })
  //下面这个绝不能少
  port.start();
});

// 在container渲染进程中
const { ipcRenderer } = require('electron');

ipcRenderer.on('channel', (event, ports) => {
  const port = ports[0];
  const webview = document.querySelector('webview');
  webview.send('channel', port);
});

// 在webview的preload.js中
const { ipcRenderer } = require('electron');

ipcRenderer.on('channel', (event, port) => {
  port.on('message', (event) => {
    console.log(event.data);  // 打印 "Hello from sender!"
  });
  // 下面这个绝不能少
  port.start()
});

 utility-process 和 MessageChannelMain

Electron 工具进程utilityProcess 使用中遇到的坑点解决方案_森叶的博客-优快云博客