news 2026/3/10 10:32:40

web worker使用总结(包含多个worker)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
web worker使用总结(包含多个worker)

web worker在项目中使用的整体架构图:

1. websocketWorker - 业务数据上报,及把数据通过事件把数据发给主线程;

2.CommandWorker - 处理复杂、耗时等业务数据,把处理结果通过事件发送给主线程;

3.使用MessageChannel实现websocketWorker和CommandWorker之间的数据传递(websocketWorker收到的数据直接传给CommandWorker);

数据流程图:

## 核心组件说明

### 1. WebSocket Worker (websocketWorker.ts)
- **职责**: WebSocket 连接管理、消息接收解析、心跳检测
- **核心类**: `Websocket`
- **关键功能**:
- TLV 格式消息解析
- 通过 MessagePort 与 Command Worker 通信

### 2. Command Worker (commandWorker.ts)
- **职责**: 业务指令处理、数据模型管理、API 请求
- **核心类**: `CommonWorker`
- **关键功能**:
- 指令类型识别和分发
- 业务数据模型管理
- 多种指令处理器协调

### 3. 指令处理器
- **FuncCommand**: 处理功能按键指令

### 4. 通信机制
- **MessageChannel**: Worker 间通信通道
- **postMessage**: 主线程与 Worker 通信
- **MessagePort**: Worker 间直接通信

## 关键流程说明

### 初始化流程
1. 主线程创建两个 Worker 实例
2. 创建 MessageChannel 建立 Worker 间通信
3. WebSocket Worker 初始化连接
4. Command Worker 初始化配置和指令处理器

### 消息处理流程
1. WebSocket 服务器发送 TLV 格式消息
2. WebSocket Worker 解析消息
3. 根据 tag 类型分发到 Command Worker 或主线程
4. Command Worker 识别指令类型并分发到对应处理器
5. 处理器执行业务逻辑并调用 API
6. 更新数据模型并通知主线程

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/28 11:31:19

年终述职 PPT 工具横评:效率、质量、模板一次看清

又到年终,职场人又要开始为年终述职 PPT 发愁了。熬夜加班改报告是常有的事,内容框架搭建毫无头绪,设计上也没有灵感,好不容易做好了,不同系统打开还容易出现格式乱码问题。面对这些办公痛点,一款好用的 AI…

作者头像 李华
网站建设 2026/3/7 15:21:47

【计算机毕业设计案例】基于springboot旅游门票信息系统设计与实现基于springboot的旅游网站系统的设计与实现(程序+文档+讲解+定制)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/3/8 9:31:40

18、数据库开发技术全面解析

数据库开发技术全面解析 1. 特殊字符与运算符 在数据库操作中,特殊字符和运算符起着关键作用。例如, % 通配符用于模糊匹配, * 字符常用于选择所有列。以下是一些常见特殊字符和运算符的介绍: | 特殊字符/运算符 | 作用 | | ---- | ---- | | % 通配符 | 用于模糊…

作者头像 李华
网站建设 2026/3/6 1:08:37

AI编程智能体工作原理及使用注意事项

AI编程智能体现在可以连续工作数小时处理软件项目,编写完整应用程序、运行测试、修复漏洞,但需要人工监督。这些工具并非万能,有时可能会让软件项目变得更复杂而非简化。了解其底层工作原理有助于开发者判断何时使用这些工具,同时…

作者头像 李华
网站建设 2026/3/9 5:07:05

英伟达斥资200亿美元许可芯片初创公司Groq技术

人工智能芯片初创公司Groq Inc.今天宣布,英伟达公司将以非独家方式许可其技术。此次交易还将看到这家显卡制造商雇佣Groq的几名核心员工,包括创始首席执行官Jonathan Ross和总裁Sunny Madra。Groq投资方Disruptive Technology Advisers的首席执行官Alex …

作者头像 李华