Web Serial API实现网页与单片机通信的核心是浏览器安全直连串口：需Chrome/Edge 89+、HTTPS或localhost环境、用户点击授权选择设备（如Arduino）、open配置波特率等参数、用TextEncoder/TextDecoder收发数据，并及时close端口。
用 Web Serial API 实现网页与单片机串口通信，核心是让浏览器安全、可控地读写物理串口。它不依赖插件或后端中转，直接在前端完成连接、配置、收发和解析——但必须满足几个硬性前提，否则连第一步都走不通。
确认运行环境是否达标
这是最容易卡住的环节，不是代码问题，而是环境不满足：
- 浏览器必须是 Chrome 89+ 或 Edge 89+（Chromium 内核），Firefox 和 Safari 暂不支持
- 页面必须运行在安全上下文：线上需 HTTPS；本地开发可直接用 http://localhost:端口（如 http://localhost:3000）
- 操作系统需已识别单片机为串口设备（例如 Arduino 连上后显示为 COM3 / /dev/ttyUSB0），且驱动正常
建立连接：用户主动授权 + 设备选择
Web Serial API 禁止静默访问硬件，所有操作必须由用户手势触发（如点击按钮），且每次首次使用需手动选设备：
- 调用
navigator.serial.requestPort()会弹出系统级设备选择框，用户从中点选目标单片机（如 “Arduino Uno”） - 如想跳过重复选择，可用
navigator.serial.getPorts()获取已授权过的端口列表，但仅限同源页面且用户未清除权限 - 支持通过 USB VID/PID 过滤设备，例如只显示 Arduino：
requestPort({ filters: [{ usbVendorId: 0x2341, usbProductId: 0x0043 }] })
配置与打开串口
连接成功后，需显式打开并设置通信参数，与单片机固件保持一致：
立即学习“前端免费学习笔记（深入）”；
- 常用配置项：
baudRate（如 9600、115200）、dataBits（通常 8）、stopBits（通常 1）、parity（通常 'none'） - 示例：
await port.open({ baudRate: 115200, dataBits: 8, stopBits: 1, parity: 'none' }) - 若单片机发送的是带换行符的文本（如
"TEMP:25.3\n"），后续解析时需按行处理，避免数据粘包
收发数据：流式读写 + 编解码转换
串口数据是原始字节流（Uint8Array），需用 TextEncoder/TextDecoder 转为字符串，再交由业务逻辑处理：
-
发送：用
port.writable.getWriter()获取 writer，传入new TextEncoder().encode("AT+CMD\r\n") -
接收：监听
port.readable，用getReader()持续读取；推荐搭配TextDecoderStream+ 自定义换行分割器（如 LineBreakTransformer），避免半包截断 - 务必在页面卸载或关闭前调用
port.close()，否则可能锁死端口，导致下次无法连接
整个过程不复杂但容易忽略安全上下文和用户交互约束，只要环境对、权限到、参数准，就能稳定收发——单片机端只需按约定波特率输出标准串口数据，无需任何额外适配。
