Web Serial API 技术详解：浏览器如何与串口设备通信

概述

Web Serial API 是现代浏览器提供的一组接口，允许网页直接与计算机连接的串行设备进行通信。这项技术为 Web 应用打开了与硬件设备交互的新可能，特别适合物联网(IoT)、嵌入式系统和工业控制等场景。

核心概念

什么是串行通信

串行通信是一种通过单一线路按顺序传输数据的通信方式，与并行通信相对。它具有连接简单、成本低、适合长距离传输等特点，广泛应用于：

• 微控制器(如Arduino、Raspberry Pi)
• 3D打印机
• 工业控制设备
• 科学仪器
• 传统串口设备

Web Serial API 的定位

Web Serial API 属于 Web 设备 API 系列的一部分，与以下 API 形成互补：

• WebUSB API：处理USB设备通信
• WebHID API：处理人机接口设备
• Web Bluetooth API：处理蓝牙设备

Web Serial API 专注于那些需要通过串行接口通信的设备，无论这些设备是通过物理串口、USB转串口还是蓝牙模拟串口连接的。

主要接口解析

Serial 接口

作为整个API的入口点，通过 navigator.serial 访问，提供以下核心功能：

1. 端口管理：

   • getPorts()：获取已授权访问的端口列表
   • requestPort()：请求访问新端口

2. 事件监听：

   • connect：设备连接时触发
   • disconnect：设备断开时触发

SerialPort 接口

代表单个串行端口连接，提供：

1. 连接控制：

   • open()：打开端口并配置参数(波特率等)
   • close()：关闭端口

2. 数据流处理：

   • readable：可读流接口
   • writable：可写流接口

3. 信号控制：

   • 可控制RTS、DTR等硬件信号线

安全机制

Web Serial API 设计了严格的安全策略：

1. HTTPS 要求：只能在安全上下文(HTTPS)中使用
2. 用户授权：必须通过用户手势(如点击)才能请求端口访问
3. 权限策略：可通过HTTP头控制是否允许使用此API

开发实战

基本使用流程

1. 检测API支持：

   if (!"serial" in navigator) {
     console.error("Web Serial API not supported");
     return;
   }
   

2. 请求端口访问：

   document.querySelector("#connect").addEventListener("click", async () => {
     try {
       const port = await navigator.serial.requestPort();
       // 用户已选择端口
     } catch (err) {
       console.error("用户未选择端口或访问被拒绝");
     }
   });
   

3. 打开并配置端口：

   await port.open({ baudRate: 9600 });
   

4. 数据读写：

   // 写入数据
   const writer = port.writable.getWriter();
   await writer.write(new Uint8Array([0x41, 0x42, 0x43])); // 发送"ABC"
   writer.releaseLock();
   
   // 读取数据
   const reader = port.readable.getReader();
   while (true) {
     const { value, done } = await reader.read();
     if (done) break;
     console.log("收到数据:", value);
   }
   

错误处理最佳实践

async function readUntilClosed(port) {
  while (port.readable) {
    const reader = port.readable.getReader();
    try {
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        // 处理接收到的数据
        processData(value);
      }
    } catch (error) {
      // 处理非致命错误
      console.error("读取错误:", error);
    } finally {
      reader.releaseLock();
    }
  }
  console.log("端口已关闭");
}

应用场景示例

3D打印机控制

async function sendGCode(port, gcode) {
  const writer = port.writable.getWriter();
  const encoder = new TextEncoder();
  for (const line of gcode.split('\n')) {
    const data = encoder.encode(line + '\n');
    await writer.write(data);
    await new Promise(resolve => setTimeout(resolve, 100)); // 行间延迟
  }
  writer.releaseLock();
}

微控制器交互

async function readSensorData(port) {
  await port.open({ baudRate: 115200 });
  
  const reader = port.readable.getReader();
  const decoder = new TextDecoder();
  
  let buffer = '';
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    
    buffer += decoder.decode(value);
    const lines = buffer.split('\n');
    buffer = lines.pop(); // 剩余不完整行保留在buffer中
    
    for (const line of lines) {
      if (line.startsWith('SENSOR:')) {
        updateSensorDisplay(line.substring(7));
      }
    }
  }
}

浏览器兼容性现状

目前Web Serial API主要在现代Chromium内核浏览器(如Chrome、Edge)中实现，其他浏览器厂商正在逐步跟进。开发者使用时应注意：

1. 检查API可用性
2. 提供备用方案或功能降级处理
3. 明确告知用户浏览器兼容要求

性能优化建议

1. 批量处理数据：避免单字节读写
2. 合理设置缓冲区：根据设备特性调整
3. 使用流控制：防止数据溢出
4. 错误恢复机制：自动重连策略

总结

Web Serial API 为Web应用与物理世界交互提供了强大工具，特别适合物联网和教育领域。虽然API目前仍处于实验阶段，但它代表了Web平台向更广泛设备集成方向发展的趋势。开发者可以开始尝试将其应用于原型开发和教育项目中，同时关注规范稳定性和浏览器支持进展。