Vue使用Serial连接串口

这篇具有很好参考价值的文章主要介绍了Vue使用Serial连接串口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

2022-10-24本次更新:

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

2022-09-19本次更新:

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

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

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的工具类


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()) ===
          0
        );
      };
    },
    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>

三:示例截图

vue串口通信,vue,前端,1024程序员节

授权界面:

vue串口通信,vue,前端,1024程序员节

授权成功后:

vue串口通信,vue,前端,1024程序员节

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

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

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

vue串口通信,vue,前端,1024程序员节文章来源地址https://www.toymoban.com/news/detail-829086.html

到了这里,关于Vue使用Serial连接串口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【C#】【串口通信(Serial Port)】建议串口调试WinForm桌面应用实例——已实现功能<存在未知BUG>

    1、界面组件  2、界面实现代码 界面代码   3、逻辑代码 逻辑代码   4、效果展示   5、错误提醒   参考网址:C# 实现串口通信 - 编程教程 (17bigdata.com)

    2024年02月08日
    浏览(45)
  • sanic 使用websocket与前端vue通信,持续发送信息

    由于sanic使用较少,很难获取到有效信息,而且对websocket也是挺“一窍不通”的,因此写一下总结。在使用过程中,对sanic注册websocket,还是使用socketio不清。前端vue是使用io,还是WebSocket还是VueSocketIO。 API:sanic.add_websocket_route是Sanic框架自带的一个方法,用于添加WebSocket路由

    2024年02月11日
    浏览(66)
  • 1024程序员狂欢节有好礼 | 前沿技术、人工智能、集成电路科学与芯片技术、新一代信息与通信技术、网络空间安全技术

    🌹欢迎来到 爱书不爱输的程序猿 的博客, 本博客致力于知识分享,与更多的人进行学习交流 🚩🚩🚩 点击直达福利 一年一度的1024程序员狂欢节又到啦!成为更卓越的自己,坚持阅读和学习,别给自己留遗憾,行动起来吧! 那么,都有哪些好书值得入手呢?小编为大家整理

    2024年02月08日
    浏览(76)
  • Vue3项目(Vite+TS)使用Web Serial Api全记录

    之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中,不如部署到服务器上,这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt,得到了以下答案

    2024年02月02日
    浏览(43)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

    模板代码 创建 srcviewsDetailindex.vue 文件,添加以下代码: 配置路由 在 srcrouterindex.js 中添加对应路由【 /detail/{goodId} 】: 链接跳转 对 srcviewsHomecomponentsHomeNew.vue 文件及其他涉及商品信息的页面修改路由跳转: 封装接口 在 srcapisdetail.js 文件中封装接口用于获取商品信息

    2024年02月10日
    浏览(56)
  • 后端程序员的前端必备【Vue】 - 07 ES6新语法

    使用let定义变量能更加精准的确定变量的作用域 使用const定义常量,常量一旦定义不可以改变 使用模板字符串可以避免大量的字符串拼接 类似于springmvc中接受参数拥有默认值 使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式) 箭头函数应用 定义:从一个大的数

    2024年02月04日
    浏览(45)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(八)登录页面

    登录页面的主要功能就是表单校验和登录登出业务。 account password cdshi0080 123456 cdshi0081 123456 cdshi0082 123456 cdshi0083 123456 cdshi0084 123456 cdshi0085 123456 cdshi0086 123456 cdshi0087 123456 cdshi0088 123456 模版代码 在 srcviewsLoginindex.vue 中添加登录页代码: 配置路由跳转 修改 srcviewsLayoutcompon

    2024年02月10日
    浏览(51)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(一)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月15日
    浏览(79)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(41)
  • 前端mqtt的详细使用(包含mqtt服务器部署,前端vue3使用mqtt连接、订阅主题、发布等)

    ​ MQTT(消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的通讯协议,该协议构建于TCP/IP协议上。MQTT最大优点在于,可以以极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息服务。MQTT 协议的应用场景包括物联网、移动应用、车联网、智能

    2024年02月08日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包