Vue中使用Web Serial API连接串口，实现通信交互

Vue中使用Web Serial API连接串口，实现通信交互

Web Serial API，web端通过串口与硬件通信;
该API是JS本身 navigator 对象上就独有的，所以与Vue和React框架开发都没有太大的关系，
串口是一个双向通信接口，允许字节发送和接收数据。
Web Serial API为网站提供了一种使用JavaScript对串行设备进行读写的方法。串行设备可以通过用户系统上的串行端口连接，也可以通过模拟串行端口的可移动USB和蓝牙设备连接。
换句话说，Web Serial API通过允许网站与串行设备(如微控制器和3D打印机)通信来连接网络和物理世界。
这个API也是WebUSB的好伙伴，因为操作系统要求应用程序使用它们的高级串行API而不是低级的USB API与一些串行端口通信。

Web Serial API 是一项 Web 技术，用于在浏览器中访问串行端口设备（如 Arduino、传感器等）并与之通信。它提供了一组 JavaScript 接口，使得 Web 应用程序可以通过 USB 串行端口连接到硬件设备，并进行数据发送和接收操作。

判断浏览器支持串口通信

if ("serial" in navigator) {
  console.log(true);
} else {
  console.log(false);
}
1
2
3
4
5

常用的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()的写入方法

参考文档

Web Serial API
MDN Web Docs Web Serial API

示例完整代码

<template>
  <div class="serial-port">测试串口div>
  <el-button type="primary" @click="connectToSerialPort">连接串口el-button>
  <el-input
    v-model="inputData"
    maxlength="50"
    placeholder="输入发送数据内容"
    show-word-limit
    type="textarea"
  />
  <el-button type="success" @click="sendData">发送数据el-button>
  <el-button type="danger" @click="cutPort">断开串口el-button>
template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

const port = ref("");
const ports = ref([]);
const reader = ref("");

const connectToSerialPort = async () => {
  try {
    // 提示用户选择一个串口
    port.value = await navigator.serial.requestPort();

    // 获取用户之前授予该网站访问权限的所有串口。
    ports.value = await navigator.serial.getPorts();

    // console.log(port.value, ports.value);
    console.log(port.value);
    // 等待串口打开
    await port.value.open({ baudRate: 9600 });

    // console.log(typeof port.value);
    ElMessage({
      message: "成功连接串口",
      type: "success",
    });
    // readData(port.value);
    readData();
  } catch (error) {
    // 处理连接串口出错的情况
    console.log("Error connecting to serial port:", error);
  }
};

const readData = async () => {
  reader.value = port.value.readable.getReader();
  console.log(reader);
  // 监听来自串口的数据
  while (true) {
    const { value, done } = await reader.value.read();
    if (done) {
      // 允许稍后关闭串口
      reader.value.releaseLock();
      break;
    }
    // 获取发送的数据
    const serialData = new TextDecoder().decode(value);
    console.log(serialData);
    // value 是一个 Uint8Array
    console.log(value);
  }
};

const inputData = ref("");
//
const sendData = async () => {
  // if (port.value && port.value.isOpen) {
  if (port.value) {
    if (inputData.value) {
      const writer = port.value.writable.getWriter();
      console.log("发送数据");
      await writer.write(new TextEncoder().encode(inputData.value));
      await writer.close();
    } else {
      return ElMessage({
        message: "输入需要发送的数据内容",
        type: "warning",
        showClose: true,
        grouping: true,
        duration: 2000,
      });
    }
  } else {
    ElMessage({
      message: "串口未连接或未打开！",
      type: "warning",
      showClose: true,
      grouping: true,
      duration: 2000,
    });
    // console.error("串口未连接或未打开！");
  }
};

// 断开接口
const cutPort = async () => {
  if (port.value !== "") {
    await reader.value.cancel();
    await port.value.close();
    port.value = "";
    console.log("断开串口连接");
    ElMessage({
      message: "已成功断开串口连接",
      type: "success",
    });
  } else {
    ElMessage({
      message: "请先连接或打开串口",
      type: "warning",
      showClose: true,
      grouping: true,
      duration: 2000,
    });
    // console.error("串口未连接或未打开！");
  }
};

onMounted(() => {
  // 判断浏览器支持串口通信
  if ("serial" in navigator) {
    console.log(true);
  } else {
    console.log(false);
  }
  // 页面刷新提示
  // window.onbeforeunload = e => {
  //   console.log(e);
  //   // 兼容IE8和Firefox 4之前的版本
  //   if (e) {
  //     e.returnValue = '关闭提示'
  //   }
  //   // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  //   return '关闭提示'
  // }
});
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

示例效果截图

参考文章
Web Serial API，web端通过串口与硬件通信
Vue使用Serial连接串口