Web Serial Api 串口实现（物流秤）

Monkey、

已于 2023-03-02 15:33:31 修改

阅读量3k

点赞数

文章标签：前端 javascript 开发语言

于 2023-03-02 15:22:08 首次发布

本文链接：https://blog.csdn.net/u011884200/article/details/129301076

版权

本文介绍了如何利用WebSerialApi在Chrome和Firefox等浏览器上实现与物流秤的数据对接，通过JavaScript操作串口进行定制化显示和后台系统通信。该API允许Web应用与物理世界的串行设备交互，如微控制器和3D打印机，同时也作为WebUSB的补充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用Web Serial Api 实现串口通讯

业务需求要和物流秤进行数据对接，实现数据可以定制化显示，和后台系统互通，Web Serial Api目前只适用于谷歌、火狐等。后端语言均可以实现。

什么是网络串行 API？

串行端口是一种双向通信接口，允许逐字节发送和接收数据。

Web Serial API 为网站提供了一种使用 JavaScript 读取和写入串行设备的方法。串行设备通过用户系统上的串行端口或通过模拟串行端口的可移动 USB 和蓝牙设备连接。

换句话说，Web Serial API 通过允许网站与串行设备（例如微控制器和 3D 打印机）进行通信，从而在 Web 和物理世界之间架起了一座桥梁。

此 API 也是WebUSB的绝佳伴侣，因为操作系统要求应用程序使用其高级串行 API 而不是低级 USB API 与某些串行端口进行通信。

Html部分

<html>
<head>
    <title>
        测试串口
    </title>
</head>
<body>
<form id="myForm">
    <table cellspacing="5" cellpadding="10">
        <tr>
            <td>波特率</td>
            <td>
                <select name="baudRate">
                    <option value="300">300</option>
                    <option value="600">600</option>
                    <option value="1200">1200</option>
                    <option value="2400">2400</option>
                    <option value="4800">4800</option>
                    <option value="9600" selected>9600</option>
                    <option value="19200">19200</option>
                    <option value="38400">38400</option>
                    <option value="57600">57600</option>
                    <option value="115200">115200</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>数据位</td>
            <td>
                <select name="dataBits">
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8" selected="">8</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>校验位</td>
            <td>
                <select name="parity">
                    <option value="none" selected="">None</option>
                    <option value="odd">Odd</option>
                    <option value="even">Even</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>停止位</td>
            <td>
                <select name="stopBits" lay-filter="stopBits">
                    <option value="1" selected="">1</option>
                    <option value="2">2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>接收信息区域</td>
            <td>
                <textarea rows="6" cols="90" name="getMessageArea"></textarea>
            </td>
        </tr>
    </table>
</form>
<div>
    <button id="connect">打开串口</button>&nbsp;&nbsp;
    <button id="close">关闭串口</button>
</div>
</body>
<script type="application/javascript" src="jquery-3-3-1.min.js"></script>
<script type="application/javascript" src="lineBreakTransformer.js"></script>
<script type="application/javascript" src="serial-reader.js"></script>
<script>
    let serialReader = new SerialReader();

    //初始化扫码机
    const initSweep = async () => {
        try {
            var baudRate = $("#myForm").find("select[name='baudRate']").val();
            var parity = $("#myForm").find("select[name='parity']").val();
            var dataBits = $("#myForm").find("select[name='dataBits']").val();
            var stopBits = $("#myForm").find("select[name='stopBits']").val();

            await serialReader.initSweepPrinter(baudRate, dataBits, stopBits, parity);
        } catch (e) {
            console.error('扫码机读取失败', e);
        }
    }

    //连接串口
    $('#connect').click(function () {
        initSweep();
    });

    //断开
    $('#close').click(function () {
        serialReader.disconnect().then(() => {
            console.log('断开成功!');
        });
    });
</script>
</html>

serial-reader.js（封装成一个类）

class SerialReader {
    port;//串口
    reader;//读取
    inputDone;

    constructor() {
        if (!("serial" in navigator)) {
            alert('当前浏览器不支持串口');
            return;
        }
        this.filtersSweep = [
			{ usbVendorId: 0x2341, usbProductId: 0x0043 },//指定显示的设备ID，好像只有USB接口才有
		];//串口识别码-扫码机
    }

    //初始化
    initSweepPrinter = async (baudRate, dataBits, stopBits, parity) => {
        let requestOptions = {filters: this.filtersSweep};
		
        this.port = await navigator.serial.requestPort(requestOptions);

        await this.port.open({
            baudRate: baudRate,// 一个正的、非零的值，表示串口通信应该建立的波特率
            dataBits: dataBits,// 7或8的整数值，表示每帧的数据位数。默认值为8
            stopBits: stopBits,// 1或2的整数值，表示帧结束时的停止位数。默认值为1。
            parity: parity,// 奇偶校验模式为“none”、“偶”或“奇”。默认值为none。
            bufferSize: 255, // 一个无符号长整数，指示要建立的读和写缓冲区的大小。如果未通过，默认值为255。
            flowControl: 'none', // 流控制类型，“none”或“hardware”。默认值为none。
        });

        const decoder = new TextDecoderStream();
        this.inputDone = this.port.readable.pipeTo(decoder.writable);
        // this.reader = decoder.readable.pipeThrough(new TransformStream(new LineBreakTransformer())).getReader();//USB好像需要特殊处理,没有测试过
        this.reader = decoder.readable.getReader();//显示器接头直接返回数据

        console.log('连接成功');

        return new Promise(async (resolve, reject) => {
            while (true) {
                const {value, done} = await this.reader.read();
                if (value) {
                	$('#myForm').find("textarea[name='getMessageArea']").append(value)
                    console.log('扫码机数据 = ', value);
                    resolve(value);
                }
                if (done) {
                    this.reader.releaseLock();
                    break;
                }
            }
        })
    }

    //断开
    disconnect = async () => {
        return new Promise(async (resolve, reject) => {
            if (this.reader && this.port && this.inputDone) {
                await this.reader.cancel();
                await this.inputDone.catch(() => { });
                this.reader = null;
                this.inputDone = null;
                await this.port.close();
                this.port = null;
                resolve();
            }
        })
    }
}

LineBreakTransformer.js（好像只有USB接口设备需要这样处理）

// 将原本可能截断成多个字符串的内容按顺序合并一个字符串
class LineBreakTransformer {
    constructor() {
        // 保存流数据直到新行出现的容器
        this.container = "";
    }

    transform(chunk, controller) {
        // 将新块追加到现有块。
        this.container += chunk;
        // 对于每一行分段，将解析后的行发送出去。
        const lines = this.container.split("\r");
        this.container = lines.pop();
        lines.forEach((line) => controller.enqueue(line));
    }

    flush(controller) {
        // 当流关闭时，清除所有剩余的块。
        controller.enqueue(this.container);
    }
}