JavaScript 与 硬件交互：利用 WebUSB/WebSerial API 处理二进制协议的状态机设计

各位同仁，大家好。

今天，我们将深入探讨一个令人兴奋且充满挑战的领域：如何利用现代Web技术，特别是WebUSB和WebSerial API，在浏览器环境中与硬件设备进行高效、可靠的交互。我们的核心议题将聚焦于处理二进制协议的复杂性，并提出一种健壮的解决方案——基于状态机的设计模式。

随着物联网（IoT）和边缘计算的兴起，以及浏览器作为通用应用平台的日益成熟，JavaScript与底层硬件的桥梁变得前所未有的重要。过去，这通常是桌面应用或嵌入式系统的专属领域。但现在，通过WebUSB和WebSerial，我们可以在浏览器中直接与各种USB和串口设备对话，打开了无数创新的可能性。

1. WebUSB 与 WebSerial API：Web与硬件的桥梁

WebUSB和WebSerial API是浏览器提供的一组标准接口，允许Web应用通过用户授权访问连接到计算机的USB和串行端口设备。它们提供了一种安全且标准化的方式，弥补了Web应用在硬件交互方面的空白。

1.1 WebUSB API 简介

WebUSB API允许Web应用发现并连接到USB设备。它提供了对USB设备的配置、接口、端点进行操作的能力，可以进行批量传输（bulk transfer）、中断传输（interrupt transfer）和同步传输（isochronous transfer）。

核心概念：

• navigator.usb.requestDevice(): 发现并请求用户授权连接USB设备。
• USBDevice: 代表一个已连接的USB设备。
• open(), close(): 打开和关闭USB设备。
• selectConfiguration(), claimInterface(): 配置设备和声明接口。
• transferIn(), transferOut(): 进行数据传输。

使用场景： 工业控制器、3D打印机、自定义传感器、加密狗等。

1.2 WebSerial API 简介

WebSerial API则专注于串行端口通信，例如通过UART、RS232、RS485等协议连接的设备。它抽象了串行通信的复杂性，提供了更接近文件流的读写接口。

核心概念：

• navigator.serial.requestPort(): 发现并请求用户授权连接串行端口。
• SerialPort: 代表一个已连接的串行端口。
• open(), close(): 打开和关闭串行端口，并设置波特率、数据位、停止位、奇偶校验等参数。
• readable, writable: 异步迭代器（ReadableStream和WritableStream），用于方便地读取和写入数据。

使用场景： 单片机（Arduino, ESP32）、POS机、条码扫描器、GPS模块、调制解调器等。

1.3 安全与权限模型

为了保护用户隐私和系统安全，WebUSB和WebSerial API都遵循严格的权限模型：

• 用户手势触发： requestDevice() 和 requestPort() 必须由用户手势（如点击按钮）触发。
• 用户明确授权： 浏览器会弹出一个设备选择器，用户必须手动选择并授权Web应用访问特定设备。
• HTTPS上下文： 这些API只能在安全的HTTPS上下文中使用。
• 一次性授权： 每次刷新页面或重新连接设备时，通常需要重新授权。

这确保了Web应用无法在用户不知情的情况下随意访问硬件。

1.4 数据类型：ArrayBuffer, Uint8Array, DataView

与硬件交互时，数据通常是二进制的。JavaScript提供了ArrayBuffer、Uint8Array和DataView来高效处理这些二进制数据。

• ArrayBuffer: 一个固定长度的原始二进制数据缓冲区。它不能直接操作，需要视图。
• Uint8Array: 一个8位无符号整数的类型化数组视图，最常用于字节流操作。
• DataView: 提供了在ArrayBuffer中读写任意字节偏移量和数据类型（如Int16, Float32等）的能力，并且可以指定字节序（endianness）。

在WebSerial的readable流中，我们通常会接收到Uint8Array的数据块。

WebSerial 连接与数据接收基础示例：

// main.js
let port;
let reader;
let writer;

async function connectSerialPort() {
    try {
        // 请求用户选择一个串行端口
        port = await navigator.serial.requestPort();

        // 打开端口，配置波特率等参数
        await port.open({ baudRate: 9600 }); // 根据设备需求设置波特率

        console.log('Serial port opened successfully!');

        // 获取可读流和可写流
        reader = port.readable.getReader();
        writer = port.writable.getWriter();

        // 开始持续读取数据
        readLoop();

    } catch (error) {
        console.error('Failed to connect serial port:', error);
    }
}

async function readLoop() {
    while (true) {
        try {
            const { value, done } = await reader.read();
            if (done) {
                console.log('Reader has been closed.');
                break;
            }
            if (value) {
                // value 是一个 Uint8Array，包含从设备接收到的原始字节
                console.log('Received data (bytes):', value);
                // 这里我们将把这些字节送入我们的状态机进行解析
                // processReceivedBytes(value);
            }
        } catch (error) {
            console.error('Error while reading from serial port:', error);
            break;
        }
    }
}

async function sendData(data) {
    if (!writer) {
        console.error('Serial port not connected or writer not available.');
        return;
    }
    const encoder = new TextEncoder(); // 假设发送文本，如果是二进制直接用 Uint8Array
    const dataToSend = encoder.encode(data + 'n'); // 加上换行符，模拟AT指令
    await writer.write(dataToSend);
    console.log('Data sent:', data);
}

// 示例：点击按钮连接端口
document.getElementById('connectButton').addEventListener('click', connectSerialPort);
// 示例：点击按钮发送数据
document.getElementById('sendButton').addEventListener('click', () => sendData('AT+INFO?'));

// HTML 结构：
/*
<button id="connectButton">Connect Serial Port</button>
<button id="sendButton">Send AT+INFO?</button>
*/

2. 二进制协议的挑战

与硬件设备通信，尤其是嵌入式系统，往往采用自定义的二进制协议。这些协议通常是为了效率和资源限制而设计的，与HTTP/JSON等高级文本协议大相径庭。处理二进制协议面临以下挑战：

1. 帧（Framing）问题： 数据不是连续的文本流，而是由一个个独立的“帧”或“包”组成。每个帧有明确的起始、长度、数据内容和结束标记。
2. 异步与分块接收： reader.read() 操作可能不会一次性返回一个完整的帧。它可能返回帧的一部分，或者多个帧拼接在一起，甚至在帧的中间被中断。
3. 变长字段： 帧的长度可能不是固定的，而是由帧中的某个字段指定。
4. 字节序（Endianness）： 多字节数值（如长度、校验和）在内存中的存储顺序（大端或小端）必须与设备端一致。
5. 校验和（Checksum）： 通常包含校验和字段以确保数据完整性。
6. 错误处理： 如何识别损坏的帧、超时、设备无响应等。
7. 命令/响应模式： 许多协议采用请求-响应模式，需要将发送的请求与接收到的响应关联起来。

简单地将接收到的Uint8Array转换为字符串或直接处理，几乎不可能正确解析这些二进制数据。我们需要一个更结构化、更健壮的方法。

3. 状态机：解析二进制协议的利器

状态机（State Machine），也称为有限状态自动机（Finite State Automata, FSA），是一种数学模型，用于描述一个系统在不同状态之间转换的行为。它由以下几个核心元素组成：

• 状态（States）： 系统在某一时刻的特定条件或阶段。
• 事件（Events）： 触发状态转换的外部输入或内部条件。
• 转换（Transitions）： 从一个状态到另一个状态的规则，通常由特定事件触发。
• 动作（Actions）： 在进入、退出某个状态或进行状态转换时执行的操作。

对于二进制协议解析，状态机模型完美契合。我们可以将解析过程分解为一系列离散的步骤（状态），每个步骤等待特定的字节序列（事件），并在接收到这些字节时执行相应的操作（动作），然后转换到下一个状态。

3.1 为什么状态机适合二进制协议？

• 顺序性： 协议通常有固定的解析顺序（例如，先头部，后长度，再数据，最后校验）。状态机自然地体现这种顺序。
• 弹性： 即使数据分块到达，状态机也能记住当前解析进度，并在下一个数据块到达时从上次中断的地方继续。
• 健壮性： 可以清晰地定义在某个状态下接收到意外数据时的处理逻辑（如错误、重置状态）。
• 可维护性： 将复杂的解析逻辑分解为独立的、易于理解和测试的状态处理函数。

3.2 示例二进制协议设计

为了更好地说明状态机的实现，我们先设计一个简单的二进制协议。假设我们的设备用于读取传感器数据或执行一些简单命令。

协议帧结构：

字段名	偏移量	长度（字节）	数据类型	描述
START_BYTE	0	1	Uint8	帧起始标记，固定为 0xAA
COMMAND	1	1	Uint8	命令代码
LENGTH	2	2	Uint16	负载数据长度（不包含头部和校验和），小端序
PAYLOAD	4	LENGTH	Uint8[]	实际的命令参数或响应数据
CHECKSUM	4+LENGTH	1	Uint8	从COMMAND到PAYLOAD最后一个字节的异或校验
END_BYTE	5+LENGTH	1	Uint8	帧结束标记，固定为 0x55

命令代码示例：

命令代码 (COMMAND)	描述
0x01	请求设备信息
0x02	设备信息响应
0x03	请求传感器数据
0x04	传感器数据响应
0xFE	通用错误响应

示例帧（假设请求设备信息，无 payload）：

0xAA 0x01 0x00 0x00 0x01 0x55

• 0xAA: START_BYTE
• 0x01: COMMAND (请求设备信息)
• 0x00 0x00: LENGTH (0，小端序)
• 0x01: CHECKSUM (0x01 ^ 0x00 ^ 0x00 = 0x01)
• 0x55: END_BYTE

3.3 状态机状态定义

根据上述协议，我们可以定义以下解析状态：

• IDLE: 初始状态，等待接收 START_BYTE。
• WAITING_FOR_COMMAND: 接收到 START_BYTE 后，等待接收 COMMAND 字节。
• WAITING_FOR_LENGTH: 接收到 COMMAND 后，等待接收 LENGTH 字段的两个字节。
• READING_PAYLOAD: 接收到 LENGTH 后，根据其值等待接收 PAYLOAD 字节。
• WAITING_FOR_CHECKSUM: 接收到所有 PAYLOAD 字节后，等待接收 CHECKSUM 字节。
• WAITING_FOR_END_BYTE: 接收到 CHECKSUM 后，等待接收 END_BYTE。

任何状态下如果接收到非预期字节，或者校验和不匹配，都应该触发错误并回到 IDLE 状态。

4. 状态机协议解析器实现

现在，我们用JavaScript来实现这个状态机。我们将创建一个ProtocolHandler类，它将管理协议解析的所有逻辑。

// protocolHandler.js

// 定义协议常量
const ProtocolConstants = {
    START_BYTE: 0xAA,
    END_BYTE: 0x55,
    HEADER_LENGTH: 4, // START_BYTE + COMMAND + LENGTH (2 bytes)
    MIN_PACKET_LENGTH: 6 // START_BYTE + COMMAND + LENGTH + CHECKSUM + END_BYTE (min payload length = 0)
};

// 定义协议命令
const ProtocolCommands = {
    REQUEST_DEVICE_INFO: 0x01,
    DEVICE_INFO_RESPONSE: 0x02,
    REQUEST_SENSOR_DATA: 0x03,
    SENSOR_DATA_RESPONSE: 0x04,
    ERROR_RESPONSE: 0xFE
};

// 定义状态
const ProtocolStates = {
    IDLE: 'IDLE',
    WAITING_FOR_COMMAND: 'WAITING_FOR_COMMAND',
    WAITING_FOR_LENGTH: 'WAITING_FOR_LENGTH',
    READING_PAYLOAD: 'READING_PAYLOAD',
    WAITING_FOR_CHECKSUM: 'WAITING_FOR_CHECKSUM',
    WAITING_FOR_END_BYTE: 'WAITING_FOR_END_BYTE'
};

class ProtocolHandler {
    constructor() {
        this.currentState = ProtocolStates.IDLE;
        this.receiveBuffer = []; // 存储当前正在解析的帧的字节
        this.expectedPayloadLength = 0;
        this.currentPayloadBytesRead = 0;
        this.packetHeader = { // 存储已解析的头部信息
            command: null,
            length: null
        };
        this.packetPayload = null; // Uint8Array 存储 payload
        this.calculatedChecksum = 0; // 计算的校验和

        // 事件回调，用于通知外部完整的包或错误
        this.onPacketReceived = null; // (packet) => { ... }
        this.onError = null;         // (errorMsg) => { ... }

        console.log('ProtocolHandler initialized. Current state:', this.currentState);
    }

    /**
     * 核心方法：处理接收到的每个字节
     * @param {number} byte - 接收到的单个字节 (0-255)
     */
    processByte(byte) {
        // console.log(`Processing byte: 0x${byte.toString(16).padStart(2, '0')}, Current State: ${this.currentState}`);

        switch (this.currentState) {
            case ProtocolStates.IDLE:
                if (byte === ProtocolConstants.START_BYTE) {
                    this.receiveBuffer = [byte]; // 清空并开始新的帧
                    this.transitionTo(ProtocolStates.WAITING_FOR_COMMAND);
                } else {
                    // 忽略非起始字节，保持IDLE状态
                    // console.warn('IDLE: Unexpected byte, ignoring:', `0x${byte.toString(16)}`);
                }
                break;

            case ProtocolStates.WAITING_FOR_COMMAND:
                this.receiveBuffer.push(byte);
                this.packetHeader.command = byte;
                this.calculatedChecksum = byte; // 校验和从COMMAND开始计算
                this.transitionTo(ProtocolStates.WAITING_FOR_LENGTH);
                break;

            case ProtocolStates.WAITING_FOR_LENGTH:
                this.receiveBuffer.push(byte);
                this.calculatedChecksum ^= byte;

                // 长度字段是2个字节，小端序
                if (this.receiveBuffer.length === ProtocolConstants.HEADER_LENGTH) {
                    const lengthBytes = this.receiveBuffer.slice(2, 4); // LENGTH是第3、4个字节 (index 2, 3)
                    const dataView = new DataView(new Uint8Array(lengthBytes).buffer);
                    this.expectedPayloadLength = dataView.getUint16(0, true); // true for little-endian

                    this.packetHeader.length = this.expectedPayloadLength;

                    if (this.expectedPayloadLength > 1024) { // 简单地限制一下最大payload长度，防止内存溢出
                        this._emitError('Payload length too large: ' + this.expectedPayloadLength);
                        this._resetState();
                        break;
                    }

                    if (this.expectedPayloadLength === 0) {
                        // 没有payload，直接跳到等待校验和
                        this.packetPayload = new Uint8Array(0);
                        this.transitionTo(ProtocolStates.WAITING_FOR_CHECKSUM);
                    } else {
                        this.currentPayloadBytesRead = 0;
                        this.packetPayload = new Uint8Array(this.expectedPayloadLength);
                        this.transitionTo(ProtocolStates.READING_PAYLOAD);
                    }
                }
                break;

            case ProtocolStates.READING_PAYLOAD:
                this.receiveBuffer.push(byte);
                this.calculatedChecksum ^= byte;
                this.packetPayload[this.currentPayloadBytesRead++] = byte;

                if (this.currentPayloadBytesRead === this.expectedPayloadLength) {
                    this.transitionTo(ProtocolStates.WAITING_FOR_CHECKSUM);
                }
                break;

            case ProtocolStates.WAITING_FOR_CHECKSUM:
                this.receiveBuffer.push(byte);
                const receivedChecksum = byte;

                if (receivedChecksum === this.calculatedChecksum) {
                    this.transitionTo(ProtocolStates.WAITING_FOR_END_BYTE);
                } else {
                    this._emitError(`Checksum mismatch! Expected: 0x${this.calculatedChecksum.toString(16)}, Received: 0x${receivedChecksum.toString(16)}`);
                    this._resetState();
                }
                break;

            case ProtocolStates.WAITING_FOR_END_BYTE:
                if (byte === ProtocolConstants.END_BYTE) {
                    // 完整的包已接收并校验通过
                    const receivedPacket = {
                        command: this.packetHeader.command,
                        length: this.packetHeader.length,
                        payload: this.packetPayload,
                        rawBytes: new Uint8Array(this.receiveBuffer.concat([byte])) // 包含END_BYTE
                    };
                    if (this.onPacketReceived) {
                        this.onPacketReceived(receivedPacket);
                    }
                } else {
                    this._emitError(`End byte mismatch! Expected: 0x${ProtocolConstants.END_BYTE.toString(16)}, Received: 0x${byte.toString(16)}`);
                }
                // 无论成功与否，一个包的解析尝试都结束了
                this._resetState();
                break;

            default:
                this._emitError('Unknown state encountered: ' + this.currentState);
                this._resetState();
                break;
        }
    }

    /**
     * 状态转换辅助方法
     * @param {string} newState - 要转换到的新状态
     */
    transitionTo(newState) {
        // console.log(`Transitioning from ${this.currentState} to ${newState}`);
        this.currentState = newState;
    }

    /**
     * 重置状态机到初始IDLE状态
     * 清空所有临时缓冲区和计数器
     */
    _resetState() {
        this.currentState = ProtocolStates.IDLE;
        this.receiveBuffer = [];
        this.expectedPayloadLength = 0;
        this.currentPayloadBytesRead = 0;
        this.packetHeader = { command: null, length: null };
        this.packetPayload = null;
        this.calculatedChecksum = 0;
        // console.log('State machine reset to IDLE.');
    }

    /**
     * 发送错误通知
     * @param {string} message - 错误信息
     */
    _emitError(message) {
        console.error('Protocol Error:', message);
        if (this.onError) {
            this.onError(message);
        }
    }

    /**
     * 辅助方法：计算校验和 (XOR)
     * @param {Uint8Array} bytes - 需要计算校验和的字节数组
     * @returns {number} 异或校验和
     */
    _calculateChecksum(bytes) {
        let checksum = 0;
        for (let i = 0; i < bytes.length; i++) {
            checksum ^= bytes[i];
        }
        return checksum;
    }

    /**
     * 构建并返回一个完整的协议帧（Uint8Array）用于发送
     * @param {number} command - 命令代码
     * @param {Uint8Array} payload - 负载数据
     * @returns {Uint8Array} - 完整的协议帧
     */
    buildPacket(command, payload = new Uint8Array(0)) {
        const payloadLength = payload.length;
        const buffer = new ArrayBuffer(ProtocolConstants.MIN_PACKET_LENGTH + payloadLength);
        const view = new DataView(buffer);
        const uint8View = new Uint8Array(buffer);

        let offset = 0;
        uint8View[offset++] = ProtocolConstants.START_BYTE; // START_BYTE

        uint8View[offset++] = command; // COMMAND

        view.setUint16(offset, payloadLength, true); // LENGTH (little-endian)
        offset += 2;

        uint8View.set(payload, offset); // PAYLOAD
        offset += payloadLength;

        // 计算校验和：从 COMMAND 到 PAYLOAD 最后一个字节
        const checksumBytes = uint8View.slice(1, offset); // 从COMMAND开始，到payload结束
        const checksum = this._calculateChecksum(checksumBytes);
        uint8View[offset++] = checksum; // CHECKSUM

        uint8View[offset++] = ProtocolConstants.END_BYTE; // END_BYTE

        return uint8View;
    }
}

4.1 协议处理器的集成

现在，我们将ProtocolHandler集成到WebSerial的readLoop中。

// main.js (续)

// ... (port, reader, writer, connectSerialPort, sendData 保持不变)

const protocolHandler = new ProtocolHandler();

// 设置回调函数
protocolHandler.onPacketReceived = (packet) => {
    console.log('--- Full Packet Received ---');
    console.log('Command:', `0x${packet.command.toString(16)}`);
    console.log('Length:', packet.length);
    console.log('Payload:', packet.payload); // Uint8Array
    console.log('Raw Bytes:', packet.rawBytes); // Uint8Array

    // 根据命令类型处理包
    switch (packet.command) {
        case ProtocolCommands.DEVICE_INFO_RESPONSE:
            const decoder = new TextDecoder();
            const info = decoder.decode(packet.payload);
            console.log('Device Info:', info);
            // 更新UI等
            break;
        case ProtocolCommands.SENSOR_DATA_RESPONSE:
            // 假设传感器数据是两个Uint16值
            if (packet.payload.length >= 4) {
                const dataView = new DataView(packet.payload.buffer);
                const sensor1 = dataView.getUint16(0, true); // little-endian
                const sensor2 = dataView.getUint16(2, true); // little-endian
                console.log(`Sensor 1: ${sensor1}, Sensor 2: ${sensor2}`);
            }
            break;
        case ProtocolCommands.ERROR_RESPONSE:
            console.error('Device reported an error:', new TextDecoder().decode(packet.payload));
            break;
        default:
            console.log('Unknown command received.');
    }
};

protocolHandler.onError = (errorMessage) => {
    console.error('Protocol Handler Error:', errorMessage);
    // 可以在UI上显示错误信息
};

// 修改 readLoop，将接收到的字节传递给 protocolHandler
async function readLoop() {
    while (true) {
        try {
            const { value, done } = await reader.read();
            if (done) {
                console.log('Reader has been closed.');
                break;
            }
            if (value) {
                // 将接收到的 Uint8Array 中的每个字节逐一送入状态机
                for (let i = 0; i < value.length; i++) {
                    protocolHandler.processByte(value[i]);
                }
            }
        } catch (error) {
            console.error('Error while reading from serial port:', error);
            // 发生读取错误时，重置状态机可能有助于恢复
            protocolHandler._resetState(); 
            break;
        }
    }
}

/**
 * 发送协议包的函数
 * @param {number} command - 命令代码
 * @param {Uint8Array} payload - 负载数据 (可选)
 */
async function sendProtocolPacket(command, payload = new Uint8Array(0)) {
    if (!writer) {
        console.error('Serial port not connected or writer not available.');
        return;
    }
    const packetToSend = protocolHandler.buildPacket(command, payload);
    console.log('Sending protocol packet:', packetToSend);
    await writer.write(packetToSend);
    console.log('Protocol packet sent.');
}

// 示例：点击按钮连接端口
document.getElementById('connectButton').addEventListener('click', connectSerialPort);

// 示例：点击按钮发送请求设备信息命令
document.getElementById('requestInfoButton').addEventListener('click', () => {
    sendProtocolPacket(ProtocolCommands.REQUEST_DEVICE_INFO);
});

// 示例：发送请求传感器数据命令（假设需要一个参数，例如传感器ID 0x01）
document.getElementById('requestSensorButton').addEventListener('click', () => {
    const sensorId = new Uint8Array([0x01]);
    sendProtocolPacket(ProtocolCommands.REQUEST_SENSOR_DATA, sensorId);
});

// HTML 结构：
/*
<button id="connectButton">Connect Serial Port</button>
<button id="requestInfoButton">Request Device Info</button>
<button id="requestSensorButton">Request Sensor Data</button>
*/

5. 高级考量与优化

上述状态机实现是一个基础但功能完备的协议解析器。在实际应用中，还需要考虑以下高级特性和优化：

5.1 错误恢复与超时处理

• 超时机制： 在某些状态（如WAITING_FOR_COMMAND或READING_PAYLOAD）下，如果长时间没有收到预期的字节，可能意味着设备没有响应或通信中断。可以引入定时器，超时则触发错误并重置状态机。
• 重试逻辑： 对于请求-响应模式，如果特定时间窗口内未收到响应，可以自动重试发送命令。
• 错误码/状态： 协议中可以定义更详细的错误码，帮助诊断问题。

5.2 命令队列与并发控制

如果Web应用需要频繁地向设备发送命令，并且这些命令可能需要时间来处理或返回响应，那么直接发送可能会导致命令错乱或设备过载。

• 命令队列： 使用一个队列来管理待发送的命令。每次只发送队列中的第一个命令，并在收到响应后，再发送下一个。
• 互斥锁： 确保在同一时刻只有一个命令正在等待响应，防止多个异步操作相互干扰。

// 简单命令队列示例
class CommandQueue {
    constructor(sendFunction) {
        this.queue = [];
        this.isProcessing = false;
        this.sendFunction = sendFunction; // 实际发送函数，例如 sendProtocolPacket
    }

    addCommand(command, payload, resolve, reject) {
        this.queue.push({ command, payload, resolve, reject });
        this.processQueue();
    }

    async processQueue() {
        if (this.isProcessing || this.queue.length === 0) {
            return;
        }

        this.isProcessing = true;
        const { command, payload, resolve, reject } = this.queue[0];

        try {
            await this.sendFunction(command, payload);
            // 假设设备会在一定时间内响应，响应处理函数会调用 resolve 或 reject
            // 这里需要与 protocolHandler 的 onPacketReceived 结合
            // onPacketReceived 收到响应后，需要找到对应的 resolve/reject 并调用
            // 然后调用 this.commandCompleted()
        } catch (error) {
            reject(error);
            this.commandCompleted();
        }
    }

    commandCompleted() {
        this.queue.shift(); // 移除已处理的命令
        this.isProcessing = false;
        this.processQueue(); // 继续处理下一个命令
    }

    // 在 protocolHandler.onPacketReceived 中，如果识别到响应包，需要调用此方法
    // 例如：this.commandQueue.commandCompleted();
    // 并且将响应数据传递给等待的 Promise 的 resolve 函数
}

5.3 Web Workers

对于性能敏感的应用，例如需要处理高吞吐量数据或执行复杂计算，可以将协议解析逻辑放到Web Worker中。这可以避免阻塞主线程，保持UI的响应性。

• 主线程： 负责连接设备，将原始Uint8Array数据发送给Worker。
• Worker线程： 运行ProtocolHandler，解析数据，并将解析后的结构化消息发回给主线程。

5.4 性能考量

• 缓冲区管理： 频繁地创建新的Uint8Array和DataView可能会带来性能开销。可以考虑使用更高效的循环缓冲区（Circular Buffer）来存储接收到的字节，减少内存分配和GC压力。
• _resetState() 调用时机： 确保只在完整包解析成功或发生不可恢复的错误时才调用，避免不必要的重置。

5.5 友好的用户界面

• 设备状态指示： 显示连接状态、数据传输状态。
• 日志输出： 实时显示接收和发送的数据（hex格式）、解析结果和错误信息。
• 命令输入： 提供界面让用户方便地发送预设命令或自定义命令。

6. 总结与展望

通过WebUSB和WebSerial API，JavaScript已经能够直接在浏览器中与各种硬件设备进行深度交互。然而，这种交互的复杂性往往在于底层二进制协议的解析。我们通过一个基于状态机的ProtocolHandler类，展示了如何健壮、高效地处理异步、分块的二进制数据流。

状态机模式不仅提供了一种清晰的结构来管理协议解析过程中的各种状态和转换，还使得错误处理和恢复变得更加可控。结合命令队列、Web Workers等高级技术，我们可以构建出功能强大、用户体验流畅的Web硬件交互应用。未来，随着Web平台能力的不断增强，浏览器将成为更多创新硬件应用的首选开发环境。这个领域充满机遇，等待我们去探索和实现。