alloyteam / alloy-worker

面向事务的高可用 Web Worker 通信框架

alloy-worker

面向事务的高可用 Web Worker 通信框架.

腾讯 AlloyTeam 出品, 经受住腾讯文档等大型前端项目的考验.

特点

• 面向事务及命名空间的通信封装, 支持大规模业务的场景.
• Promise 化调用代替跨线程事件监听, 无缝支持 async/await.
• 完整的 Worker 可用性监控指标; 全周期 Worker 错误监控.
• 源码全 TypeScript, 跨线程数据类型一致性校验.
• 跨线程请求和响应的数据流调试.
• 良好支持 IE10+ 浏览器.
• 独立打包的构建支持, 无需自行配置.

业界方案对比

项目	简介	构建打包	底层API封装	跨线程调用申明	可用性监控	易拓展性
worker-loader	Webpack 官方,源码打包能力	✔️	✘	✘	✘	✘
promise-worker	封装基本 API 为 Promise 化通信	✘	✔️	✘	✘	✘
comlink	Chrome 团队, 通信 RPC 封装	✘	✔️	同名函数(基于Proxy)	✘	✘
workerize-loader	社区目前比较完整的方案	✔️	✔️	同名函数(基于AST生成)	✘	✘
alloy-worker	面向事务的高可用 Worker 通信框架	提供构建脚本	通信️控制器	同名函数(基于约定), TS 声明	完整监控指标, 全周期错误监控	命名空间, 事务生成脚本

Demo

• Web Worker 能力测试

• 图像处理 Demo

(图片上右键新窗口打开可查看视频)

代码示例

以 Worker 线程发起跨线程调用到主线程取页面 cookie 为例.

用法

本地调试

$ git clone https://github.com/AlloyTeam/alloy-worker.git
$ git checkout demo
$ npm install && npm run dist
$ npx http-server -c0 ./dist
Available on:
  http://127.0.0.1:8080

打开 http://127.0.0.1:8080 和 http://127.0.0.1:8080/image.html 进行本地调试.

接入

alloy-worker 需要你手动将它融合到你的项目里, 并成为项目源码的一部分. 好在手动也不复杂, 而且不会影响现有业务.

接入步骤, 请查看这里.

使用

alloy-worker 对原始 Web Worker 通信能力进行了 RPC 封装, 约定了 Worker 代码组织方式. 使用 alloy-worker 开发 Worker 侧业务时, 需对齐 alloy-worker 的约定.

约定不复杂, 请查看这里.

使用反馈

如果你的项目使用 alloy-worker 并觉得它不错, 请到 这里 告诉我们.

贡献源码

请查看参与开发.

相关文档

• alloy-worker 接入教程

• alloy-worker 代码约定

• alloy-worker 使用教程

• alloy-worker 技术细节

• Web Worker 文献综述

• 朝花夕拾: Web Worker 大型前端项目实践

TODO

• 兼容 webpack5 构建
• 解决纯 worker 侧代码更新的 hash 问题
• sourcemap 区分不同线程的源码

EOF

alloy-worker's Issues

支持使用Vite编译

愉快地使用 alloy-worker 的公司和网站

如果你的项目使用 alloy-Worker 并觉得它不错, 方便的话请留下公司名或网站信息, 以及应用到的场景, 愉快地交流.

示例:
腾讯文档 + https://docs.qq.com/ + 在线表格函数计算

支持 webpack 5 构建是否完成啦

没有的话就没法直接在 create react app 里用了

接入指南-步骤3复制 Worker 源码失败

1. 下载源码 : 下载 template demo 项目 ; 顺利
2. 安装 alloy-worker: cd template && 安装 alloy-worker ：顺利
3. 复制 Worker 源码 ： 失败
   `$ npx alloy-worker eject
   The syntax of the command is incorrect.
   child_process.js:866
   throw err;
   ^

Error: Command failed: mkdir -p src/
The syntax of the command is incorrect.

at checkExecSyncError (child_process.js:790:11)
at execSync (child_process.js:863:15)
at module.exports (D:\rt\reacat-wp5\node_modules\alloy-worker\src\command\eject-script.js:15:5)
at Object.<anonymous> (D:\rt\reacat-wp5\node_modules\alloy-worker\src\command\index.js:27:5)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {

status: 1,
signal: null,
output: [
null,
Buffer(0) [Uint8Array] [],
Buffer(41) [Uint8Array] [
84, 104, 101, 32, 115, 121, 110, 116, 97,
120, 32, 111, 102, 32, 116, 104, 101, 32,
99, 111, 109, 109, 97, 110, 100, 32, 105,
115, 32, 105, 110, 99, 111, 114, 114, 101,
99, 116, 46, 13, 10
]
],
pid: 22176,
stdout: Buffer(0) [Uint8Array] [],
stderr: Buffer(41) [Uint8Array] [
84, 104, 101, 32, 115, 121, 110, 116, 97,
120, 32, 111, 102, 32, 116, 104, 101, 32,
99, 111, 109, 109, 97, 110, 100, 32, 105,
115, 32, 105, 110, 99, 111, 114, 114, 101,
99, 116, 46, 13, 10
]
}

'pwd' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
child_process.js:866
throw err;
^

Error: Command failed: pwd
'pwd' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

at checkExecSyncError (child_process.js:790:11)
at execSync (child_process.js:863:15)
at Object.<anonymous> (D:\rt\reacat-wp5\node_modules\alloy-worker\src\command\one-script\config.js:13:21)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (D:\rt\reacat-wp5\node_modules\alloy-worker\src\command\one-script\check-name.js:6:16) {

status: 1,
signal: null,
output: [
null,
Buffer(0) [Uint8Array] [],
Buffer(62) [Uint8Array] [
39, 112, 119, 100, 39, 32, 178, 187, 202, 199,
196, 218, 178, 191, 187, 242, 205, 226, 178, 191,
195, 252, 193, 238, 163, 172, 210, 178, 178, 187,
202, 199, 191, 201, 212, 203, 208, 208, 181, 196,
179, 204, 208, 242, 13, 10, 187, 242, 197, 250,
180, 166, 192, 237, 206, 196, 188, 254, 161, 163,
13, 10
]
],
pid: 26848,
stdout: Buffer(0) [Uint8Array] [],
stderr: Buffer(62) [Uint8Array] [
39, 112, 119, 100, 39, 32, 178, 187, 202, 199,
196, 218, 178, 191, 187, 242, 205, 226, 178, 191,
195, 252, 193, 238, 163, 172, 210, 178, 178, 187,
202, 199, 191, 201, 212, 203, 208, 208, 181, 196,
179, 204, 208, 242, 13, 10, 187, 242, 197, 250,
180, 166, 192, 237, 206, 196, 188, 254, 161, 163,
13, 10
]
}
`

我是在template的与src同级的目录下执行 npx alloy-worker eject 命令
node-v : 14.18.0

webpack5

webpack5： 支持有时间节点吗？

how about come with the SharedArrayBuffer

likes this: https://github.com/sinclairzx81/threadbox

错误反馈