将 Web 串行与 ReactJS 结合使用

Question

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

Answer 1

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

有一些库可以帮助您实现此目的，但您也可以从 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;
    });
  } 

Answer 2

如果您使用 React，则存在 https://gist.github.com/joshpensky/426d758c5779ac641d1d09f9f5894153 gist。只需将其复制并粘贴到一个新文件中，将您的应用程序包装在 SerialProvider 组件中，然后在您想要使用串行的任何地方使用 useSerial 即可。