简介
-
MessageChannelMain 是 DOM MessageChannel 对象的主进程等价对象。 它的特有功能是创建一对已连接的 MessagePortMain 对象。
-
Electron 本身为了灵活追加 on("message") 机制，就说明该 MessageChannelMain 已经被创建了，而 Web 开发中，是没有这种权限自由开进程，然后再把 port 塞过去的，所以消息不会丢失，但是 Electron 这种操作非常多，所以，要先写好 port.on("message")，再启动 port.start()避免消息丢失，这是和 MessageChannel 一个大区别
-
MessagePortMain 是 DOM MessagePort 对象的主进程等价对象。 它的行为类似于DOM版本，不同的是它使用 Node.js EventEmitter 事件系统，而不是 DOM EventTarget 系统。 这意味着你应该用 port.on('message', ...) 来监听事件, 来代替 port.onmessage = ... 或 port.addEventListener('message', ...)
-
针对 b 能把你坑哭，尤其你不知道 MessageChannel 是啥的人，在了解了之后，第一反应就是 MessageChannel 的案例，结果不运行，是不是很尴尬？这里特别提醒
-
MessageChannel 是什么，请参考HTML5 API 多端通信桥 MessageChannel 技术_森叶的博客-CSDN博客
-
助记解释
-
MessageChannelMain 可以理解为一个独立的协程队列，提供的两个 port 之间互为对方的管道，port2 发送消息的队列会提取出来发给我 port2，同理 port2 的生产的消息也会发给我 port1，因此你在创建了MessageChannelMain 之后呢就可以开始生产消息了，但是你没 port1.start()时，port1.on("message",() => {}) 是不会被消费的。
-
上面这个结论就是如果你发多了消息，如果没有及时释放，应该都会存在这个队列里，如果一直不打开 port.start()，理论上内存会一直上涨，不打开 port.start()也是一个 bug 了，但是有可能，比如创建了之后，消费者因为什么原因没启动起来，只有生产者再发，就导致了内存溢出。
-
MessageChannel 是 HTML5 API 的产物，只适合 Web 环境下的互相通信，不适合 Electon 进程级别的通信，所以 Electron 就搞了一个 MessageChannelMain ，这个可以在任意进程中来去自如。
问题
-
主进程创建了这个通信桥如何分发给其他各种进程？
- 渲染进程和工具进程（utility-process）
-
其他进程如何接收 port？
- 渲染进程、webview、utility-process（工具进程）
-
其他进程如何通过 port 收发信息？
渲染进程直接和 webview 标签的 preload.js 通信
深度传递时，要注意 webview 加载完毕后，再发过去，不然可能导致没收到的尴尬问题
javascript
// 在主进程中
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()
});