1024程序员节 chrome 嵌入式硬件 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

requestPort----获取授权串口open-----打开串口close—关闭串口(串口关闭前，需要释放锁住的流)cancel—立即退出读取的循环，然后去调用releaseLock，最后调用close方法releaseLock—Reader和.Writer的释放方法read—port.readable.getReader()的读取字节数组方法write—port.writable.getWriter()的写入方法

参考文档

Web Serial API MDN Web Docs Web Serial API

示例完整代码

示例效果截图

参考文章 Web Serial API，web端通过串口与硬件通信 Vue使用Serial连接串口

推荐阅读

 您阅读本篇文章共花了：