如何通过Web Serial API将Arduino电位器数据传输到JavaScript前端解析

问题原因 #

你收到的Uint8Array是串口传输的原始ASCII编码字节流，Arduino的Serial.println()方法会把电位器数值转换为字符串后，追加回车符（ASCII 13）和换行符（ASCII 10）输出。你示例中的字节[13,10,55,57]对应的文本就是\r\n79，实际电位器数值为79。

实现方案 #

你需要增加一个文本缓冲区处理串口分包问题，每次收到字节后转成文本拼接，按换行符拆分出完整的数值行，再转成整数即可，修改后的JS代码如下：

const button = document.getElementById('button');
// 全局缓冲区，存储未处理完的半行文本
let serialBuffer = '';

button.addEventListener('click', async () => {
  try {
    // 选择串口并打开
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    console.log('串口连接成功');

    while (port.readable) {
      const reader = port.readable.getReader();
      try {
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          
          // 字节转文本拼入缓冲区
          serialBuffer += new TextDecoder().decode(value);
          
          // 按换行符拆分缓冲区
          const lines = serialBuffer.split('\n');
          // 最后一项是不完整的行，留到下次处理
          serialBuffer = lines.pop();
          
          // 遍历所有完整行转数字
          lines.forEach(line => {
            const cleanValue = line.trim();
            if (cleanValue) {
              const sensorValue = parseInt(cleanValue, 10);
              // 此处拿到最终电位器数值，可自行渲染到页面
              console.log('电位器数值：', sensorValue);
            }
          });
        }
      } catch (err) {
        console.error('串口读取错误：', err);
      } finally {
        reader.releaseLock();
      }
    }
  } catch (err) {
    console.error('串口连接失败：', err);
  }
});

注意事项 #

• TextDecoder默认使用UTF-8编码，完全兼容Arduino输出的ASCII字符
• 缓冲区可以解决串口分包问题：有时候单次read()可能只拿到半行数据，拼入缓冲区等待后续字符补齐后再拆分，避免出现半数字乱码
• parseInt指定10作为进制参数，避免特殊字符导致的解析异常
• 目前Web Serial API仅支持Chromium内核浏览器（Chrome、Edge、Opera等），无其他兼容性方案

内容的提问来源于stack exchange，提问作者sophiet