Web Serial API 允许现代浏览器（Chrome 89+等）在用户授权下与串口设备通信，需HTTPS/localhost、用户手势触发、手动选择设备，流程为请求端口→打开配置→获取读写流→处理数据，注意粘包解析与异常捕获。

JavaScript 本身不能直接操作串口设备，但现代浏览器（Chrome 89+、Edge 110+、Opera 75+）支持 Web Serial API，允许网页在用户授权下与串口设备通信。它不是纯 JS 底层能力，而是受严格安全限制的异步 Web API。

前提条件和限制

Web Serial API 只能在安全上下文（HTTPS 或 localhost）中使用；必须由用户手势（如点击按钮）触发请求权限；不支持后台运行或自动连接；仅适用于有 USB/UART 转串口芯片（如 CH340、CP2102、FTDI）的设备。

• 需要用户主动点击“连接串口”按钮才能调用 navigator.serial.requestPort()
• 浏览器会弹出设备选择框，用户手动选中目标串口（如 “Arduino Uno”、“USB Serial Port”）
• 不支持 Windows 的 COMx 名称直连，也不支持 Linux 的 /dev/ttyUSB0 字符串匹配

基本连接与读写流程

典型流程是：请求端口 → 打开端口 → 配置参数 → 获取读写流 → 处理数据。

• 获取端口：const port = await navigator.serial.requestPort();
• 打开并配置：await port.open({ baudRate: 9600 });（支持波特率、dataBits、stopBits、parity 等）
• 创建读取流：const reader = port.readable.getReader();，用 reader.read() 循环读取 Uint8Array
• 创建写入流：const writer = port.writable.getWriter();，用 writer.write(new TextEncoder().encode("AT\r\n"))
• 记得关闭：await port.close();，否则下次连接可能失败

处理接收到的数据（推荐方式）

避免阻塞，用 while(true) + await reader.read() 持续监听；用 TextDecoder 将字节转字符串；注意粘包——串口数据无天然分隔，需按协议解析（如以 \n 结尾、固定长度、或自定义帧头帧尾）。

• 示例解码逻辑：const decoder = new TextDecoder(); const { value, done } = await reader.read(); if (!done) console.log(decoder.decode(value));
• 发送字符串前务必编码：new TextEncoder().encode("Hello")，不能直接传字符串
• 读写过程需用 try/catch 捕获断开、权限丢失等异常

兼容性与备选方案

Firefox 和 Safari 目前不支持 Web Serial API；若需跨浏览器支持，可考虑桌面方案：Electron（用 node-serialport）、Tauri（调用系统串口库）或通过本地 HTTP 代理（如用 Python Flask 暴露串口 API，网页 AJAX 通信）。

基本上就这些。Web Serial API 不复杂但容易忽略安全模型和用户交互要求，关键在“用户触发 + 显式授权 + 流式处理”。