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

相关推荐
WooaiJava1 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
爱喝白开水a1 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
Never_Satisfied1 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌411 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
WeiXiao_Hyy2 小时前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡2 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone2 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09013 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农3 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king3 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落