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

简介

  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 技术_森叶的博客-CSDN博客 

    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(工具进程)

  3. 其他进程如何通过 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()
});

 utility-process 和 MessageChannelMain

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用DeferredResult来设计异步接口

文章目录 DeferredResult 介绍思路Demo搭建1.定义一个抽象的请求体2.定义一个接口返回体3.定义一个接口请求体继承抽象类AsynTaskBaseRequest<T<T>>4.定义seveice类&#xff0c;并声明一个异步方法&#xff08;Async注解&#xff09;5.定义一个返回DeferredResult的…

Chrome浏览器中的vue插件devtools的下载方式(使用Chrome应用商店/科学上网情况下)

目录 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤&#xff1a; 测试阶段&#xff1a; 最近做项目要使用devtools这个vue插件。 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤…

SocketD协议单链接双向RPC模式怎么实现

SocketD是一个基于Socket的通信框架&#xff0c;支持单链接双向RPC模式。在实现单链接双向RPC模式时&#xff0c;需要按照一定的协议进行通信&#xff0c;以下是一个简单的实现示例&#xff1a; 定义通信协议&#xff1a;首先&#xff0c;需要定义客户端和服务端之间的通信协议…

【云原生】Serverless 技术架构分析

一、什么是Serverless? 1、Serverless技术简介 ​ Serverless&#xff08;无服务器架构&#xff09;指的是由开发者实现的服务端逻辑运行在无状态的计算容器中&#xff0c;它由事件触发&#xff0c; 完全被第三方管理&#xff0c;其业务层面的状态则被开发者使用的数据库和存…

基于小程序+spring boot流浪动物救助系统-计算机毕设 附源码12783

小程序spring boot流浪动物救助系统 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;流浪动物救助系统被用…

每日一题——二叉树的遍历

题目 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序&#xff08;中序、后序&#xff09; 遍历。 数据范围&#xff1a;二叉树的节点数量满足 1≤n≤100 &#xff0c;二叉树节点的值满足 1≤val≤100 &#xff0c;树的各节点的值各不相同。 思路 二叉树的前序遍历…

C# 中使用ValueTask优化异步方法

概要 我们在开发过程中&#xff0c;经常使用async的异步方法&#xff0c;但是有些时候&#xff0c;异步的方法中&#xff0c;可能包含一些同步的处理。本文主要介绍通过ValueTask这个struct&#xff0c;优化异步处理的方法性能。 代码及实现 有些时候我们会缓存一些数据在内…

记一次Oracle归档日志异常增长问题的排查过程

Oracle归档日志是Oracle数据库的重要功能&#xff0c;用于将数据库的重做日志文件&#xff08;Redo Log&#xff09;保存到归档日志文件&#xff08;Archive Log&#xff09;中。归档日志的作用是提供数据库的备份和恢复功能&#xff0c;以及支持数据库的持续性和数据完整性。 …

Vue+Element Plus 初始化

1. 初始化 Vue 项目 创建vue3 项目 vue create k8s-platform-fe 2. 引入 Element Plus 安装 element-plus 首先去安装这些依赖包&#xff0c;安装好了将其引入&#xff0c;引入的方式有全局引用和局部引入。其实和组件是一样的&#xff0c;局部引入哪里引入哪里使用。…

接口测试和功能测试的区别

我们分成两个部分来讲&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…

mac安装nvm

如果安装过node&#xff0c;须得卸载 sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/m…

nginx rtmp http_flv直播推流

安装配置nginx yum install epel-release -y sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm yum install ffmpeg ffmpeg-devel -y yum install gcc -y yum install pcre pcre-devel -y yum install openssl open…

Wireshark抓包分析TCP协议:三次握手和四次挥手

01、前言 面试中我们经常会被问到TCP协议的三次握手和四次挥手的过程&#xff0c;为什么总喜欢问这个问题呢&#xff1f; 其实我们平时使用的很多协议都是应用层协议&#xff0c;比如HTTP协议&#xff0c;https协议&#xff0c;DNS协议&#xff0c;FTP协议等&#xff1b;而应…

Google OAuth 2 authorization - Error: redirect_uri_mismatch 400

出现这个问题&#xff0c;一般是因为google授权origin地址和重定向redirect_uri地址没有匹配上。 请仔细检查重定向地址的url中origin部分和授权origin部分是否能够匹配&#xff1a;

kubeadm一键部署K8S流程

-架构设计&#xff1a; k8s部署&#xff1a;&#xff08;masternode1node2&#xff09; master.com:192.168.17.144 node1.com:192.168.17.146 node2.com:192.168.17.148 master上部署&#xff1a; etcd&#xff08;数据库&#xff09;、kube-apiserver、kube-controller-mana…

Android屏幕像素密度

有时需要为视图属性指定大小尺寸值&#xff08;通常以像素为单位&#xff0c;有时也用点、毫米或英寸&#xff09;。一些常见的属性包括文字大小&#xff08;text size&#xff09;、边距&#xff08;margin&#xff09;以及内边距&#xff08;padding&#xff09;。文字大小指…

美容店预约小程序制作教程详解

现在&#xff0c;制作一个专属于美容店的预约小程序不再需要编程经验&#xff0c;通过乔拓云网提供的后台管理系统&#xff0c;你可以轻松地完成整个制作过程。下面&#xff0c;我将为你详细介绍如何DIY一个美容店预约小程序。 首先&#xff0c;登录乔拓云网的后台管理系统&…

html学习5(表单)

1、表单是一个包含表单元素的区域&#xff0c;用于收集用户的输入信息。 2、表单元素是允许用户在表单中输入内容&#xff0c;比如&#xff1a;文本域&#xff08;textarea&#xff09;、下拉列表&#xff08;select&#xff09;、单选框&#xff08;radio-buttons&#xff09…

#rust taur运行报错#

场景:在window11系统上运行 tauri桌面莹应用&#xff0c;提示错误。 Visual Studio 2022 生成工具 安装的sdk11 , rust运行模式是stable-x86_64-pc-window-gnu&#xff0c; 运行npm run tauir dev 一致失败&#xff0c;失败信息如下 原因&#xff1a;1&#xff1a;在window11系…

推理加速 --- torch.compile

推理加速-- torch.compile 一、背景介绍1.2 首次推理速度慢1.3 推理多次之后&#xff0c;又会出现一次速度特别慢的情况&#xff0c;感觉好像是重新优化 二、如何使用三、其他设置3.1 mode 设置3.2 backend3.3 fullgraph3.4 dynamic 参考资料 一、背景介绍 PyTorch 2.0 官宣了…