web serial API 连接多个串口实现

注意的点

• 需要手动配对，点个点击配对，浏览器配对后，以后就不用配对了，下面是配好对的显示
  

• 配对后需要开启串口，刷新后，串口需要重新开启

• 打包发布后 Navigator.serial = undefined
  由于安全限制，需要https环境
  或者生产环境的话没办法，本地环境可以设置浏览器的安全选项，忽略某个本地地址的安全校验

vue实现

• 手动点击需要配对的串口
• 该页面的时候，循环连接串口，并打开

vue

<el-button @click="setPort">第一次授权端口</el-button>
<el-button @click="getPort1">连接端口</el-button>

js

  mounted() {
    this.getPort1();
  },
  methods: {
    async setPort() {
      const port = await navigator.serial.requestPort();
    },
    async getPort1() {
      const ports = await navigator.serial.getPorts();
      let _this = this;
      ports.forEach((e) => {
        _this.getPort(e);
      });
    },
    async getPort(port) {
      console.log(port);
      /* const ports = await navigator.serial.getPorts();
        const port = ports[1];
      */
      await port.open({ baudRate: 9600 });
      while (port.readable) {
        const reader = port.readable.getReader();
        try {
          while (true) {
            const { value, done } = await reader.read();
            if (done) {
              // 允许稍后关闭串口。
              reader.releaseLock();
              break;
            }
            if (value) {
              let val = "";
              value.forEach((e) => {
                val += String.fromCharCode(e);
              });
              console.log('收到的数据：'+val);
            }
          }
        } catch (error) {
          // TODO: 处理非致命的读错误。
        }
      }
    },
  },