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

文章目录

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

  前言

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

  ---

  当前文章系列专栏：javaScript

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

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

  js为什么要连接串口数据

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

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

  • 与硬件设备通信：通过连接串口数据，JavaScript可以与硬件设备进行通信，以控制和监测设备的状态。这为创建物联网应用或与传感器、机器人等进行交互提供了便利。

  • 数据采集：某些设备通过串口发送数据，例如传感器采集的实时数据。通过连接串口数据，JavaScript可以读取设备发送的数据，进行实时的数据采集和监测。

  • 数据处理和分析：连接串口数据使得JavaScript能够获取设备发送的数据，从而进行数据处理和分析。例如，可以对传感器数据进行实时的计算和图表展示。

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

    直接上代码

        Web Serial API  连接串口  断开连接    
          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();  

    后言

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