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