利用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 接口函数：

• navigator.serial.requestPort()：弹出一个选择对话框，让用户选择一个串行端口装备。
  
• port.open(baudrate): 打开指定的串行端口，并指定波特率。
  
• port.write(data): 将数据写入打开的串行端口。
  
• port.readable.getReader(): 获取可读取流。
  
• reader.read(): 从串行端口读取数据。
  
• reader.cancel(): 取消当前读取操作。
  
• 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
        



来源：https://blog.csdn.net/Stanford_sun/article/details/131016379
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！