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. 更新数据模型并通知主线程