文章目录

使用Web Serial API在浏览器中实现串口通信

在这里插入图片描述

🌐 我的个人网站：乐乐主题创作室

1. 背景与概述

在现代Web应用中，与硬件设备直接通信的需求日益增长。传统上，浏览器出于安全考虑限制了与本地硬件的交互能力，但W3C推出的Web Serial API打破了这一限制，允许网页应用通过JavaScript与串行端口设备进行通信。

Web Serial API的出现使得以下场景成为可能：

  • 工业控制系统的Web界面
  • 物联网设备的配置工具
  • 嵌入式设备的调试接口
  • 3D打印机控制面板
  • 科学仪器的数据采集

2. Web Serial API简介

Web Serial API是W3C制定的标准，目前处于工作草案阶段，但已被Chrome、Edge等基于Chromium的浏览器实现。它提供了一组JavaScript接口，允许网页安全地与串行设备交互。

2.1 兼容性检查

在使用API前，应先检查浏览器支持情况：

if (!('serial' in navigator)) {
  console.error('Web Serial API is not supported in this browser');
  // 提供备用方案或提示用户更换浏览器
}

2.2 安全限制

出于安全考虑，Web Serial API有以下限制：

  1. 只能通过用户手势（如点击）触发API调用
  2. 需要用户明确选择设备
  3. 仅在安全上下文（HTTPS或localhost）中可用

3. 核心实现步骤

3.1 请求端口访问权限

async function requestPort() {
  try {
    // 请求用户选择串口设备
    const port = await navigator.serial.requestPort();
    console.log('Port selected:', port.getInfo());
    return port;
  } catch (err) {
    console.error('Error selecting port:', err);
    throw err;
  }
}

3.2 打开并配置串口

async function openPort(port, options = {}) {
  try {
    // 默认配置参数
    const defaultOptions = {
      baudRate: 9600,
      dataBits: 8,
      parity: 'none',
      stopBits: 1,
      bufferSize: 255,
      flowControl: 'none'
    };
    
    const mergedOptions = {...defaultOptions, ...options};
    
    // 打开端口
    await port.open(mergedOptions);
    
    console.log('Port opened with options:', mergedOptions);
    return port;
  } catch (err) {
    console.error('Error opening port:', err);
    throw err;
  }
}

3.3 数据读写实现

写入数据
async function writeToPort(port, data) {
  const writer = port.writable.getWriter();
  
  try {
    // 如果数据是字符串，转换为Uint8Array
    if (typeof data === 'string') {
      const encoder = new TextEncoder();
      data = encoder.encode(data);
    }
    
    await writer.write(data);
    console.log('Data written:', data);
  } catch (err) {
    console.error('Write error:', err);
    throw err;
  } finally {
    writer.releaseLock();
  }
}
读取数据
async function readFromPort(port, callback) {
  const reader = port.readable.getReader();
  
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        console.log('Stream closed');
        break;
      }
      
      // 处理接收到的数据
      if (callback) {
        callback(value);
      }
    }
  } catch (err) {
    console.error('Read error:', err);
    throw err;
  } finally {
    reader.releaseLock();
  }
}

3.4 完整通信流程示例

async function serialCommunication() {
  try {
    // 1. 请求端口
    const port = await requestPort();
    
    // 2. 配置并打开端口
    await openPort(port, { baudRate: 115200 });
    
    // 3. 设置数据接收处理器
    readFromPort(port, (data) => {
      // 将接收到的Uint8Array转为字符串
      const decoder = new TextDecoder();
      const text = decoder.decode(data);
      console.log('Received:', text);
      document.getElementById('output').textContent += text;
    });
    
    // 4. 发送数据
    const input = document.getElementById('input').value;
    await writeToPort(port, input + '\n');
    
    // 5. 关闭端口（在适当的时候）
    // await port.close();
  } catch (err) {
    console.error('Communication error:', err);
  }
}

4. 高级功能实现

4.1 错误处理与恢复

async function robustRead(port, callback, maxRetries = 3) {
  let retries = 0;
  
  while (retries < maxRetries) {
    try {
      await readFromPort(port, callback);
      break; // 成功则退出循环
    } catch (err) {
      retries++;
      console.error(`Read attempt ${retries} failed:`, err);
      
      if (retries >= maxRetries) {
        throw new Error(`Max retries (${maxRetries}) exceeded`);
      }
      
      // 等待一段时间后重试
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 尝试重新打开端口
      try {
        await port.close();
        await openPort(port);
      } catch (reopenErr) {
        console.error('Port reopen failed:', reopenErr);
      }
    }
  }
}

4.2 数据帧处理

许多串口协议使用特定帧格式，下面是一个简单的帧处理器实现：

class FrameProcessor {
  constructor() {
    this.buffer = new Uint8Array(0);
    this.frameDelimiter = 0x0A; // 换行符作为帧分隔符
  }
  
  process(data, callback) {
    // 将新数据追加到缓冲区
    const newBuffer = new Uint8Array(this.buffer.length + data.length);
    newBuffer.set(this.buffer);
    newBuffer.set(data, this.buffer.length);
    this.buffer = newBuffer;
    
    // 查找完整帧
    let frameEnd;
    while ((frameEnd = this.buffer.indexOf(this.frameDelimiter)) >= 0) {
      // 提取帧数据（不包括分隔符）
      const frame = this.buffer.slice(0, frameEnd);
      
      // 调用回调处理完整帧
      if (callback) {
        callback(frame);
      }
      
      // 从缓冲区移除已处理的数据
      this.buffer = this.buffer.slice(frameEnd + 1);
    }
  }
}

4.3 性能优化

对于高频数据通信，可以使用以下优化策略：

async function highPerformanceRead(port) {
  // 使用较大的缓冲区
  const bufferSize = 1024 * 8; // 8KB
  const buffer = new Uint8Array(bufferSize);
  let offset = 0;
  
  const reader = port.readable.getReader();
  
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      
      // 检查缓冲区是否有足够空间
      if (offset + value.length > bufferSize) {
        // 处理缓冲区数据
        processData(buffer.slice(0, offset));
        offset = 0;
      }
      
      // 将数据复制到缓冲区
      buffer.set(value, offset);
      offset += value.length;
    }
    
    // 处理剩余数据
    if (offset > 0) {
      processData(buffer.slice(0, offset));
    }
  } finally {
    reader.releaseLock();
  }
}

function processData(data) {
  // 高效处理数据的逻辑
  // 可以使用Web Worker将处理移出主线程
}

5. 实际应用示例：与Arduino通信

5.1 Arduino端代码

void setup() {
  Serial.begin(115200);
  while (!Serial); // 等待串口连接
}

void loop() {
  if (Serial.available() > 0) {
    String input = Serial.readStringUntil('\n');
    input.trim();
    
    // 处理输入
    if (input == "LED_ON") {
      digitalWrite(LED_BUILTIN, HIGH);
      Serial.println("LED is now ON");
    } else if (input == "LED_OFF") {
      digitalWrite(LED_BUILTIN, LOW);
      Serial.println("LED is now OFF");
    } else {
      Serial.print("Echo: ");
      Serial.println(input);
    }
  }
}

5.2 Web端控制界面

<!DOCTYPE html>
<html>
<head>
  <title>Arduino Web Control</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; }
    button { padding: 10px 15px; margin: 5px; }
    #output { border: 1px solid #ccc; min-height: 200px; padding: 10px; }
  </style>
</head>
<body>
  <h1>Arduino Web Control</h1>
  <button id="connect">Connect to Arduino</button>
  <div>
    <button id="ledOn" disabled>LED ON</button>
    <button id="ledOff" disabled>LED OFF</button>
  </div>
  <div>
    <input id="command" type="text" placeholder="Enter command">
    <button id="send" disabled>Send</button>
  </div>
  <div id="output"></div>

  <script>
    let port;
    
    document.getElementById('connect').addEventListener('click', async () => {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 115200 });
        
        document.getElementById('connect').textContent = 'Connected';
        document.getElementById('connect').disabled = true;
        document.getElementById('ledOn').disabled = false;
        document.getElementById('ledOff').disabled = false;
        document.getElementById('send').disabled = false;
        
        // 开始监听数据
        const reader = port.readable.getReader();
        const decoder = new TextDecoder();
        
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          
          const text = decoder.decode(value);
          document.getElementById('output').textContent += text;
          document.getElementById('output').scrollTop = 
            document.getElementById('output').scrollHeight;
        }
      } catch (err) {
        console.error('Error:', err);
        alert('Connection failed: ' + err.message);
      }
    });
    
    async function sendCommand(command) {
      if (!port) return;
      
      const writer = port.writable.getWriter();
      const encoder = new TextEncoder();
      await writer.write(encoder.encode(command + '\n'));
      writer.releaseLock();
    }
    
    document.getElementById('ledOn').addEventListener('click', () => {
      sendCommand('LED_ON');
    });
    
    document.getElementById('ledOff').addEventListener('click', () => {
      sendCommand('LED_OFF');
    });
    
    document.getElementById('send').addEventListener('click', () => {
      const command = document.getElementById('command').value;
      if (command.trim()) {
        sendCommand(command);
        document.getElementById('command').value = '';
      }
    });
    
    document.getElementById('command').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        document.getElementById('send').click();
      }
    });
  </script>
</body>
</html>

6. 调试与故障排除

6.1 常见问题及解决方案

  1. 端口无法打开

    • 检查波特率设置是否与设备匹配
    • 确保没有其他程序占用该端口
    • 验证设备驱动程序是否正确安装

  2. 数据接收不完整

    • 增加缓冲区大小
    • 实现数据帧处理逻辑
    • 检查硬件连接是否稳定

  3. 性能问题

    • 使用更高效的编码/解码方式
    • 将数据处理移入Web Worker
    • 减少DOM操作频率

6.2 调试工具

  • Chrome开发者工具中的navigator.serial对象
  • 使用虚拟串口工具（如com0com）模拟硬件
  • 逻辑分析仪或示波器验证信号完整性

7. 安全最佳实践

  1. 输入验证

    function sanitizeInput(input) {
  // 移除可能有害的字符
  return input.replace(/[^\w\s\-]/gi, '');
}

  2. 权限管理

    • 仅在需要时请求端口访问
    • 提供清晰的权限请求说明

  3. 连接超时

    async function connectWithTimeout(port, options, timeout = 5000) {
  const openPromise = port.open(options);
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Connection timeout')), timeout)
  );
  
  return Promise.race([openPromise, timeoutPromise]);
}

8. 未来发展与替代方案

Web Serial API仍在发展中，以下是一些相关技术和替代方案：

  1. WebUSB API - 用于直接USB设备通信
  2. Web Bluetooth API - 用于蓝牙设备通信
  3. WebHID API - 用于人机接口设备
  4. Node.js串口库 - 对于桌面应用，可使用serialport等库

9. 结论

Web Serial API为浏览器与硬件设备的交互开辟了新途径，使得基于Web的工业控制、物联网和嵌入式系统开发成为可能。通过本文介绍的技术实现和最佳实践，开发者可以构建稳定、高效的串口通信Web应用。

随着Web能力的不断扩展，浏览器正逐渐成为连接物理世界和数字世界的桥梁，而Web Serial API正是这一趋势中的重要组成部分。


🌟 希望这篇指南对你有所帮助！如有问题，欢迎提出 🌟

🌟 如果我的博客对你有帮助、如果你喜欢我的博客内容! 🌟

🌟 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！🌟

📅 以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

Logo
AI硬件创业社区

智能硬件社区聚焦AI智能硬件技术生态，汇聚嵌入式AI、物联网硬件开发者，打造交流分享平台，同步全国赛事资讯、开展 OPC 核心人才招募，助力技术落地与开发者成长。

更多推荐

cover

全向麦阵列 vs 波束成形：会议硬件降噪的工程取舍

avatar AI硬件创业社区
cover

GD32替代STM32跑语音方案：Pin兼容背后的中断抖动实测与补偿策略

avatar AI硬件创业社区
cover

投影仪自动对焦方案：ToF 辅助 vs 传统图像分析，谁更适合小批量试产？

avatar AI硬件创业社区