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

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

常用的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>

示例效果截图

Vue中使用Web Serial API连接串口,实现通信交互,上位机,1024程序员节,chrome,嵌入式硬件

参考文章
Web Serial API,web端通过串口与硬件通信
Vue使用Serial连接串口文章来源地址https://www.toymoban.com/news/detail-718457.html

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

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

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

相关文章

  • [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日
    浏览(36)
  • 【C#】【串口通信(Serial Port)】建议串口调试WinForm桌面应用实例——已实现功能<存在未知BUG>

    1、界面组件  2、界面实现代码 界面代码   3、逻辑代码 逻辑代码   4、效果展示   5、错误提醒   参考网址:C# 实现串口通信 - 编程教程 (17bigdata.com)

    2024年02月08日
    浏览(48)
  • 使用Web3.js与OKX Web3钱包进行交互:实现去中心化应用的无缝连接

    随着Web3.0技术的不断发展,越来越多的开发者开始探索如何利用去中心化钱包与区块链网络进行交互。在这篇文章中,我们将深入探讨如何通过Web3.js库来连接和操作OKX Web3钱包,以实现对加密货币、NFT以及链上智能合约的管理和交易。 Web3.js 是一个由以太坊社区开发的核心

    2024年02月19日
    浏览(49)
  • Canoe CAPL语言实现TCP连接与通信流程(TCP相关API函数详细使用)

    本文主要讲解CAPL语言里是如何实现TCP连接通信的,所以在本文开始前需要一些前期准备。 1、 首先是需要了解TCP的报文格式,连接三次握手,断开连接四次挥手的相关知识,推荐以下两位博主文章。 深入浅出TCP三次握手 (多图详解) 两张动图-彻底明白TCP的三次握手与四次

    2024年02月07日
    浏览(238)
  • ROS2 Humble如何使用串口驱动?(Serial)

    目录 1. 串口库(Serial Library)简介: 2.  源码及主页 3.  国内git仓库(ROS2 humble已测试可用) 4. 可能出现的问题

    2024年02月16日
    浏览(42)
  • 使用 Web HID API 在浏览器中进行HID设备交互(纯前端)

    最近在搞HID透传 《STM32 USB使用记录:HID类设备(后篇)》 。 市面上的各种测试工具都或多或少存在问题,所以就自己写一个工具进行测试。目前来说纯前端方案编写这个工具应该是最方便的,这里对 Web HID API 相关内容做个记录。 Web HID API 相关内容参考如下: https://develop

    2024年01月19日
    浏览(48)
  • 使用web3.js连接Metamask钱包并完成合约交互

    Web3.js是一个用于与以太坊网络进行交互的JavaScript库。Metamask是一个以太坊钱包插件,可以在浏览器中创建和管理以太坊账户。本文将介绍如何使用web3.js库连接Metamask钱包,并完成与智能合约的交互。 Web3.js是一个用于与以太坊网络进行交互的JavaScript库。它提供了一些方法和功

    2024年03月16日
    浏览(52)
  • c#如何使用 USB(Universal Serial Bus)进行通信

    在C#中,可以使用System.Management命名空间下的ManagementObjectSearcher和ManagementObject类,通过WMI(Windows Management Instrumentation)API来实现USB通信。这种方式可以通过USB设备的设备ID、厂商ID等信息来寻找并打开USB设备,并进行数据读写。 以下是一个简单的USB通信示例代码:

    2024年02月02日
    浏览(45)
  • Android串口开发之使用JNI实现ANDROID和串口通信

    导语:Android串口通信在物联网、智能家居等领域具有广泛的应用。本文将详细介绍如何使用JNI技术实现Android设备与串口的通信,包括串口的打开、设置参数和读写数据等过程。 在开始介绍Android串口开发之前,我们需要了解以下几个概念: JNI:JNI(Java Native Interface)是一种

    2024年02月07日
    浏览(48)
  • vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)

    什么是postMessage postMessage 是 html5 引入的 API ,它允许来自 不同源 的脚本采用 异步方式进行有效的通信 ,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为 跨域通信 的一种有效的解决方案. vue父页面(嵌入iframe的页面) 在vue中要使用iframe上的pos

    2023年04月25日
    浏览(65)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包