前端对接电子秤、扫码枪设备serialPort 串口使用教程

本文主要是介绍前端对接电子秤、扫码枪设备serialPort 串口使用教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因为最近工作项目中用到了电子秤,需要对接电子秤设备。以前也没有对接过这种设备,当时也是一脸懵逼,脑袋空空。后来就去网上搜了一下前端怎么对接,然后就发现了SerialPort串口。

Serialport

官网地址:https://serialport.io/

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版本下载

https://serialport.io/docs/next/guide-platform-support#last-known-versions-for-unsupported-versions-of-nodejs

  • 对于 Node.js 版本0.100.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')
// or
import { SerialPort } from 'serialport'
4.2、创建串口(重点!)

创建串口有两种写法,新版本是这样写法new SerialPort(params, callback)

const port = new SerialPort({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 = new Serialport('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 = new SerialPort({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实现串口通信,收银系统对接电子秤

这篇关于前端对接电子秤、扫码枪设备serialPort 串口使用教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/607166

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传