原生js的webserial实现连接串口数据

简介: 原生js的webserial实现连接串口数据

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:javaScript

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

js为什么要连接串口数据

在JavaScript中,连接串口数据通常是为了与外部设备进行通信和交互。例如,许多硬件设备(如Arduino板、传感器等)使用串口来与计算机通信。通过连接串口数据,JavaScript可以发送和接收与这些设备之间的数据。


连接串口数据可以带来以下好处:

  • 与硬件设备通信:通过连接串口数据,JavaScript可以与硬件设备进行通信,以控制和监测设备的状态。这为创建物联网应用或与传感器、机器人等进行交互提供了便利。
  • 数据采集:某些设备通过串口发送数据,例如传感器采集的实时数据。通过连接串口数据,JavaScript可以读取设备发送的数据,进行实时的数据采集和监测。
  • 数据处理和分析:连接串口数据使得JavaScript能够获取设备发送的数据,从而进行数据处理和分析。例如,可以对传感器数据进行实时的计算和图表展示。


需要注意的是,连接串口数据需要一些额外的设置和操作,因为JavaScript在浏览器运行时不直接提供对串口的访问。通常需要使用特定的库或API来实现串口连接和数据交互,如Web Serial API、node-serialport等。


直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Web Serial API</title>
</head>
<body>
  <button id="connectButton">连接串口</button>
  <button id="disconnectButton">断开连接</button>
  <select id="serialPortSelect"></select>
  <pre id="serialData"></pre>
  <script>
    async function connectSerial() {
      const filters = [
        { usbVendorId: 0x2341, usbProductId: 0x8036 } // 替换为你的串口设备的供应商ID和产品ID
      ];
      try {
        const port = await navigator.serial.requestPort({ filters });
        await port.open({ baudRate: 9600 });
        const reader = port.readable.getReader();
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          const textDecoder = new TextDecoder();
          const data = textDecoder.decode(value);
          document.getElementById('serialData').textContent += data;
        }
      } catch (error) {
        console.error(error);
      }
    }
    function disconnectSerial() {
      // 断开连接逻辑
    }
    function updateSerialPortList(ports) {
      const select = document.getElementById('serialPortSelect');
      select.innerHTML = '';
      ports.forEach(port => {
        const option = document.createElement('option');
        option.value = port.path;
        option.textContent = port.path;
        select.appendChild(option);
      });
    }
    async function getSerialPorts() {
      const ports = await navigator.serial.getPorts();
      updateSerialPortList(ports);
    }
    document.getElementById('connectButton').addEventListener('click', connectSerial);
    document.getElementById('disconnectButton').addEventListener('click', disconnectSerial);
    navigator.serial.addEventListener('connect', getSerialPorts);
    navigator.serial.addEventListener('disconnect', getSerialPorts);
    getSerialPorts();
  </script>
</body>
</html>

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
打赏
0
0
0
0
21
分享
相关文章
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
154 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
76 4
Node.js 连接 MongoDB
10月更文挑战第20天
54 0
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
76 0
原生JavaScript+canvas实现五子棋游戏_值得一看
Node.js 连接 MongoDB
10月更文挑战第9天
73 0
Node.js 连接 MySQL
10月更文挑战第9天
60 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    60
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    32
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    60
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    59
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58