Using Web Serial with ReactJS

Question

我有一组随机的数据位，我需要使用React应用程序写入串行端口。当使用香草javascript实现时，脚本能够使用serialport写入esp模块，但在reactjs中实现相同时，它不工作。我需要使用服务器(Django在后端)或套接字协议，而不是直接从React访问serial吗?

Answer 1

你可以用Chrome浏览器(Chrome, Chromium, Edge)在这一点上使用web串行API。你不需要一个后端，但你可以从一个后端调用值，以防你有不同的串行设备(我使用这个规模，他们都是不同的)。

有一些库可以帮助你实现这一点，但你也可以从API本地完成。以下是一些资源:

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

可以使用https://googlechromelabs.github.io/serial-terminal/

进行测试您可以在大约://device-log

查看设备日志API需要用户交互。基本上，当您调用端口时，会弹出一个列出可用端口的窗口。用户选择端口(例如，"USB串行连接器"用于某些RS-232到USB适配器)。一旦连接，串行设备应流，推或拉取决于其设置。

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

示例('serial'对象来自库):

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