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

相关推荐
李剑一几秒前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js
闲云一鹤8 分钟前
Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧?
前端·git·前端工程化
阿虎儿1 小时前
React Context 详解:从入门到性能优化
前端·vue.js·react.js
颜酱1 小时前
理解二叉树最近公共祖先(LCA):从基础到变种解析
javascript·后端·算法
Sailing1 小时前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
FansUnion1 小时前
我如何用 Next.js + Supabase + Cloudflare R2 搭建壁纸销售平台——月成本接近 $0
javascript
喝水的长颈鹿1 小时前
【大白话前端 03】Web 标准与最佳实践
前端
爱泡脚的鸡腿1 小时前
Node.js 拓展
前端·后端
左夕3 小时前
分不清apply,bind,call?看这篇文章就够了
前端·javascript
Zha0Zhun3 小时前
一个使用ViewBinding封装的Dialog
前端