[VUE] Web Serial API的简单示例-Toy模板网

这篇具有很好参考价值的文章主要介绍了[VUE] Web Serial API的简单示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
  <div class="home">
    <div>
      <input type="text" v-model="inputData" placeholder="输入要发送的数据" />
      <button @click="sendData">发送</button>
    </div>
    <div>
      <textarea v-model="receivedData" readonly></textarea>
    </div>
    <button @click="initSerial">Initialize Serial Connection</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      port: null,

      inputData: "", // 用于存储输入的数据
      receivedData: "", // 用于存储接收到的数据
    };
  },
  created() {
  },
  methods: {
    async initSerial() {
      try {
        this.port = await navigator.serial.requestPort();
        console.log("port: ", this.port);
        await this.port.open({ baudRate: 115200 });

        this.readData();

        // 监听设备连接
        navigator.serial.addEventListener("connect", (event) => {
          console.log("设备已连接");
        });
        // 监听设备断开
        navigator.serial.addEventListener("disconnect", (event) => {
          console.log("设备已断开");
        });
      } catch (error) {
        console.error("Serial connection error:", error);
      }
    },
    async readData() {
      const decoder = new TextDecoder("utf-8"); // 指定字符编码方式
      const reader = this.port.readable.getReader();
      try {
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            break;
          }

          const decodedString = decoder.decode(value); // 将字节数组解码为字符串

          // 处理接收到的数据
          console.log("Received data:", decodedString);
          this.receivedData += decodedString;
        }
      } catch (error) {
        console.error("Serial read error:", error);
      } finally {
        reader.releaseLock();
      }
    },
    async sendData() {
      console.log("data: ", this.inputData);
      const writer = this.port.writable.getWriter();
      const encoder = new TextEncoder();
      const dataArray = encoder.encode(this.inputData);
      try {
        await writer.write(dataArray);
        writer.releaseLock();
      } catch (error) {
        console.error("Serial write error:", error);
      }
      this.inputData = "";
    },
    async disconnectSerialPort(port) {
      try {
        await port.close(); // 关闭串口连接
        console.log("Serial port disconnected.");
      } catch (error) {
        console.error("Error disconnecting serial port:", error);
      }
    },
  },
};
</script>

[VUE] Web Serial API的简单示例,前端,vue.js,javascript