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 结尾、固定长度、或自定义帧头帧尾)。
立即学习“Java免费学习笔记(深入)”;
- 示例解码逻辑:
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 不复杂但容易忽略安全模型和用户交互要求,关键在“用户触发 + 显式授权 + 流式处理”。











