Web Serial API允许网页通过浏览器直接与串口设备通信，需用户点击触发连接，使用requestPort选择设备并设置正确波特率（如9600），通过readable流持续读取Uint8Array数据并解码，利用writable流发送格式化指令（如添加换行符），同时监听disconnect事件及捕获异常以应对断连或错误，适用于物联网调试与教育项目。
Web Serial API 让网页可以直接与串口设备（如 Arduino、传感器、单片机等）通信，无需安装额外驱动或客户端软件。它运行在现代浏览器中，主要支持 Chrome 和基于 Chromium 的浏览器（如 Edge）。以下是使用 Web Serial API 与串口设备通信的基本步骤和注意事项。
请求连接串口设备
用户必须主动触发设备选择，不能自动连接。通常通过按钮点击来发起请求：
const button = document.getElementById('connect');
button.addEventListener('click', async () => {
try {
// 请求用户选择一个串口设备
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 }); // 常见波特率：9600, 115200 等
console.log('已连接到设备');
} catch (e) {
console.error('无法连接设备:', e);
}
});
注意：baudRate 必须与设备设置一致，否则通信会失败。
读取串口数据
打开端口后，可以创建一个读取循环来持续接收数据：
async function readSerial(port) {
const reader = port.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) {
reader.releaseLock();
break;
}
// value 是 Uint8Array，转换为文本
const text = new TextDecoder().decode(value);
console.log('收到:', text);
}
}
调用 readSerial(port) 后，即可实时处理从设备发来的数据。常见格式为换行分隔的字符串，可进一步解析。
发送数据到设备
通过 writable 流向设备写入数据：
async function sendSerial(port, message) {
const writer = port.writable.getWriter();
const data = new TextEncoder().encode(message + '\n'); // 添加换行符便于设备识别
await writer.write(data);
writer.releaseLock();
}
// 示例：发送命令
sendSerial(port, 'LED ON');
发送的内容通常需按设备协议格式化，比如添加回车、制表符或特定指令前缀。
处理连接变化和错误
设备可能被拔出或断开，应监听连接状态：
navigator.serial.addEventListener('disconnect', (event) => {
console.log('设备已断开', event.target);
// 可提示用户重新连接
});
同时，在 open() 和读写操作中使用 try-catch 捕获异常，提升稳定性。
基本上就这些。Web Serial API 简化了网页与硬件的交互，适合物联网调试、教育项目或控制面板类应用。只要注意用户手势触发、波特率匹配和数据编解码，就能稳定通信。
