• Vue使用Serial连接串口

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

    注意：

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

    一：常用API介绍

    1. requestPort----获取授权串口

    2. open-----打开串口

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

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

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

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

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

    二：代码示例

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

    1.  
    2. export default class MySerialPort  {
    3.   constructor() {
    4.     this.state = {
    5.       portIndex: undefined,
    6.       ports: [],
    7.       isOpen: false,
    8.       writeType: 1,
    9.       readType: 1,
    10.       isScroll: true,
    11.       readValue: [],
    12.       status:false,
    13.       //port参数
    14.       baudRate: "9600",
    15.       dataBits: "8",
    16.       stopBits: "1",
    17.       parity: "none",
    18.       flowControl: "none",
    19.     };
    20.     this.keepReading=false;
    21.     this.getPorts = this.getPorts.bind(this);
    22.     this.handleRequestPort = this.handleRequestPort.bind(this);
    23.     this.handleChildrenChange = this.handleChildrenChange.bind(this);
    24.     this.readText = this.readText.bind(this);
    25.     this.writeText = this.writeText.bind(this);
    26.     this.handleClear = this.handleClear.bind(this);
    27.     this.a2hex = this.a2hex.bind(this);
    28.     this.hex2a = this.hex2a.bind(this);
    29.     this.reader={};
    30.     this.closed;
    31.   }
    32.  
    33.   async getPorts() {
    34.     // 获取已授权的全部串口
    35.     let ports = await navigator.serial.getPorts();
    36.     this.setState({
    37.       ports,
    38.     });
    39.   }
    40.   async handleRequestPort() {
    41.     // 请求授权
    42.     try {
    43.       await navigator.serial.requestPort();
    44.       await this.getPorts();
    45.     } catch (e) {
    46.       this.$message.error(e.toString());
    47.     }
    48.   }
    49.   async openPort(portIndex, isOpen,callBack=null) {
    50.     // 打开串口
    51.     let port = this.state.ports[portIndex];
    52.     if (!isOpen) {
    53.       // 关闭串口
    54.       this.keepReading = false;
    55.       this.reader.cancel();
    56.       await this.closed;
    57.       this.handlePortOpen({
    58.         portIndex,
    59.         isOpen,
    60.       });
    61.     } else {
    62.       await port.open({
    63.         baudRate: this.state.baudRate,
    64.         dataBits: this.state.dataBits,
    65.         stopBits: this.state.stopBits,
    66.         parity: this.state.parity,
    67.         flowControl: this.state.flowControl,
    68.       });
    69.       this.handlePortOpen({
    70.         portIndex,
    71.         isOpen,
    72.       });
    73.       this.keepReading = true;
    74.       this.closed=this.readUntilClosed(portIndex,callBack);
    75.     }
    76.   }
    77.   async readUntilClosed(portIndex,callBack=null) {
    78.     let port = this.state.ports[portIndex];
    79.     while (port.readable && this.keepReading) {
    80.       this.reader = port.readable.getReader();
    81.       try {
    82.         while (true) {
    83.           const { value, done } = await this.reader.read();
    84.           if (done) {
    85.             break;
    86.           }
    87.           this.readText(value);
    88.           callBack(value)
    89.         }
    90.       } catch (error) {
    91.         this.$message.error(error.toString());
    92.       } finally {
    93.         this.reader.releaseLock();
    94.       }
    95.       await port.close();
    96.     }
    97.   }
    98.  
    99.   handlePortOpen({ portIndex, isOpen }) {
    100.     // 处理打开串口
    101.     this.setState({
    102.       portIndex,
    103.       isOpen,
    104.     });
    105.   }
    106.   handleChildrenChange(type, value) {
    107.     this.setState({
    108.       [type]: value,
    109.     });
    110.   }
    111.   portWrite(value) {
    112.     return new Promise(async (resolve, reject) => {
    113.       if (!this.state.isOpen) {
    114.         this.$message.error("串口未打开");
    115.         reject();
    116.         return;
    117.       } else {
    118.         let port = this.state.ports[this.state.portIndex];
    119.         const writer = port.writable.getWriter();
    120.         await writer.write(new Uint8Array(value));
    121.         writer.releaseLock();
    122.         resolve(value);
    123.       }
    124.     });
    125.   }
    126.   readText(value) {
    127.     console.log(value, "读取");
    128.     let newValue = this.state.readValue.concat({
    129.       value,
    130.       type: 1,
    131.     });
    132.     this.setState({
    133.       readValue: newValue,
    134.     });
    135.   }
    136.   writeText(value) {
    137.     console.log(value, "写入");
    138.     this.portWrite(value).then((res) => {
    139.       let newValue = this.state.readValue.concat({
    140.         value: res,
    141.         type: 2,
    142.       });
    143.       this.setState({
    144.         readValue: newValue,
    145.       });
    146.     });
    147.   }
    148.   handleClear() {
    149.     this.setState({
    150.       readValue: [],
    151.     });
    152.   }
    153.   componentDidMount() {
    154.     this.getPorts();
    155.   }
    156.   handleState(status) {
    157.     this.setState({
    158.       status,
    159.     });
    160.   }
    161.   setState(obj){
    162.     Object.keys(this.state).forEach(key => {
    163.            if(obj[key]!=undefined){
    164.             this.state[key]=obj[key]
    165.            }
    166.       });
    167.   }
    168.   //字节转字符串
    169.   hex2a(arr) {
    170.     return String.fromCharCode.apply(String,arr);
    171.   }
    172.   //字符转16进制
    173.  a2hex(str) {
    174.     return str.charCodeAt(0);
    175. }
    176. }

     vue代码：

    1. <template>
    2.   <div>
    3.     <el-row
    4.       type="flex"
    5.       class="row-bg"
    6.       justify="center"
    7.       v-show="portsList.length == 0"
    8.     >
    9.       <el-col :span="7"
    10.         ><div style="margin-top: 400px">
    11.           <span style="display: block">
    12.             仅支持Chrome 89+或者Edge 89+浏览器(安全上下文（HTTPS）中可用)
    13.           span>
    14.           <el-button type="primary" @click="obtainAuthorization"
    15.             >授权
    16.           >
    17.         div>
    18.       >
    19.     el-row>
    20.     <el-form
    21.       v-show="portsList.length > 0"
    22.       ref="form"
    23.       :model="form"
    24.       label-width="100px"
    25.     >
    26.       <el-row>
    27.         <el-col :span="6"
    28.           ><div>
    29.             <el-form-item label="串口">
    30.               <el-select
    31.                 v-model="form.port"
    32.                 filterable
    33.                 placeholder="请选择串口"
    34.                 :disabled="isDisable"
    35.               >
    36.                 <el-option
    37.                   v-for="item in portsList"
    38.                   :key="item.value"
    39.                   :label="item.label"
    40.                   :value="item.value"
    41.                 >
    42.                 el-option>
    43.               el-select>
    44.             el-form-item>
    45.             <el-form-item label="波特率">
    46.               <el-autocomplete
    47.                 popper-class="my-autocomplete"
    48.                 v-model="form.baudRate"
    49.                 :fetch-suggestions="querySearch"
    50.                 placeholder="请输入波特率"
    51.                 :disabled="isDisable"
    52.               >
    53.                 <i class="el-icon-edit el-input__icon" slot="suffix"> i>
    54.                 <template slot-scope="{ item }">
    55.                   <div class="name">{{ item.value }}div>
    56.                   <span class="addr">{{ item.address }}span>
    57.                 template>
    58.               el-autocomplete>
    59.             el-form-item>
    60.             <el-form-item label="数据位">
    61.               <el-select
    62.                 v-model="form.dataBits"
    63.                 placeholder="请选择数据位"
    64.                 :disabled="isDisable"
    65.               >
    66.                 <el-option label="7" value="7">el-option>
    67.                 <el-option label="8" value="8">el-option>
    68.               el-select>
    69.             el-form-item>
    70.             <el-form-item label="停止位">
    71.               <el-select
    72.                 v-model="form.stopBits"
    73.                 placeholder="请选择停止位"
    74.                 :disabled="isDisable"
    75.               >
    76.                 <el-option label="1" value="1">el-option>
    77.                 <el-option label="2" value="2">el-option>
    78.               el-select>
    79.             el-form-item>
    80.  
    81.             <el-form-item label="校验位">
    82.               <el-select
    83.                 v-model="form.parity"
    84.                 placeholder="请选择校验位"
    85.                 :disabled="isDisable"
    86.               >
    87.                 <el-option label="None" value="None">el-option>
    88.                 <el-option label="Even" value="Even">el-option>
    89.                 <el-option label="Odd" value="Odd">el-option>
    90.               el-select>
    91.             el-form-item>
    92.  
    93.             <el-form-item label="流控制">
    94.               <el-select
    95.                 v-model="form.flowControl"
    96.                 placeholder="请选择流控制"
    97.                 :disabled="isDisable"
    98.               >
    99.                 <el-option label="None" value="None">el-option>
    100.                 <el-option label="HardWare" value="HardWare">el-option>
    101.               el-select>
    102.             el-form-item>
    103.  
    104.             <el-form-item label="发送区设置">
    105.               <el-radio-group v-model="form.type">
    106.                 <el-radio label="1">ASCIIel-radio>
    107.                 <el-radio label="2">HEXel-radio>
    108.               el-radio-group>
    109.             el-form-item>
    110.  
    111.             <el-form-item label="发送信息">
    112.               <el-input type="textarea" v-model="form.sendMsg">el-input>
    113.             el-form-item>
    114.  
    115.             <el-form-item>
    116.               <el-button :type="btnType" @click="connectBtn">{{
    117.                 btnText
    118.               }}el-button>
    119.               <el-button type="info" @click="obtainAuthorization"
    120.                 >新增授权
    121.               >
    122.               <el-button type="primary" @click="sendCommon">发送el-button>
    123.             el-form-item>
    124.           div>
    125.         el-col>
    126.         <el-col :span="15"
    127.           ><div>
    128.             <el-form-item label="电子秤信息">
    129.               <el-input
    130.                 type="textarea"
    131.                 v-model="form.desc"
    132.                 disabled
    133.                 :autosize="{ minRows: 25, maxRows: 50 }"
    134.               >el-input>
    135.             el-form-item>
    136.         >el-col>
    137.       el-row>
    138.     el-form>
    139.   div>
    140. template>
    141.  
    142. <script>
    143. import MySerialPort from "./MySerialPort";
    144. export default {
    145.   data() {
    146.     return {
    147.       input: "",
    148.       keepReading: true,
    149.       form: {
    150.         baudRate: "9600",
    151.         dataBits: "8",
    152.         stopBits: "1",
    153.         parity: "None",
    154.         flowControl: "None",
    155.         desc: "",
    156.         type: "1",
    157.       },
    158.       btnType: "primary",
    159.       btnText: "连接串口",
    160.       restaurants: [],
    161.       portsList: [],
    162.     };
    163.   },
    164.   mounted() {
    165.     navigator.serial.addEventListener("connect", (e) => {
    166.       this.$message.success("设备已连接");
    167.       this.getPorts();
    168.     });
    169.     navigator.serial.addEventListener("disconnect", (e) => {
    170.       this.$message.error("设备已断开");
    171.     });
    172.     this.restaurants = this.loadAll();
    173.     if ("serial" in navigator) {
    174.       this.myserialport = new MySerialPort();
    175.       this.getPorts();
    176.     }
    177.   },
    178.   computed: {
    179.     isDisable() {
    180.       return this.btnType == "danger";
    181.     },
    182.   },
    183.   methods: {
    184.     //接受数据的回调
    185.     callBack(value) {
    186.       this.form.desc = this.myserialport.hex2a(value);
    187.     },
    188.     //连接
    189.     async connectBtn() {
    190.       if (this.btnType == "primary") {
    191.         try {
    192.           await this.myserialport.openPort(this.form.port, true, this.callBack);
    193.         } catch (error) {
    194.           this.$message.error("串口连接失败！请检查串口是否已被占用");
    195.         }
    196.         if (this.myserialport.state.isOpen) {
    197.           this.$message.success("串口连接成功");
    198.           this.btnType = "danger";
    199.           this.btnText = "关闭串口";
    200.         }
    201.       } else {
    202.         this.myserialport.openPort(this.form.port, false, this.callBack);
    203.         this.$message.success("串口关闭成功");
    204.         this.btnType = "primary";
    205.         this.btnText = "连接串口";
    206.       }
    207.     },
    208.     //授权
    209.     async obtainAuthorization() {
    210.       if ("serial" in navigator) {
    211.         console.log("The Web Serial API is supported.");
    212.         if (!this.myserialport) this.myserialport = new MySerialPort();
    213.         try {
    214.         await this.myserialport.handleRequestPort();
    215.           this.$message.success("串口授权成功");
    216.         this.getPortInfo(this.myserialport.state.ports);
    217.         } catch (error) {
    218.           this.$message.warning("未选择新串口授权！");
    219.         }
    220.       } else {
    221.         this.$message.error(
    222.           "当前为HTTP模式或者浏览器版本过低，不支持网页连接串口"
    223.         );
    224.       }
    225.     },
    226.     //串口列表初始化
    227.     getPortInfo(portList) {
    228.       this.portsList = [];
    229.       portList.map((port, index) => {
    230.         const { usbProductId, usbVendorId } = port.getInfo();
    231.         if (usbProductId === undefined || usbVendorId === undefined) {
    232.           this.portsList.push({ label: "未知设备" + index, value: index });
    233.         }
    234.       });
    235.     },
    236.     // 发送
    237.     async sendCommon() {
    238.       if (this.myserialport.state.isOpen) {
    239.         if (this.form.sendMsg.length !== 0) {
    240.           const writeType = this.form.type;
    241.           let value = this.form.sendMsg;
    242.           let arr = [];
    243.           if (writeType == 1) {
    244.             // ASCII
    245.             for (let i = 0; i < value.length; i++) {
    246.               arr.push(this.myserialport.a2hex(value[i]));
    247.             }
    248.           } else if (writeType == 2) {
    249.             // HEX
    250.             if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
    251.               for (let i = 0; i < value.length; i = i + 2) {
    252.                 arr.push(parseInt(value.substring(i, i + 2), 16));
    253.               }
    254.             } else {
    255.               this.$message.error("格式错误");
    256.               return;
    257.             }
    258.           }
    259.           this.myserialport.writeText(arr);
    260.         } else {
    261.           this.$message.warning("请输入发送的信息");
    262.         }
    263.       } else {
    264.         this.$message.warning("串口处于关闭状态，请连接串口");
    265.       }
    266.     },
    267.     async getPorts() {
    268.       await this.myserialport.getPorts();
    269.       this.getPortInfo(this.myserialport.state.ports);
    270.     },
    271.     querySearch(queryString, cb) {
    272.       var restaurants = this.restaurants;
    273.       var results = queryString
    274.         ? restaurants.filter(this.createFilter(queryString))
    275.         : restaurants;
    276.       // 调用 callback 返回建议列表的数据
    277.       cb(results);
    278.     },
    279.     createFilter(queryString) {
    280.       return (restaurant) => {
    281.         return (
    282.           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
    283.           0
    284.         );
    285.       };
    286.     },
    287.     loadAll() {
    288.       return [
    289.         { value: "110" },
    290.         { value: "300" },
    291.         { value: "600" },
    292.         { value: "1200" },
    293.         { value: "2400" },
    294.         { value: "4800" },
    295.         { value: "7200" },
    296.         { value: "9600" },
    297.         { value: "14400" },
    298.         { value: "19200" },
    299.         { value: "28800" },
    300.         { value: "38400" },
    301.         { value: "56000" },
    302.         { value: "57600" },
    303.         { value: "76800" },
    304.         { value: "115200" },
    305.         { value: "230400" },
    306.         { value: "460800" },
    307.       ];
    308.     },
    309.   },
    310. };
    311. script>
    312.  
    313. <style scoped>
    314. /* /deep/ .el-textarea__inner {
    315.   height: 320px !important;
    316.   width: 80% !important;
    317. } */
    318. style>

    三：示例截图

    授权界面：

     

    授权成功后:

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

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

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

     

     

  • 相关阅读:
    基于粒子群优化的BP神经网络（分类应用） - 附代码
    【微信小程序】文章设置
    从一次性销售到持续收益：低代码服务商的转型之路
    RFID服装管理系统改善零售供应链
    【C语言笔记】dll库“__declspec”属性关键字总结，dllexport，dllimport
    JD（按关键字搜索商品）API接口
    MIME type备忘
    js基础算法
    vue报错信息汇总
    Android学习之路(18) 数据存储与访问
  • 原文地址：https://blog.csdn.net/ZhangY1217/article/details/125889000