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

这篇具有很好参考价值的文章主要介绍了利用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

/* 
生命周期函数
当挂载完成之后,对浏览器是否支持本网页进行检查
*/
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 实现效果

vue串口通信,单片机,嵌入式硬件

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

五、完整代码

        链接:点击进入 
        提取码:ea9d
        文章来源地址https://www.toymoban.com/news/detail-629644.html

到了这里,关于利用Web Serial API实现Vue与单片机串口通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Proteus基于51单片机利用虚拟串口实现主从机的通信

    最近在学校做单片机课程实验时,需要在Proteus上实现串口的通信,具体要求如下: 在此记录一下本人的解题方案,首先Proteus中的原理图绘制如下 其中虚拟串口可在元件库中搜索COMPIM获得。 将原件按上图连接完毕后,将各个虚拟串口的收发波特率设置为19200,并分别赋予CO

    2024年02月08日
    浏览(38)
  • 利用单片机实现数码管依次显示数字0到9以及0到F

    本次暂时只写了共阴极数码管的实现。 一、显示数字从0-9。 (注:图片有点问题,之前写的时候·没注意,现在下边的代码已经更正了。代码是正确的。) 锁存器。锁存器就是把当前的状态锁存起来,使CPU 送出的数据在接口电路的输出端保持一段时间锁存后状态不再发生变

    2024年02月11日
    浏览(37)
  • 利用AT89C52单片机实现数码管的静态与动态显示

            资源work1和work2(完整工程文件在笔者本人主页的资源中,免费欢迎下载)分别完成下面两个任务:         1、单片机接矩阵键盘和2个静态数码管,自行设计硬件电路,利用汇编语言,要求将按键值(0~15)在数码管显示。         主要代码: ……      

    2024年02月02日
    浏览(46)
  • [VUE] Web Serial API的简单示例

      Web Serial API:Web Serial API WebUSB API:WebUSB API - Web APIs | MDN Serial Terminal : https://googlechromelabs.github.io/serial-terminal/ 相关文章: 什么,网页也能直接与硬件通信?Web Serial API!|8月更文挑战 什么,网页也能直接与硬件通信?Web Serial API!|8月更文挑战 - 掘金 【10. 连接硬件设备至

    2024年02月10日
    浏览(34)
  • STC89C52单片机利用DHT11温湿度模块以及HC-08蓝牙模块实现测量温湿度

    下面将介绍如何利用STC89C52单片机和DHT11温湿度模块以及HC-08蓝牙模块实现测量温湿度。以及各模块的使用方法。 利用DHT11温湿度模块测量温湿度,利用HC-08蓝牙模块将数据传到手机上。 1.1DHT11温湿度模块外观 1.2DHT11温湿度模块使用方法简介 1.2.1DHT11温湿度模块工作的过程 用户

    2024年02月02日
    浏览(62)
  • 51单片机---编程实现流水灯----键盘控制数码管显示--利用74LS164扩展并行输出口---定时中断方式驱动一个数码管

    目录 基于51单片机,用c语言编程实现流水灯 代码: 使用C语言编写的基于51单片机的键盘控制数码管显示 代码: 基于51单片机,用c语言编程实现利用74LS164扩展并行输出口 代码: 基于51单片机,用c语言编程实现定时中断方式驱动一个数码管  代码:  1- 2- 上述代码中,使用

    2024年02月16日
    浏览(49)
  • Vue3项目(Vite+TS)使用Web Serial Api全记录

    之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中,不如部署到服务器上,这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt,得到了以下答案

    2024年02月02日
    浏览(43)
  • 利用51单片机进行LED 跑马灯设计

    题目:         使用单片机驱动8个LED,2个按键并实现跑马灯功能。         当按下按键1时,LED 从左至右依次点亮,全亮后再从右至左依次熄灭,全灭后再从左至右依次点亮,依次循环下去。        当按下按键2 时,LED 从右至左依次点亮,全亮后再从左至右依次熄

    2024年02月07日
    浏览(43)
  • 【51单片机】利用【时间延迟】的原理规避【按键抖动问题】

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 本章是51LCD单片机设计的一个环节,完整可前往相应博客查看完整 传送门 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专栏 YY的《C++11》专栏 YY的《Lin

    2024年02月20日
    浏览(56)
  • 利用单片机余晖依次显示,同时显示 数码管的数字

    #include reg51.h //Êý×é±íʾ Êý×Ö0-9   16½øÖÆ unsigned char arr[10] = {0xc0, 0xf9, 0xa4, 0xb0, 0x99, 0x92, 0x82, 0xf8, 0x80, 0x90}; sbit q1 = P2^0; sbit q2 = P2^1; sbit q3 = P2^2; sbit q4 = P2^3; //ʱ¼ä³¤ ÒÀ´ÎÏÔʾ1234 void delay() {     int i;     for(i = 1; i 20000; i++){} } //ʱ¼ä¶Ì ͬʱÏÔʾ1234 void delay_

    2024年04月26日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包