利用Web Serial API实现Vue与单片机串口通信

一、Web Serial API介绍

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

二、软件环境介绍

        浏览器版本：Google Chrome 版本 113.0.5672.127

        Node.js版本：Node.js v16.9.1

        Vue脚手架版本：@vue/cli 5.0.8

        Vue版本：vue : 3.2.13

        Element-plus版本：element-plus: 2.3.5

三、Web Serial API接口函数简介

        Web Serial API 提供了一些接口函数，用于在浏览器中访问串行端口设备并与之通信。以下是常用的 Web Serial API 接口函数：

1. navigator.serial.requestPort()：弹出一个选择对话框，让用户选择一个串行端口设备。

2. port.open(baudrate): 打开指定的串行端口，并指定波特率。

3. port.write(data): 将数据写入打开的串行端口。

4. port.readable.getReader(): 获取可读取流。

5. reader.read(): 从串行端口读取数据。

6. reader.cancel(): 取消当前读取操作。

7. port.close(): 关闭已打开的串行端口。

四、功能实现

4.1判断是否当前浏览器是否支持API

1. /*
2. 生命周期函数
3. 当挂载完成之后，对浏览器是否支持本网页进行检查
4. */
5. onMounted(() => {
6. if ("serial" in navigator) {
7. } else {
8. ElNotification({
9. title: '浏览器版本低',
10. message: '您的浏览器版本太低，可能不支持浏览器串口的使用',
11. type: 'error',
12. duration: 20000
13. })
14. }
15. })

4.2 选择串口

按键click的响应函数

1. // 选择串口
2. const chooseSerial = async () => {
3. // 提示用户选择一个串口
4. try {
5. port.value = await navigator.serial.requestPort();
6. console.log(port.value);
7. } catch (error) {
8. // 错误提示弹窗
9. ElNotification({title: '选择串口失败',message: '错误信息：' + error,type: 'warning',duration: 2000})
10. return;
11. }
12. ElNotification({title: '选择串口成功',message: '打开串口接收信息',type: 'success',duration: 2000})
13. }

4.3 串口配置信息

1. // 串口配置
2. const port = ref(null)
3. const reader = ref(null)
4. const message = ref(null)
5. const connected = ref(null)
6. const serialOptions = {
7. baudRate: 9600,
8. flowControl: 'none',
9. dataBits: 8
10. };

4.4 打开串口接收信息

1. // 2.打开串口
2. const openSerial = async () => {
3. try {
4. await port.value.open(serialOptions)
5. reader.value = port.value.readable.getReader()
6. connected.value = true
7. } catch (error) {
8. ElNotification({title: '打开串口失败',message: error,type: 'warning',duration: 2000})
9. return;
10. }
11. ElNotification({title: '打开串口成功',message: '串口等待接收信息中',type: 'success',duration: 2000})
12. readLoop()
13. }
14. // readLoop()串口读取函数
15. async function readLoop() {
16. try {
17. while (connected.value) {
18. const { value, done } = await reader.value.read()
19. if (done) {
20. reader.value.releaseLock()
21. break
22. }
23. message.value = new TextDecoder().decode(value)
24. }
25. } catch (error) {
26. ElNotification({title: '读取串口失败',message: `串口读取信息失败：${error}`,type: 'error',duration: 2000})
27. }
28. }

4.5 关闭串口

1. // 3.关闭串口
2. const closeSerial = async () => {
3. try {
4. await reader.value.cancel()
5. await port.value.close()
6. connected.value = false
7. } catch (error) {
8. ElNotification({title: '关闭串口失败',message: '请检查后重新关闭串口',type: 'warning',duration: 2000})
9. return;
10. }
11. ElNotification({title: '关闭串口成功',message: `已关闭串口:${port.value.name}`,type: 'success',duration: 2000})
12. }

4.6 实现效果

         功能完美实现，可以选择串口，打开串口，接收信息，在不使用之后，也可以关闭串口。美中不足的就是没有实现串口配置的功能，只能是代码写多少，就有多少。

五、完整代码

        链接：点击进入 
        提取码：ea9d