前端使用SerialPort串口通信

一、下载npm install serialport

二、在vue页面中引入使用

const { SerialPort } = require('serialport');

这是serialport官方文档写的很完整，有什么问题可以看文档。

三、初始化SerialPort 

在mounted或者onLoad中初始化，默认创建的SerialPort对象就会打开端口。path串口名称，baudRate波特率

        // 初始化串口
        initSerialPort(value = 'COM20') {
            // 关闭已打开的串口
            this.closeSerialPort();
            // 创建新的 SerialPort 实例
            this.port = new SerialPort({ path: value, baudRate: 115200 }, (err) => {
                if (err) {
                    console.error('Error opening serial port:', err);
                    this.SerialLink = `${this.$t('Connected', this.language)}，${err}`;
                    if (err == 'Error: Opening COM20: File not found') {
                        this.initSerialPort('COM9');
                    }
                    // 可以在这里添加错误处理逻辑
                } else {
                    console.log('Serial port opened successfully.');
                    this.SerialLink = this.$t('connected', this.language);
                    this.onData();
                }
            });

            // 监听串口错误
            this.port.on('error', (err) => {
                console.error('Serial port error:', err);
            });
        },

 添加autoOpen为false改为关闭，手动打开open方法

this.port = new SerialPort({ path: value, baudRate: 115200 }, { autoOpen: false })
this.port.open()

三、on方法监听串口传输的信息

this.port.on('data', (data) => {
    console.log(data)
})

四、write方法向串口发送信息

this.port.write(Buffer.from('reset\r\n'));

五、close方法关闭串口连接

        closeSerialPort() {
            if (this.port && this.port.isOpen) {
                this.port.close(() => {
                    console.log('Serial port closed.关闭串口');
                });
            }
        },

六、还有一些官方自带的解析器（对我来说没啥用）

自行查看官方文档https://serialport.io/docs/api-parsers-overview

在接受指定的字节数后返回
const { ByteLengthParser } = require('@serialport/parser-byte-length');
const parser = this.port.pipe(new ByteLengthParser({ length: 8 }))

注意当前端处理高频数据流时会丢失数据100/s的数据（电脑性能越低越明显）

七、串口数据解析

1.二进制数据转十六进制的字符串

parseData(arrBytes) {
    var str = '';
    for (var i = 0; i < arrBytes.length; i++) {
        var tmp;
        var num = arrBytes[i];
        if (num < 0) {
            //此处填坑，当byte因为符合位导致数值为负时候，需要对数据进行处理
            tmp = (255 + num + 1).toString(16);
        } else {
            tmp = num.toString(16);
        }
        if (tmp.length == 1) {
            tmp = '0' + tmp;
        }
        str += tmp;
    }
    return str;
}

2.二进制数据，解码成一个文本字符串

parseUint8Array(data) {
    const decoder = new TextDecoder('utf-8');
    const text = decoder.decode(data);
    return text
}