WebSerialAPI串口通信入门教程

**Web Serial API串口通信教程：浏览器直连硬件，轻松实现物联网调试** 想让网页直接与Arduino、传感器等串口设备通信，无需安装驱动？Web Serial API助你实现！本教程详细讲解如何利用Web Serial API，通过浏览器直接与串口设备进行通信。首先，用户需点击触发连接，使用`requestPort`选择设备并设置波特率（如9600）。其次，通过`readable`流持续读取`Uint8Array`数据并解码，利用`writable`流发送格式化指令（如添加换行符）。同时，务必监听`disconnect`事件及捕获异常，应对断连或错误。Web Serial API简化了网页与硬件的交互，广泛应用于物联网调试、教育项目等领域。掌握用户手势触发、波特率匹配和数据编解码等关键点，即可实现稳定通信。

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 简化了网页与硬件的交互，适合物联网调试、教育项目或控制面板类应用。只要注意用户手势触发、波特率匹配和数据编解码，就能稳定通信。

文中关于浏览器,硬件,串口通信,WebSerialAPI,物联网调试的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WebSerialAPI串口通信入门教程》文章吧，也可关注golang学习网公众号了解相关技术文章。