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 函数这是最大的区别。

相关推荐
counterxing2 小时前
我整理了一个免费开发资源目录,还做成了 CLI 和 MCP
前端·agent·ai编程
子兮曰9 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun
kyriewen10 小时前
今天,百年巨头一次砍了9200人,而一个离职科学家的实话让全网睡不着觉
前端·openai·ai编程
问心无愧051310 小时前
ctf show web 入门42
android·前端·android studio
kyriewen11 小时前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm
Beginner x_u11 小时前
前端八股整理(手写 02)|数组转树、数组扁平化、随机打乱一个数组
前端·数组·数组转树·数组扁平化
KaMeidebaby11 小时前
卡梅德生物技术快报|禽类成纤维细胞 FISH 实验:鸟类性别染色体基因定位技术实现与数据验证
前端·数据库·其他·百度·新浪微博
天若有情67311 小时前
前端高阶性能优化:跳出传统懒加载与预加载,基于用户行为做轻量预判加载
前端·性能优化
小小小小宇11 小时前
前端转后端:SQL 是什么
前端
张元清12 小时前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试