Electron 工具进程utilityProcess 使用中遇到的坑点汇集

简介

  1. 这是基于 node.js 中的子进程的概念推出来的,可参考链接:utilityProcess | Electron 官网有一句话非常重要,它提供一个相当于 Node.js 的 child_process.fork API,但使用 Chromium 的 Services API 代替来执行子进程。这句话的意思是两者还是有点区别的。更应该当成一个 worker.js 来看到。

  2. 这个工具进程自从 electron:22.0.0 才开始有,老版本是没有的哦!Electron 22.0.0 - 知乎

特点

utilityProcess 是一个轻量级的进程,在开发过程中有些逻辑是针对数据进行判断和处理,所以没有必要创建一个渲染进程,渲染进程会模拟整个浏览器,会耗费很多 cpu 和内存,但是我们却用不到,这时轻量级的工具进程就起到了很大的作用了,例如做一个全局任务调度程序。

难点

主子进程最重要的环节就是两者的通信,官方给了主子通信的方式,同时还给了 MessageChannelMain(Electron 通信桥)的方式,这两种方式基本解决了我们所有问题;

完整代码

main.js

javascript 复制代码
import {utiltyProcess, MessageChannelMain} from 'electron'
const {port1, port2} = new MessageChannelMain()
const child = utilityProcess.fork(path.join(__static, "alarm1.js"))
child.on("spawn", () => {
    child.postMessage({message: 'hello'}, [port1])
})

port2.on("message", (e) => {
    console.log("port receive:", e.data);
    port2.postMessage("I receive your messages:")
})
port2.start()
child.on("message", (e) => {
    console.log("接收到消息了:", e);
})

utility-process.js

javascript 复制代码
console.log('Listening for messages...');
process.parentPort.on('message', (e) => {
    const port = e.ports[0];

    process.parentPort.postMessage({data: "Ready"});
    console.log("I m coming,do you find me?")

    port.on("message", (e) => {
        console.info("why not print it?", e.data)
        setTimeout(() => {
            port.postMessage(`I receive your message:${e.data}`)
        }, 2000)

    });
    port.start();
    port.postMessage({data: "Ready"});
});

注意

  1. utility-process.js 中的 console.log 有时候不能在控制台打印出来,我删掉 node_modules 重新安装,并且全部改为英文之后(没事不要用中文,外国人搞得东西用中文都是坑),又能输出来了,这个有人提过,是个老问题,这里记下来,好像他们也没处理,就放在那里了 [Bug]: output sometimes missing in utility process · Issue #36411 · electron/electron · GitHub

  2. console.info("why not print it?", e.data) 这里没有打印出来,不代表这里没有收到 message,实际上是收到了,setTimeout 那里是可以执行的,很多人被坑,以为这里没办法通信,因为 console.log 没打印出来,以为代码没走到这里

  3. port.start() 这行代码一定要有,最好放在 onmessage 之后,electron 开发者的意思,如果默认开启就会丢失一些消息,只有当你确保 onmessage 配置好了后,再开启消息队列,html5 MessageChannel 中的 port 没有 start 函数这是最大的区别。

相关推荐
じòぴé南冸じょうげん1 小时前
若依框架favicon.ico缓存更新问题解决方案:本地生效但线上未更新
前端·javascript·前端框架·html
狮子座的男孩2 小时前
js基础高级:01、数据类型(typeof、instanceof、===的使用)、数据与变量与内存(定义、赋值与内存关系、引用变量赋值、js调函数传参)
前端·javascript·经验分享·数据类型·数据与变量与内存·赋值与内存关系·引用变量赋值
Cyclo-5 小时前
PDFJS 在React中的引入 使用组件打开文件流PDF
前端·react.js·pdf
椒盐螺丝钉7 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js
顾安r7 小时前
11.20 开源APP
服务器·前端·javascript·python·css3
敲敲了个代码7 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清8 小时前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三8 小时前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
二川bro8 小时前
第57节:Three.js企业级应用架构
开发语言·javascript·架构
天外飞雨道沧桑8 小时前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor