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

最新推荐文章于 2024-02-23 16:26:10 发布

鋜斗

最新推荐文章于 2024-02-23 16:26:10 发布

阅读量914

点赞数 4

分类专栏： javascript 前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_68537796/article/details/134779480

版权

前端同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

文章目录

前言
js为什么要连接串口数据
直接上代码
后言

前言

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>