前端 Web 串口流量控制：掌握串口通信管理

Web 串口 API 为 Web 应用程序打开了无限可能，使它们能够通过串口与硬件设备直接通信。这对于与微控制器（如 Arduino 或 ESP32）、科学仪器、工业设备和其他嵌入式系统交互的应用程序尤其有用。然而，可靠地管理串口通信，特别是考虑到不同的设备功能和网络条件，需要仔细注意流量控制。

了解串口通信基础知识

在深入研究流量控制之前，让我们回顾一下串口通信的基础知识：

• 串口：一种物理接口（通常是 USB 转串口），允许设备一次一位地传输数据。
• 波特率：数据传输速率（每秒比特数）。两个设备必须就此速率达成一致。常见的波特率包括 9600、115200 等。
• 数据位：用于表示单个字符的比特数（通常为 7 或 8）。
• 奇偶校验：一种错误检测方法。可以是奇数、偶数或无。
• 停止位：用于指示字符结束的比特（通常为 1 或 2）。

Web 串口 API 提供了 JavaScript 接口，用于在浏览器环境中配置和管理这些串口设置。

为什么需要流量控制？

流量控制机制对于防止数据丢失和确保 Web 应用程序与连接设备之间的可靠通信至关重要。由于以下原因可能出现问题：

• 设备缓冲区溢出：设备接收数据的速度可能快于其处理数据的速度，从而导致数据丢失。
• 网络延迟：在 Web 应用程序通过网络（例如，串口转网络转换器）与设备通信的情况下，网络延迟可能导致数据传输延迟。
• 可变处理速度：Web 应用程序的处理速度可能因浏览器、用户的计算机和其他运行脚本而异。

如果没有流量控制，这些问题可能导致数据损坏或通信失败，从而严重影响用户体验。

串口流量控制的类型

串口通信中使用两种主要的流量控制类型：

1. 硬件流量控制 (RTS/CTS)

硬件流量控制使用专用的硬件线路（RTS - 请求发送，CTS - 允许发送）来指示设备何时准备好接收数据。

• RTS (请求发送)：由发送设备断言，以指示它有数据要发送。
• CTS (允许发送)：由接收设备断言，以指示它已准备好接收数据。

发送设备仅在 CTS 线路被断言时才发送数据。这提供了一种可靠的、基于硬件的机制来防止缓冲区溢出。在 Web 串口 API 中，您可以在端口配置期间启用硬件流量控制：

            
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200, flowControl: "hardware" });

            

              
                Copy
              
            
          

优点：

• 高度可靠。
• 硬件级实现通常更快、更高效。

缺点：

• 需要专用的硬件线路，并非所有设备都可用。
• 可能增加物理连接的复杂性。

示例：想象一下一个控制 CNC 机器的 Web 应用程序。CNC 机器可能有一个有限的缓冲区。硬件流量控制确保 Web 应用程序仅在 CNC 机器准备好处理命令时才发送命令，从而防止数据丢失并确保操作准确。

2. 软件流量控制 (XON/XOFF)

软件流量控制使用特殊字符 (XON - 发送开启，XOFF - 发送关闭) 来指示设备何时准备好接收数据。这些字符在数据流本身内传输。

• XOFF (发送关闭)：由接收设备发送，以告诉发送设备停止发送数据。
• XON (发送开启)：由接收设备发送，以告诉发送设备恢复发送数据。

Web 串口 API 不直接通过配置选项支持 XON/XOFF 流量控制。实现它需要在您的 JavaScript 代码中手动处理 XON 和 XOFF 字符。

优点：

• 可用于没有专用硬件流量控制线路的设备。
• 更简单的硬件设置。

缺点：

• 不如硬件流量控制可靠，因为 XON/XOFF 字符本身可能会丢失或损坏。
• 如果 XON/XOFF 字符也用于其他目的，则可能会干扰数据流。
• 需要更复杂的软件实现。

示例：考虑一个将数据传输到 Web 应用程序的传感器。如果 Web 应用程序的处理负载增加，它可以向传感器发送一个 XOFF 字符，以暂时暂停数据传输。一旦处理负载降低，Web 应用程序将发送一个 XON 字符以恢复数据传输。这确保了 Web 应用程序不会因过载而错过任何数据点。

使用 Web 串口 API 实现软件流量控制

由于 Web 串口 API 没有内置的 XON/XOFF 支持，因此您需要手动实现它。这是一种基本方法：

1. 定义 XON 和 XOFF 字符：定义您将用于 XON 和 XOFF 的特定字符。这些通常是 ASCII 控制字符（例如，XON 为 0x11，XOFF 为 0x13）。
2. 实现数据缓冲区：在您的 JavaScript 代码中创建一个缓冲区来存储传入数据。
3. 监视缓冲区大小：定期检查缓冲区的大小。
4. 当缓冲区接近满时发送 XOFF：当缓冲区达到一定阈值时，向设备发送 XOFF 字符以暂停传输。
5. 当缓冲区有空间时发送 XON：当缓冲区有足够空间时，向设备发送 XON 字符以恢复传输。
6. 处理传入数据流中的 XON/XOFF 字符：在处理接收到的数据之前，从接收到的数据中过滤掉 XON/XOFF 字符。

以下是您可能实现此操作的简化示例：

            
const XON = 0x11;
const XOFF = 0x13;
const BUFFER_SIZE = 1024;
const BUFFER_THRESHOLD = 800;

let dataBuffer = [];
let isTransmitting = true;

async function readSerialData(reader, writer) {
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        console.log("Reader done!");
        break;
      }

      // Convert Uint8Array to string
      const receivedString = new TextDecoder().decode(value);

      // Filter out XON/XOFF characters (if present in the received string)
      const filteredString = receivedString.replace(/\u0011/g, '').replace(/\u0013/g, '');

      // Add data to buffer
      dataBuffer.push(filteredString);

      // Check buffer size
      if (dataBuffer.join('').length > BUFFER_THRESHOLD && isTransmitting) {
        console.log("Sending XOFF");
        const encoder = new TextEncoder();
        await writer.write(encoder.encode(String.fromCharCode(XOFF)));
        isTransmitting = false;
      }

      // Process data (example: log to console)
      console.log("Received:", filteredString);

      // Example: Clear the buffer and resume transmission after processing
      if (dataBuffer.join('').length < BUFFER_THRESHOLD / 2 && !isTransmitting) {
        console.log("Sending XON");
        const encoder = new TextEncoder();
        await writer.write(encoder.encode(String.fromCharCode(XON)));
        isTransmitting = true;
        dataBuffer = []; // Clear the buffer after processing
      }
    }
  } catch (error) {
    console.error("Serial read error:", error);
  } finally {
    reader.releaseLock();
  }
}

async function writeSerialData(writer, data) {
  const encoder = new TextEncoder();
  await writer.write(encoder.encode(data));
  await writer.close();
}

async function openSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 115200 });

    const reader = port.readable.getReader();
    const writer = port.writable.getWriter();

    readSerialData(reader, writer);

  } catch (error) {
    console.error("Serial port error:", error);
  }
}

// Example usage:
openSerialPort();

            

              
                Copy
              
            
          

XON/XOFF 的重要注意事项：

• XON/XOFF 字符的选择：选择不太可能出现在正常数据流中的字符。
• 错误处理：实现错误处理以处理丢失或损坏的 XON/XOFF 字符。这可能涉及超时和重传策略。
• 时序：发送 XON/XOFF 字符的时序至关重要。在缓冲区完全填满之前发送 XOFF，并在有足够空间时发送 XON。
• 设备支持：确保您与之通信的设备实际上支持 XON/XOFF 流量控制并使用相同的 XON/XOFF 字符。

Web 串口流量控制的最佳实践

以下是在 Web 应用程序中实现串口通信和流量控制的一些常规最佳实践：

• 在可用时使用硬件流量控制：硬件流量控制 (RTS/CTS) 通常比软件流量控制 (XON/XOFF) 更可靠、更高效。尽可能使用它。
• 了解设备功能：仔细阅读您与之通信的设备的文档，以了解其流量控制功能和要求。
• 实现错误处理：强大的错误处理对于处理通信故障、数据损坏和其他意外事件至关重要。
• 使用异步操作：Web 串口 API 是异步的，因此始终使用 `async/await` 或 Promises 来处理串口通信操作。这可以防止阻塞主线程，并确保响应迅速的用户界面。
• 彻底测试：使用不同的设备、网络条件和浏览器版本彻底测试您的串口通信实现，以确保可靠性。
• 考虑数据编码：选择适当的数据编码格式（例如，UTF-8、ASCII），并确保 Web 应用程序和设备都使用相同的编码。
• 优雅地处理断开连接：实现逻辑以优雅地检测和处理断开连接。这可能涉及向用户显示错误消息，并尝试重新连接到设备。
• 注意安全性：注意将串口暴露给 Web 应用程序的安全性影响。对从设备接收到的任何数据进行清理，以防止跨站点脚本 (XSS) 漏洞。仅连接到受信任的设备。

全球化考量

在开发通过串口与硬件设备交互的 Web 应用程序时，考虑以下全球因素至关重要：

• 国际化 (i18n)：设计您的应用程序以支持不同的语言和字符集。对数据传输和显示使用 Unicode 编码 (UTF-8)。
• 本地化 (l10n)：使您的应用程序适应不同的区域设置，例如日期和时间格式、数字格式和货币符号。
• 时区：处理时间戳或安排任务时要注意时区。使用 UTC（协调世界时）在内部存储时间戳，并将它们转换为用户的本地时区以供显示。
• 硬件可用性：考虑特定硬件组件在不同地区的可用性。如果您的应用程序依赖于特定的 USB 转串口适配器，请确保它在目标市场中易于获得。
• 合规性：了解与不同国家/地区的数据隐私、安全或硬件兼容性相关的任何监管要求。
• 文化敏感性：设计您的用户界面和文档时要考虑到文化敏感性。避免使用在某些文化中可能具有冒犯性或不合适的图像、符号或语言。

例如，通过串行连接向 Web 应用程序传输患者数据的医疗设备必须遵守美国的 HIPAA 规定和欧洲的 GDPR 规定。Web 应用程序中显示的数据需要本地化为用户首选语言，并遵守当地的数据隐私法规。

解决常见问题

以下是您在使用 Web 串口 API 和流量控制时可能遇到的一些常见问题以及可能的解决方案：

• 数据丢失：确保您使用适当的流量控制，并且波特率在 Web 应用程序和设备上都已正确配置。检查缓冲区溢出。
• 通信错误：验证串口设置（波特率、数据位、奇偶校验、停止位）在两侧是否正确配置。检查接线问题或电缆故障。
• 浏览器兼容性：虽然 Web 串口 API 在 Chrome 和 Edge 等现代浏览器中得到了广泛支持，但请确保您的应用程序可以优雅地处理 API 不可用的情况。提供替代解决方案或信息性错误消息。
• 权限问题：用户需要明确授予 Web 应用程序访问串口的权限。向用户提供有关如何授予权限的明确说明。
• 驱动程序问题：确保在用户的系统上安装了 USB 转串口适配器的必要驱动程序。

结论

掌握使用 Web 串口 API 进行串口通信和流量控制对于构建与硬件设备交互的可靠且强大的 Web 应用程序至关重要。通过了解串口通信的基础知识、不同类型的流量控制以及最佳实践，您可以创建强大的应用程序，充分利用 Web 串口 API 的全部潜力。请记住考虑全球因素并实施彻底的测试，以确保您的应用程序在全球范围内的用户都能无缝运行。尽可能使用硬件流量控制，并在必要时实现强大的错误处理和 XON/XOFF 软件流量控制，将大大提高您的 Web 串口应用程序的可靠性和用户体验。