javascript - 在 ReactJS 中使用 Web Serial

Question

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

Answer 1

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

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

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

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

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

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

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

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

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;
    });
  }