因为最近工作项目中用到了电子秤,需要对接电子秤设备。以前也没有对接过这种设备,当时也是一脸懵逼,脑袋空空。后来就去网上搜了一下前端怎么对接,然后就发现了SerialPort串口。
Serialport
Github:https://github.com/serialport/node-serialport
官方描述:使用 JavaScript 访问串行端口。Linux、OSX 和 Windows。
SerialPort是什么?
SerialPort 是一个用于在 Node.js 环境中进行串口通信的库。它允许开发者通过 JavaScript 或 TypeScript 代码与计算机上的串口设备进行交互。SerialPort 库提供了丰富的 API,使得在串口通信中能够方便地进行设置、监听和发送数据。
一般我们的设备(电子秤/扫码枪)会有一根线插入到电脑的USB口或者其他口,电脑上的这些插口就是叫串口。设备上的数据会通过这根线传输到电脑里面,比如电子秤传到电脑里的就是重量数值。那么我们前端怎么接收解析到这些数据的呢?SerialPort的作用就是用来帮我们接收设备传输过来的数据,也可以向设备发送数据。
简单概括一下:SerialPort就是我们前端和设备之间的翻译官,可以接收设备传输过来的数据,也可以向设备发送数据。
SerialPort怎么用?
SerialPort可以在Node项目中使用,也可以在Electron项目中使用,我们一般都是用在Electron项目中,接下来讲一下在Electron项目中SerialPort怎么下载和引入
1、创建Electron项目
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
网上有很多Electron教程,这里不再详细说了
在package.json中看一下自己的Electron的版本,下一步会用到。
2、下载SerialPort
这里先看一下自己使用的Electron对应的Node版本是什么,打开下面electron官网看表格中的Node那一列
Electron发行时间表:https://www.electronjs.org/zh/docs/latest/tutorial/electron-timelines
如果你Electron对应的Node版本高于v12.0.0,直接下载就行
npm install serialport
如果你Electron对应的Node版本低于或等于v12.0.0,请用对应的Node版本对应下面的serialport版本下载
- 对于 Node.js 版本
0.10
和0.12
,最后一个正常运行的版本是serialport@4
。 - 对于 Node.js 版本
4.0
,最后一个正常运行的版本是serialport@6
. - 对于 Node.js 版本
8.0
,最后一个正常运行的版本是serialport@8
. - 对于 Node.js 版本
10.0
,最后一个正常运行的版本是serialport@9
. - 对于 Node.js 版本
12.0
,最后一个正常运行的版本是serialport@10
.
我项目的Electron版本是11.5.0,对应的Node版本号是12.0,对应的serialport版本号是serialport@10.0.0
3、编译Serialport
- 安装node-gyp 用于调用其他语言编写的程序(如果已安装过请忽略这一步)
npm install -g node-gyp
- 进入@serialport目录
cd ./node_modules/@serialport/bindings
- 进行编译,target后面换成当前Electron的版本号
node-gyp rebuild --target=11.5.0
如果编译的时候报错了就将自己电脑的Node版本切换成当前Electron对应的版本号再编译一次
查看Electron对应Node版本号:https://www.electronjs.org/zh/docs/latest/tutorial/electron-timelines
编译成功以后就可以在代码里使用Serialport了
4、使用Serialport
serialport官网使用教程:https://serialport.io/docs/next/guide-usage
4.1、引入Serialport
const{ SerialPort }=require('serialport')// orimport{ SerialPort }from'serialport'
引入后如果启动的时候报错Cannot read property ‘indexOf’ of undefined
解决办法:解决报错Cannot read property ‘indexOf’ of undefined
4.2、创建串口(重点!)
创建串口有两种写法,新版本是这样写法
new SerialPort(params, callback)
const port =newSerialPort({path:'COM1',// 串口号baudRate:9600,// 波特率autoOpen:true,// 是否自动打开端口},function(err){if(err){return console.log('打开失败: ', err.message)}
console.log('打开成功')})
旧版本是下面这样的写法
new Serialport(path, params, callback)
,我用的是serialport@10.0.0版本就是这样的写法
const port =newSerialport('COM1',{baudRate:9600,autoOpen:true,// 是否自动打开端口},function(err){if(err){return console.log('打开失败: ', err.message)}
console.log('打开成功')})
创建串口的时候需要传入两个重要的参数是path和baudRate,path是串口号,baudRate是波特率。最后一个参数是回调函数
不知道怎么查看串口号和波特率看这篇文章:如何查看串口和波特率
4.3、手动打开串口
如果autoOpen参数是false,需要使用
port.open()
方法手动打开
const port =newSerialPort({path:'COM1',// 串口号baudRate:9600,// 波特率autoOpen:false,// 是否自动打开端口, 默认true})// autoOpen参数是false,需要使用port.open()方法手动打开
port.open(function(err){if(err){return console.log('打开失败', err.message)}
console.log('打开成功')})
4.4、接收数据(重点!)
接收到的data是一个Buffer,需要转换为字符串进行查看
port.on('data',function(data){// 接收到的data是一个Buffer,需要转换为字符串进行查看
console.log('Data:', data.toString('utf-8'))})
接收过来的data就是设备传输过来的数据,转换后的字符串就是我们需要的数据,字符串里面可能有多个数据,我们把自己需要的数据截取出来就可以了
假设通过电子秤设备获取到的数据就是"205 000 000",中间是四个空格分割的,第一个数字205就是获取的重量,需要把这个重量截取出来。下面是我的示例代码
port.on('data',function(data){try{// 获取的data是一个Buffer// 1.将 Buffer 转换为字符串 dataString.toString('utf-8')let weight = data.toString('utf-8')// 2.将字符串分割转换成数组,取数组的第一个值.split(' ')[0]
weight = weight.split(' ')[0]// 3.将取的值 去掉前后空格
weight = weight.trim()// 4.最后转换成数字,获取到的数字就是重量
weight =Number(weight)
console.log('获取到重量:'+ weight);}catch(err){
console.error(`
重量获取报错:${err}
获取到的Buffer: ${data}
Buffer转换后的值:${data.toString('utf-8')}`);}})
4.5、写入数据
port.write('Hi Mom!')
port.write(Buffer.from('Hi Mom!'))
4.6、实时获取(监听)所有串口
const{ SerialPort }=require('serialport')
SerialPort.list().then((ports, err)=>{// 串口列表
console.log('获取所有串口列表', ports);})
更多内容
serialport官网教程:https://serialport.io/docs/next/guide-usage
参考文章:
electron-vue使用serialport串口通信及踩过的坑(已解决!)
vue-cli3+electron+serialport实现串口通信,收银系统对接电子秤
版权归原作者 web前端小学生 所有, 如有侵权,请联系我们删除。