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

news2024/12/25 2:38:36

一、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

/* 
生命周期函数
当挂载完成之后,对浏览器是否支持本网页进行检查
*/
onMounted(() => {
    if ("serial" in navigator) {
    } else {
        ElNotification({
            title: '浏览器版本低',
            message: '您的浏览器版本太低,可能不支持浏览器串口的使用',
            type: 'error',
            duration: 20000
        })
    }
})

4.2 选择串口

按键click的响应函数

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

4.3 串口配置信息

// 串口配置
const port = ref(null)
const reader = ref(null)
const message = ref(null)
const connected = ref(null)
const serialOptions = {
    baudRate: 9600,
    flowControl: 'none',
    dataBits: 8
};

4.4 打开串口接收信息

// 2.打开串口
const openSerial = async () => {
    try {
        await port.value.open(serialOptions)
        reader.value = port.value.readable.getReader()
        connected.value = true
    } catch (error) {
        ElNotification({title: '打开串口失败',message: error,type: 'warning',duration: 2000})
        return;
    }
    ElNotification({title: '打开串口成功',message: '串口等待接收信息中',type: 'success',duration: 2000})
    readLoop()
}
// readLoop()串口读取函数
async function readLoop() {
    try {
        while (connected.value) {
            const { value, done } = await reader.value.read()
            if (done) {
                reader.value.releaseLock()
                break
            }
            message.value = new TextDecoder().decode(value)
        }
    } catch (error) {
        ElNotification({title: '读取串口失败',message: `串口读取信息失败:${error}`,type: 'error',duration: 2000})
    }
}

4.5 关闭串口

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

4.6 实现效果

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

五、完整代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/604037.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为OD机试真题 Java 实现【报数游戏】【2022Q4 100分】

一、题目描述 100个人围成一圈,每个人有一个编码,编号从1开始到100。他们从1开始依次报数,报到为M的人自动退出圈圈,然后下一个人接着从1开始报数,直到剩余的人数小于M。请问最后剩余的人在原先的编号为多少&#xff…

【JavaSE】Java基础语法(四十五):TCP UDP 全解

文章目录 1. TCP发送数据2. TCP接收数据【应用】3. TCP程序练习4. TCP程序文件上传练习【应用】5. UDP发送数据6. UDP接收数据【应用】7. UDP通信程序练习【应用】8. UDP三种通讯方式 1. TCP发送数据 Java中的TCP通信 Java对基于TCP协议的的网络提供了良好的封装,使…

chatgpt赋能python:Python删除文件目录

Python删除文件目录 Python是一种高级编程语言,广泛应用于开发各种类型的应用程序。Python的许多功能使其成为开发者的首选编程语言之一。在这篇文章中,我们将讨论如何使用Python删除文件和目录。 文件和目录的区别 在开始之前,让我们了解…

16_Linux内核启动流程

目录 链接脚本vmlinux.Ids Linux内核入口stext mmap_switched函数 start_kernel函数 rest_init函数 init进程 链接脚本vmlinux.Ids 要分析Linux启动流程,同样需要先编译一下Linux源码,因为有很多文件是需要编译才会生成的。首先分析Linux内核的连接脚本文件arch/arm/kem…

【Python】Python系列教程-- Python3 字符串(十一)

文章目录 前言Python3 字符串Python 访问字符串中的值Python 字符串更新Python 转义字符Python 字符串运算符Python 字符串格式化Python三引号f-stringUnicode 字符串Python 的字符串内建函数 前言 往期回顾: Python系列教程–Python3介绍(一&#xff…

计算机网络-网络层1.0

传输单位 网络层将分组从源端传到目的端,为分组交换网上的不同主机提供通信服务,传输单位为数据报 路由器 完成路由选择和分组转发 路由选择:按照分布式算法,根据从相邻路由器所得到的的关于整个网络拓扑的变化情况&#xff0…

操作系统第二章​练习题

第一部分 教材习题(P84) 1、什么是前趋图?为什么要引入前趋图?​ 前趋图:是用于描述程序段或进程之间执行的先后顺序的有向无循环图。 引入的原因:为了更好的描述程序的顺序和并发执行的情况。 试画出下面4条语句的前趋图&#…

LeetCode 2559 统计范围内的元音字符串数

LeetCode 2559 统计范围内的元音字符串数 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/count-vowel-strings-in-ranges/description/ 博主Github:https://github.com/GDUT-Rp/LeetCode 题目:…

Vue3小兔鲜:组合式写法入门

Vue3&#xff1a;组合式写法入门 Date: May 11, 2023 认识Vue3 1. Vue3组合式API体验 通过 Counter 案例 体验Vue3新引入的组合式API <script> export default {data(){return {count:0}},methods:{addCount(){this.count}} } </script><script setup> imp…

【JavaSE】Java基础语法(四十四):XML解析

文章目录 1. 概述2.标签的规则3. 语法规则【应用】4. xml解析【应用】 1. 概述 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域…

【分布族谱】高斯分布和逆高斯分布的关系

文章目录 高斯分布逆高斯分布简介通过高斯分布构造逆高斯分布 高斯分布 正态分布&#xff0c;又称Gauss分布&#xff0c;其概率密度函数入下图所示 正态分布 N ( μ , σ ) N(\mu, \sigma) N(μ,σ)受到期望 μ \mu μ和方差 σ 2 \sigma^2 σ2的调控&#xff0c;其概率密度函…

基于SpringBoot+Vue的医疗服务系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

Qt for Android环境配置(联合Android Studio)

目录 1.安装JDK2.安装Android Studio并下载必要组件3.安装QtCreator并配置 Official Doc 1.安装JDK Oracle JDK Download 配置环境变量&#xff1a; 2.安装Android Studio并下载必要组件 Android Studio Download 下图中&#xff0c;31.0.0是当前Qt必需的&#xff0c;3…

chatgpt赋能python:Python制作抽奖——让你的活动更有趣

Python制作抽奖——让你的活动更有趣 在活动中&#xff0c;抽奖环节常常是一大亮点。而用Python制作抽奖程序&#xff0c;则可以更灵活、更实用地完成这个环节。接下来我们将介绍Python制作抽奖的方法&#xff0c;并且说明如何让你的抽奖环节更加有趣。 Python制作抽奖的方法…

【Linux网络服务】Nginx优化

Nginx网页优化 一、配置Nginx网页缓存时间1.1设置方法 二、隐藏Nginx版本号2.1方法一&#xff1a;修改配置文件2.2方法二&#xff1a;修改源码文件&#xff0c;重新编译 三、修改用户与组四、日志切割五、连接超时六、更改进程数七、网页压缩八、配置防盗链九、Linux内核参数优…

华为OD机试真题 Java 实现【素数之积】【2022Q4 100分】

一、题目描述 RSA加密算法在网络安全世界中无处不在&#xff0c;它利用了极大整数因数分解的困难度&#xff0c;数据越大&#xff0c;安全系数越高。 给定一个32位正整数&#xff0c;请对其进行因数分解&#xff0c;找出是哪两个素数的乘积。 二、输入描述 一个正整数num …

基于物理信息的神经网络(Physics-informed Neural Networks;PINNs)Part-1(简单介绍)

【摘要】 基于物理信息的神经网络&#xff08;Physics-informed Neural Networks&#xff0c;简称PINNs&#xff09;&#xff0c;是一类用于解决有监督学习任务的神经网络&#xff0c;它不仅能够像传统神经网络一样学习到训练数据样本的分布规律&#xff0c;而且能够学习到数学…

段的概念-汇编复习(3)

本文小节讨论内容&#xff1a;"段地址x16偏移地址物理地址”的本质含义,段 的 概 念 "段地址x16偏移地址物理地址”的本质含义 注意&#xff0c;这里讨论的是 8086CPU 段地址和偏移地址的本质含义&#xff0c;而不是为了解决具体的问题而在本质含义之上引申出来的更…

Node.js基本概念、特点、用途和常用模块,以及Express框架开发一个web应用

目录 一、Node.js的基本概念和特点 二、Node.js的用途 三、Node.js的常用模块 四、使用Node.js进行Web开发 1. 安装Node.js 2. PyCharm配置Node.js 3. 使用http库编写一个web服务 4. 使用Express框架构建Web应用程序 5. 调试代码 6. 发布应用程序 参考文章 Node.js是…

[转载]Nginx 使用 X-Accel-Redirect 实现静态文件下载的统计、鉴权、防盗链、限速等

需求 统计静态文件的下载次数&#xff1b;判断用户是否有下载权限&#xff1b;根据用户指定下载速度&#xff1b;根据Referer判断是否需要防盗链&#xff1b;根据用户属性限制下载速度&#xff1b; X-Accel-Redirect This allows you to handle authentication, logging or …