Chrome浏览器读取串口数据

需求场景

项目中难免有桌面设备接入的情况，比如扫码枪、RFID扫码器等情况。

方案

1.中间件方案

做一个在客户端微型http服务或者websoket服务，JavaScript调用这个服务与串口通讯。优点兼容浏览器，缺点这个服务得兼容操作系统，这种方案落地过。

2.浏览器插件方案

做一个浏览器插件，JavaScript基于插件与串口通讯。优点是你只需要搞定浏览器即可，缺点是可能需要兼容多种浏览器，这种方案没试过，理论上是可行的。

3.Chrome浏览器读取方案

通过Chrome浏览器的API直接读取串口数据，有点就是没有额外的工作，缺点就是只有Chrome浏览器能用，这种方案落地过。

串口基础知识

串行接口简称为串口，也叫串行通信，这是一个统称，采用串行通信的接口都叫作串口，串口是一个硬件接口。

工作模式相关参数

（1）波特率

串口通信时的速率。常见的有9600、14400、115200等等，这个说的就是bps，重点关注。

（2）数据位

这是衡量通信中实际数据位的参数。当计算机发送一个信息包，实际的数据不会是8位的谷歌浏览器本地跨域，标准的值是5、7和8位。如何设置取决于你想传送的信息。比如，标准的ASCII码是0～127（7位）。扩展的ASCII码是0～255（8位）。

（3）停止位

用于表示单个数据包的最后一位。典型的值为1、1.5或2位。停止位不仅表示传输的结束谷歌浏览器本地跨域，并且提供计算机校正时钟同步的机会。停止位的位数越多，不同时钟同步的容错程度越大，但同时数据传输率也越慢。

（4）校验位

在串口通信中一种简单的检错方式。有三种检错方式：偶（E）、奇（O）、无（N）。

Vender ID 和 Product ID

即“厂家标识”和“产品标识”，USB 设备驱动的硬件接口需要识别 Vender ID 和 Product ID，各个平台的查看方式大家自己查询一下，也可以使用API查询

ChromeAPI介绍判断浏览器是否支持串口

if ("serial" in navigator) {
	// The Web Serial API is supported.
}

根据usbVendorId和usbProductId过滤串口

const filters = [
  { usbVendorId: 0x2341, usbProductId: 0x0043 },
];
// Prompt user to select an Arduino Uno device.
const port = await navigator.serial.requestPort({ filters });

打开关闭串口

//这个参数是波特率
await port.open({baudRate: 9600});
await port.close();

读取和写入数据

const reader = port.readable.getReader();
// Listen to data coming from the serial device.
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    // Allow the serial port to be closed later.
    reader.releaseLock();
    break;
  }
  // value is a Uint8Array.
  console.log(value);
}

onst writer = port.writable.getWriter();
const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
await writer.write(data);
// Allow the serial port to be closed later.
writer.releaseLock();

示例

async function getCOMData() {
    if (!"serial" in navigator) {
        console.error("该浏览器不支持串口")
        return;
    }
    //这个地方换成自己设备
    const filters = [
        {usbVendorId: 0x1a86, usbProductId: 0x7521},
    ];
    let port = await navigator.serial.requestPort({filters});
    await port.open({baudRate: 9600});
    //验证分割符号
    let checkRN = (value) => {
        if (value < 2) {
            return -1;
        }
        for (let i = 1; i  {
        readc = false;
    }, 5000);
    //这里是流读取，一定要根据协议解决分包和黏包的问题
    while (true && readc) {
        const {value, done} = await reader.read();
        if (done) {
            // Allow the serial port to be closed later.
            reader.releaseLock();
            break;
        }
        let n = checkRN(value);
        if (n == -1) {
            tempArray = [...tempArray, ...value]
        } else {
            let fullArray = [...tempArray, ...value.slice(0, n)]
            tempArray = [...value.slice(n + 1, value.length)];
            let str = String.fromCharCode(...fullArray)
            console.log("解析后的数:",str)
        }
    }
    reader.releaseLock();
    await port.close();
    return undefined;
}

API参考地址：https://web.dev/serial/#close-port

本文到此结束，希望对大家有所帮助！