Web Serial API 读取串口数据需用户点击触发、匹配硬件参数、用 readable.getReader() 持续监听并按协议拆包，否则易丢数错码。

JavaScript 浏览器中用 Web Serial API 读取串口数据，核心不是“能不能读”，而是“怎么稳定、不丢、不错地读”。它不像 fetch 那样一次拿回完整字符串，串口数据是流式、分片、无边界的字节流，必须主动构建读取循环并按协议拆包。

必须由用户点击触发，不能自动启动

安全模型决定了任何读取动作都得从一次明确的手势开始：

• 页面加载完不能立刻 requestPort()，必须等用户点击“连接设备”按钮
• 调用 navigator.serial.requestPort() 后，浏览器会弹出原生设备选择框（无法样式定制），用户手动选中目标设备（如 “CP2102 USB to UART Bridge”）
• 选中后返回一个 SerialPort 实例，但此时端口尚未打开，还不能读

打开端口并配置参数要匹配硬件

拿到 port 后需显式 open，并传入与设备一致的通信参数：

• baudRate 是关键，常见值如 9600、115200；错配会导致乱码或无响应
• dataBits 默认为 8，stopBits 常为 1，parity 一般为 'none'，flowControl 通常设为 'none'
• 示例：await port.open({ baudRate: 115200, dataBits: 8, stopBits: 1, parity: 'none' })

用 readable.getReader() 持续监听，别用一次性 read()

串口数据是持续到达的，必须建立长期读取循环，推荐写法：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

• 获取读取器：const reader = port.readable.getReader()
• 用 while(true) + await reader.read() 轮询，每次返回 { value: Uint8Array, done: boolean }
• value 是原始字节，需用 TextDecoder 转成字符串（如 new TextDecoder().decode(value)）
• done 为 true 表示流关闭，应退出循环并调用 reader.releaseLock()

处理粘包：自己定义数据边界

串口没有消息头尾概念，连续发 “ABC\nDEF\n” 可能被分两次读成 [A,B,C,\n] 和 [D,E,F,\n]，也可能一次读到 [A,B,C,\n,D,E,F,\n]。必须按协议解析：

• 按换行符分割：buffer += decoded; const lines = buffer.split('\n'); buffer = lines.pop() || '';
• 按固定长度截取：若设备每帧发 16 字节，就缓存直到够长再处理
• 按自定义帧结构：如以 0x02 开头、0x03 结尾，需在字节流里搜索起止标记
• 避免直接对每次 read() 结果做业务逻辑，先攒、再切、再解析

不复杂但容易忽略——读取本身几行代码就能跑通，真正决定成败的是权限触发时机、参数一致性、流式处理逻辑和协议适配这四点。