在 ReactJS 中使用 Web Serial

Posted 2023-02-21

【中文标题】在 ReactJS 中使用 Web Serial

【英文标题】：Using Web Serial with ReactJS

【发布时间】：2021-10-18 17:28:24

【问题描述】：

我有一组随机数据位，我需要使用 React 应用程序将其写入串行端口。使用 vanilla javascript 实现时，脚本能够使用串行端口写入 esp 模块，但在 reactjs 中实现相同时，它不起作用。我是否需要使用服务器（在后端使用 Django）或套接字协议，而不是直接从 React 访问串行。

【参考方案1】：

此时，您可以使用 web serial API 在 Chromium 浏览器（Chrome、Chromium、Edge）上执行此操作。您不需要后端，但您可以从后端调用值，以防您有不同的串行设备（我将其用于秤，它们都是不同的）。

有一些库可以帮助您实现这一点，但您也可以从 API 本地执行此操作。以下是一些资源：

此时，您必须在 chrome://flags/ 中启用实验性网络平台功能，但这最终将成为浏览器实现的一部分。

您可以使用 https://googlechromelabs.github.io/serial-terminal/ 进行测试

您可以在 about://device-log 查看设备日志

API 需要用户交互。基本上，当您调用端口时，会弹出一个窗口，列出可用端口。用户选择端口（例如，某些 RS-232 到 USB 适配器的“USB 串行连接器”）。连接后，串行设备应根据其设置进行流式传输、推送或拉取。

如果您不想自己编写，有一些库可以让这更容易。在 Angular 中，我使用 browser-serial 并使用来自 API 的后端数据更改“serialOptions”对象的值。

示例（“串行”对象来自library）：

async connectToScale(user: User) 
    if (!user.scale) 
      return;
    
    console.log("Connecting to scale: ", user.scale);

    this.serial.serialOptions = 
      baudRate: user.scale.baud_rate,
      dataBits: user.scale.data_bit,
      stopBits: user.scale.stop_bit,
      bufferSize: user.scale.buffer_size,
      flowControl: "none",
    ;

    const regex = new RegExp(user.scale.regex);

    await this.serial.connect();

    this.serial.readLoop((output: string, _done: boolean) => 
      const result = regex.exec(output);
      if (!result) 
        console.warn("Could not parse the scale output - regex issue:\n", output);
        return true;
      
      console.log("Result from parsing raw scale output:\n", result);

let weight: number;
      weight = parseInt(result[0]);

      const scaleWeight: ScaleWeight =  scale: weight ;
      console.log("Pushing to scaleValue:", scaleWeight);
      this.scaleValue.next(scaleWeight);
      return true;
    );