位置: IT常识 - 正文

Vue使用Serial连接串口(vue连接webapi)

编辑:rootadmin
Vue使用Serial连接串口

推荐整理分享Vue使用Serial连接串口(vue连接webapi),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue serialport,vue绑定接口,vue绑定接口,vue可以直接连接数据库,vue怎么连接后端接口,vue怎么连接数据库,vue serialport,vue连接口,内容如对您有帮助,希望把文章链接给更多的朋友!

本来只是随手记录一下,发现看的人多了,想着还是修复一下bug吧,供各位看官指正

2022-10-24本次更新:

1、修复在不支持Serial的情况下,控制台报错

2022-09-19本次更新:

 1、修复了传输数据接收分隔的情况(增加数据缓存)

 2、修复串口连接没有使用选择的波特率等参数

1、Serial 接口是 Web Serial API的接口,提供了从网页查找和连接串口的属性和方法。

注意:

  只能在部分支持Serial并且网站为安全上下文(HTTPS)中可用,或者是本机访问

一:常用API介绍

requestPort----获取授权串口

open-----打开串口

Vue使用Serial连接串口(vue连接webapi)

close---关闭串口(串口关闭前,需要释放锁住的流)

cancel---立即退出读取的循环,然后去调用releaseLock,最后调用close方法

releaseLock---Reader和.Writer的释放方法

read---port.readable.getReader()的读取字节数组方法

write---port.writable.getWriter()的写入方法

二:代码示例

MySerialPort.js 是封装的一个SerialPort的工具类

export default class MySerialPort { constructor() { this.state = { portIndex: undefined, ports: [], isOpen: false, writeType: 1, readType: 1, isScroll: true, readValue: [], status:false, //port参数 baudRate: "9600", dataBits: "8", stopBits: "1", parity: "none", flowControl: "none", }; this.keepReading=false; this.getPorts = this.getPorts.bind(this); this.handleRequestPort = this.handleRequestPort.bind(this); this.handleChildrenChange = this.handleChildrenChange.bind(this); this.readText = this.readText.bind(this); this.writeText = this.writeText.bind(this); this.handleClear = this.handleClear.bind(this); this.a2hex = this.a2hex.bind(this); this.hex2a = this.hex2a.bind(this); this.hex2atostr=this.hex2atostr.bind(this); this.reader={}; this.closed; } async getPorts() { // 获取已授权的全部串口 let ports = await navigator.serial.getPorts(); this.setState({ ports, }); } async handleRequestPort() { // 请求授权 try { await navigator.serial.requestPort(); await this.getPorts(); } catch (e) { this.$message.error(e.toString()); } } async openPort(portIndex, isOpen,callBack=null) { // 打开串口 let port = this.state.ports[portIndex]; if (!isOpen) { // 关闭串口 this.keepReading = false; this.reader.cancel(); await this.closed; this.handlePortOpen({ portIndex, isOpen, }); } else { await port.open({ baudRate: this.state.baudRate, dataBits: this.state.dataBits, stopBits: this.state.stopBits, parity: this.state.parity, flowControl: this.state.flowControl, }); this.handlePortOpen({ portIndex, isOpen, }); this.keepReading = true; this.closed=this.readUntilClosed(portIndex,callBack); } } async readUntilClosed(portIndex,callBack=null) { let port = this.state.ports[portIndex]; while (port.readable && this.keepReading) { this.reader = port.readable.getReader(); try { let readCache=[] while (true) { const { value, done } = await this.reader.read(); if (done) { break; } readCache.push(...value) setTimeout(() => { if(readCache.length>0){ this.readText(readCache); callBack(readCache) readCache=[] } }, 300);//串口缓存 } } catch (error) { this.$message.error(error.toString()); } finally { this.reader.releaseLock(); } await port.close(); } } handlePortOpen({ portIndex, isOpen }) { // 处理打开串口 this.setState({ portIndex, isOpen, }); } handleChildrenChange(type, value) { this.setState({ [type]: value, }); } portWrite(value) { return new Promise(async (resolve, reject) => { if (!this.state.isOpen) { this.$message.error("串口未打开"); reject(); return; } else { let port = this.state.ports[this.state.portIndex]; const writer = port.writable.getWriter(); await writer.write(new Uint8Array(value)); writer.releaseLock(); resolve(value); } }); } readText(value) { console.log(value, "读取"); let newValue = this.state.readValue.concat({ value, type: 1, }); this.setState({ readValue: newValue, }); } writeText(value) { console.log(value, "写入"); this.portWrite(value).then((res) => { let newValue = this.state.readValue.concat({ value: res, type: 2, }); this.setState({ readValue: newValue, }); }); } handleClear() { this.setState({ readValue: [], }); } componentDidMount() { this.getPorts(); } handleState(status) { this.setState({ status, }); } setState(obj){ Object.keys(this.state).forEach(key => { if(obj[key]!=undefined){ this.state[key]=obj[key] } }); } //字节转字符串 hex2atostr(arr) { return String.fromCharCode.apply(String,arr); } hex2a(hexx) { return String.fromCharCode(hexx); } //字符转16进制 a2hex(str) { return str.charCodeAt(0);}}

 vue代码:

<template> <div> <el-row type="flex" class="row-bg" justify="center" v-show="portsList.length == 0" > <el-col :span="7" ><div style="margin-top: 400px"> <span style="display: block"> 仅支持Chrome 89+或者Edge 89+浏览器(安全上下文(HTTPS)中可用) </span> <el-button type="primary" @click="obtainAuthorization" >授权</el-button > </div></el-col > </el-row> <el-form v-show="portsList.length > 0" ref="form" :model="form" label-width="100px" > <el-row> <el-col :span="6" ><div> <el-form-item label="串口"> <el-select v-model="form.port" filterable placeholder="请选择串口" :disabled="isDisable" > <el-option v-for="item in portsList" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> <el-form-item label="波特率"> <el-autocomplete popper-class="my-autocomplete" v-model="form.baudRate" :fetch-suggestions="querySearch" placeholder="请输入波特率" :disabled="isDisable" > <i class="el-icon-edit el-input__icon" slot="suffix"> </i> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> <span class="addr">{{ item.address }}</span> </template> </el-autocomplete> </el-form-item> <el-form-item label="数据位"> <el-select v-model="form.dataBits" placeholder="请选择数据位" :disabled="isDisable" > <el-option label="7" value="7"></el-option> <el-option label="8" value="8"></el-option> </el-select> </el-form-item> <el-form-item label="停止位"> <el-select v-model="form.stopBits" placeholder="请选择停止位" :disabled="isDisable" > <el-option label="1" value="1"></el-option> <el-option label="2" value="2"></el-option> </el-select> </el-form-item> <el-form-item label="校验位"> <el-select v-model="form.parity" placeholder="请选择校验位" :disabled="isDisable" > <el-option label="None" value="none"></el-option> <el-option label="Even" value="even"></el-option> <el-option label="Odd" value="odd"></el-option> </el-select> </el-form-item> <el-form-item label="流控制"> <el-select v-model="form.flowControl" placeholder="请选择流控制" :disabled="isDisable" > <el-option label="None" value="none"></el-option> <el-option label="HardWare" value="hardware"></el-option> </el-select> </el-form-item> <el-form-item label="显示历史"> <el-switch v-model="form.isShowHistory" @change="loadHistory" ></el-switch> <el-button type="danger" icon="el-icon-delete" circle title="清空历史" @click="clearHistory" ></el-button> </el-form-item> <el-form-item label="发送区设置" v-show="isShowSendArea"> <el-form-item label="发送格式"> <el-radio-group v-model="form.type"> <el-radio label="1">ASCII</el-radio> <el-radio label="2">HEX</el-radio> </el-radio-group> </el-form-item> <el-form-item label="发送信息"> <el-input type="textarea" v-model="form.sendMsg"></el-input> </el-form-item> <el-button type="primary" @click="sendCommon">发送</el-button> </el-form-item> <el-form-item> <el-button :type="btnType" @click="connectBtn">{{ btnText }}</el-button> <el-button type="info" @click="obtainAuthorization" >新增授权</el-button > </el-form-item> </div> </el-col> <el-col :span="10" ><div> <el-form-item label="电子秤信息"> <el-input type="textarea" v-model="form.desc" disabled :autosize="{ minRows: 21, maxRows: 25 }" ></el-input> </el-form-item></div ></el-col> </el-row> </el-form> </div></template><script>import MySerialPort from "./MySerialPort";import USBDevice from "./usb.json";export default { data() { return { input: "", keepReading: true, form: { baudRate: "9600", dataBits: "8", stopBits: "1", parity: "none", flowControl: "none", desc: "", type: "1", isShowHistory: false, }, btnType: "primary", btnText: "连接串口", restaurants: [], portsList: [], isShowSendArea: false, readType: 1, }; }, mounted() { if ("serial" in navigator) { this.myserialport = new MySerialPort(); this.getPorts(); navigator.serial.addEventListener("connect", (e) => { this.$message.success("设备已连接"); this.getPorts(); }); navigator.serial.addEventListener("disconnect", (e) => { this.$message.error("设备已断开"); }); this.restaurants = this.loadAll(); } else { this.$message.error( "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口" ); } }, computed: { isDisable() { return this.btnType == "danger"; }, }, methods: { //接受数据的回调 callBack(value) { if (this.form.isShowHistory) this.form.desc = this.readLi().join(""); else { if (value.length > 0) this.form.desc = this.myserialport.hex2atostr(value); } }, clearHistory() { this.form.desc = ""; this.myserialport.state.readValue = []; }, loadHistory() { if (this.form.isShowHistory) this.form.desc = this.readLi().join(""); else { let temp = this.readLi(); if (temp.length > 0) this.form.desc = temp[temp.length - 1].join(""); } }, readLi() { let readType = this.readType; return this.myserialport.state.readValue.map((items, index) => { const item = items.value; const type = items.type; // 1接收,2发送 let body = []; if (item !== undefined) { let strArr = []; for (let hex of Array.from(item)) { strArr.push(hex.toString(16).toLocaleUpperCase()); } if (strArr.includes("D") && strArr.includes("A")) { if (strArr.indexOf("A") - strArr.indexOf("D") === 1) { strArr.splice(strArr.indexOf("D"), 1); strArr.splice(strArr.indexOf("A"), 1, <br key={0} />); } } strArr = strArr.map((item) => { if (typeof item === "string") { if (readType === 1) { return this.myserialport.hex2a(parseInt(item, 16)); } else if (readType === 2) { return item + " "; } } return item; }); if (typeof strArr[strArr.length - 1] === "string") { strArr.push("\r\n"); } body.push(strArr.join("")); } return body; }); }, //连接 async connectBtn() { if (this.btnType == "primary") { try { this.myserialport.state.baudRate = this.form.baudRate; this.myserialport.state.dataBits = this.form.dataBits; this.myserialport.state.stopBits = this.form.stopBits; this.myserialport.state.parity = this.form.parity; this.myserialport.state.flowControl = this.form.flowControl; await this.myserialport.openPort(this.form.port, true, this.callBack); } catch (error) { this.$message.error("串口连接失败!请检查串口是否已被占用"); } if (this.myserialport.state.isOpen) { this.$message.success("串口连接成功"); this.btnType = "danger"; this.btnText = "关闭串口"; } } else { this.myserialport.openPort(this.form.port, false, this.callBack); this.$message.success("串口关闭成功"); this.btnType = "primary"; this.btnText = "连接串口"; } }, //授权 async obtainAuthorization() { if ("serial" in navigator) { console.log("The Web Serial API is supported."); if (!this.myserialport) this.myserialport = new MySerialPort(); try { await this.myserialport.handleRequestPort(); this.$message.success("串口授权成功"); this.getPortInfo(this.myserialport.state.ports); } catch (error) { this.$message.warning("未选择新串口授权!"); } } else { this.$message.error( "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口" ); } }, //串口列表初始化 getPortInfo(portList) { this.portsList = []; portList.map((port, index) => { const { usbProductId, usbVendorId } = port.getInfo(); if (usbProductId === undefined || usbVendorId === undefined) { this.portsList.push({ label: "未知设备" + index, value: index }); } else { const usbVendor = USBDevice.filter( (item) => parseInt(item.vendor, 16) === usbVendorId ); let usbProduct = []; if (usbVendor.length === 1) { usbProduct = usbVendor[0].devices.filter( (item) => parseInt(item.devid, 16) === usbProductId ); } this.portsList.push({ label: usbProduct[0].devname, value: index }); } }); }, // 发送 async sendCommon() { if (this.myserialport.state.isOpen) { if (this.form.sendMsg.length !== 0) { const writeType = this.form.type; let value = this.form.sendMsg; let arr = []; if (writeType == 1) { // ASCII for (let i = 0; i < value.length; i++) { arr.push(this.myserialport.a2hex(value[i])); } } else if (writeType == 2) { // HEX if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) { for (let i = 0; i < value.length; i = i + 2) { arr.push(parseInt(value.substring(i, i + 2), 16)); } } else { this.$message.error("格式错误"); return; } } this.myserialport.writeText(arr); } else { this.$message.warning("请输入发送的信息"); } } else { this.$message.warning("串口处于关闭状态,请连接串口"); } }, async getPorts() { await this.myserialport.getPorts(); this.getPortInfo(this.myserialport.state.ports); }, querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return ( restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === ); }; }, loadAll() { return [ { value: "110" }, { value: "300" }, { value: "600" }, { value: "1200" }, { value: "2400" }, { value: "4800" }, { value: "7200" }, { value: "9600" }, { value: "14400" }, { value: "19200" }, { value: "28800" }, { value: "38400" }, { value: "56000" }, { value: "57600" }, { value: "76800" }, { value: "115200" }, { value: "230400" }, { value: "460800" }, ]; }, },};</script><style scoped>/* ::v-deep .el-textarea__inner { height: 320px !important; width: 80% !important;} */</style>三:示例截图

授权界面:

授权成功后:

使用串口工具调试发送和接收: 

1、使用vspd创建一个对虚拟串口,com1和com2

2、网页的连接com1,sscom连接com2就可以进行通信了

本文链接地址:https://www.jiuchutong.com/zhishi/311774.html 转载请保留说明!

上一篇:dedecms调用当前文章所属栏目名(dedecms进入数据库)

下一篇:机器学习——果蔬分类

  • 真我手机电池显示百分比怎么设置(真我手机电池显示变黄色)

    真我手机电池显示百分比怎么设置(真我手机电池显示变黄色)

  • 苹果a13芯片有哪些机型(iphone a13芯片)

    苹果a13芯片有哪些机型(iphone a13芯片)

  • 快手没有关注人为什么显示有关注(快手没有关注人为什么显示有关注怎么取消)

    快手没有关注人为什么显示有关注(快手没有关注人为什么显示有关注怎么取消)

  • 美团一个差评要多少个好评怎么补回动态(美团一个差评要多少个好评弥补亏损)

    美团一个差评要多少个好评怎么补回动态(美团一个差评要多少个好评弥补亏损)

  • 华为mate30耐摔情况(华为mate30pro耐摔)

    华为mate30耐摔情况(华为mate30pro耐摔)

  • 拉卡拉手环亮度可调吗(拉卡拉手环屏幕太暗怎么调)

    拉卡拉手环亮度可调吗(拉卡拉手环屏幕太暗怎么调)

  • 佳能电池要充多久才满(佳能电池充多久才满)

    佳能电池要充多久才满(佳能电池充多久才满)

  • 拼多多店铺审核一般多久(拼多多店铺审核秒通过)

    拼多多店铺审核一般多久(拼多多店铺审核秒通过)

  • qq电话会显示忙线吗(打qq电话显示对方忙)

    qq电话会显示忙线吗(打qq电话显示对方忙)

  • 磁吸充电是什么意思(磁吸充电是什么手机都可以吗)

    磁吸充电是什么意思(磁吸充电是什么手机都可以吗)

  • 电脑上word文档怎么发到QQ上(电脑上word文档怎么发到微信)

    电脑上word文档怎么发到QQ上(电脑上word文档怎么发到微信)

  • 华为手机发布时间(华为手机发布时间排列2023)

    华为手机发布时间(华为手机发布时间排列2023)

  • 文档修订标注如何消除(word标注修订)

    文档修订标注如何消除(word标注修订)

  • netware是操作系统吗(intewell操作系统)

    netware是操作系统吗(intewell操作系统)

  • 微信置顶语句怎么设置(微信置顶话语)

    微信置顶语句怎么设置(微信置顶话语)

  • 手机忽略车载蓝牙怎么恢复(手机忽略车载蓝牙后搜索不到了)

    手机忽略车载蓝牙怎么恢复(手机忽略车载蓝牙后搜索不到了)

  • 如何关闭自动扣费功能(如何关闭自动扣费支付宝)

    如何关闭自动扣费功能(如何关闭自动扣费支付宝)

  • 红米note8pro怎么显示被拦截的短信(红米note8pro怎么插双卡)

    红米note8pro怎么显示被拦截的短信(红米note8pro怎么插双卡)

  • 苹果13系统访问限制在哪里(ios13访问限制在哪)

    苹果13系统访问限制在哪里(ios13访问限制在哪)

  • ios13怎么修复闪退(iphone13出现闪屏现象)

    ios13怎么修复闪退(iphone13出现闪屏现象)

  • 9523开头的号码是哪的(9523开头什么号码)

    9523开头的号码是哪的(9523开头什么号码)

  • 计算机网络包括哪些内容(计算机网络包括哪些方面)

    计算机网络包括哪些内容(计算机网络包括哪些方面)

  • w10系统还原要多久(还原系统win10要多久)

    w10系统还原要多久(还原系统win10要多久)

  • 实况怎么拍久一点(实况怎么拍的久)

    实况怎么拍久一点(实况怎么拍的久)

  • word表格文字总是偏上(word表格文字总是竖着)

    word表格文字总是偏上(word表格文字总是竖着)

  • 腾讯微云如何解除绑定(腾讯微云如何解压zip)

    腾讯微云如何解除绑定(腾讯微云如何解压zip)

  • 蚂蚁森林无纸化阅读能量怎么计算(蚂蚁森林无纸化阅读攻略)

    蚂蚁森林无纸化阅读能量怎么计算(蚂蚁森林无纸化阅读攻略)

  • 福建税务网上办税流程
  • 免税收入是什么票据类型
  • 车船税保险公司会不会多收
  • 出租房屋收取的水电费如何记账
  • 工程劳务费计入哪个会计科目
  • 终止销售关系怎么处理
  • 企业重组个人股东个人所得税
  • 无形资产报废的例题
  • 当月少计提工资下月怎么处理?
  • 外经证提交一般要多久可以通过
  • 广告公司可以开维修费吗
  • 进项税已入账未结转
  • 营改增退税政策
  • 发票的单价开得太低了怎么办?
  • 技术开发费税率13还是60
  • 危险废物处理费用发票怎么开
  • 小微企业不超过300万所得税
  • 实收资本印花税最新政策2023年
  • 个税免税收入填错了怎么办
  • 软件企业研发费用占比要求
  • 破产清算重整和解
  • 一次性收取一年服务费怎么确定收入
  • 加计抵减是什么时候开始的
  • 什么是应收
  • 旅游门票怎么做分录
  • 事业单位财政拨款是编制吗
  • 收到其他公司的罚款会计分录
  • 固定资产进项发票
  • 工厂返费能拿到吗
  • 商品购进核算
  • setlang.exe - setlang是什么进程 有什么用
  • php制作数字验证码
  • 会计的四大基本要素
  • 企业年金基金收支情况
  • jar启动指定启动类
  • el-table懒加载合并行
  • 企业所得税季初数怎么填
  • 基金公司做销售有前途吗
  • 微信小店的入口在哪里
  • vue3.0用法
  • 外贸企业出口免税政策
  • 保障金需要还吗
  • 实收资本注入怎么操作
  • 合伙企业分红怎么做账
  • SQLite中的WAL机制详细介绍
  • 融资租赁的固定资产
  • 酒类许可证过期了去哪里换证
  • 合并报表抵消分录
  • 基本户开立账户清单
  • 哪种营业执照不用交税开店有营业执照有什么好
  • 金融放贷工作具体做什么
  • 怎么计提固定资产的累计折旧
  • 小规模纳税人免税政策
  • 土地使用税的账务处理分录
  • 2、开办费用计入哪个账户?
  • 新会计准则贷款计提贷款减值准备的比例
  • 如何理解啥意思
  • 采购商品验收入库的会计分录怎么写
  • 现金流量表和利润表的勾稽关系
  • 股权关系怎么描述
  • windows server 202
  • 在windows操作中
  • 系统磁盘碎片整理
  • armcc.exe
  • win10预览版好吗
  • 第一次安装ps后需要哪些设置
  • win7注册表详解
  • 右键回收站一直转圈
  • win7系统检测
  • css中文手册
  • cocos2dx 3.3 quick lua 实现返回键退出程序
  • linux用c语言实现命令功能
  • 显示自己的ip的手机
  • android新手入门
  • 安卓开发例子
  • JAVASCRIPT THIS详解 面向对象
  • 税务文书档案保管期限
  • 社保申报后多久缴费
  • 单位为员工报销医药
  • 太原市小店区电影院营业时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设