当前位置：首页 > news >正文

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

news 2025/7/7 10:25:42

简介

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 技术_森叶的博客-CSDN博客
5. Electron 官方文档

助记解释

MessageChannelMain 可以理解为一个独立的协程队列，提供的两个 port 之间互为对方的管道，port2 发送消息的队列会提取出来发给我 port2，同理 port2 的生产的消息也会发给我 port1，因此你在创建了MessageChannelMain 之后呢就可以开始生产消息了，但是你没 port1.start()时，port1.on("message",() => {}) 是不会被消费的。
上面这个结论就是如果你发多了消息，如果没有及时释放，应该都会存在这个队列里，如果一直不打开 port.start()，理论上内存会一直上涨，不打开 port.start()也是一个 bug 了，但是有可能，比如创建了之后，消费者因为什么原因没启动起来，只有生产者再发，就导致了内存溢出。
MessageChannel 是 HTML5 API 的产物，只适合 Web 环境下的互相通信，不适合 Electon 进程级别的通信，所以 Electron 就搞了一个 MessageChannelMain ，这个可以在任意进程中来去自如。

问题

主进程创建了这个通信桥如何分发给其他各种进程？
1. 渲染进程和工具进程（utility-process）
其他进程如何接收 port？
1. 渲染进程、webview、utility-process（工具进程）
其他进程如何通过 port 收发信息？

渲染进程直接和 webview 标签的 preload.js 通信

深度传递时，要注意 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()
});