/alloy-worker

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

Primary LanguageTypeScript

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

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

代码示例

以 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 并觉得它不错, 请到 这里 告诉我们.

贡献源码

请查看参与开发.

相关文档

TODO

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

EOF