当前位置:首页 > JavaScript

js 实现串口

2026-02-01 18:27:45JavaScript

使用 Web Serial API 实现串口通信

Web Serial API 是现代浏览器提供的 JavaScript API,允许网页与串行设备(如 Arduino、传感器等)直接通信。以下是实现步骤:

启用 API 支持 Chrome 89+、Edge 89+ 和 Opera 76+ 原生支持该 API。需在安全上下文(HTTPS 或 localhost)中使用。

请求端口权限

button.addEventListener('click', async () => {
  const port = await navigator.serial.requestPort();
});

打开并配置端口

await port.open({ baudRate: 9600 }); // 常用波特率:9600, 115200

读写数据

const writer = port.writable.getWriter();
await writer.write(new Uint8Array([1, 2, 3])); // 发送数据
writer.releaseLock();

const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log('Received:', value); // 接收Uint8Array数据
}

关闭端口

await port.close();

Node.js 环境实现方案

对于 Node.js 后端应用,可使用 serialport 库:

js 实现串口

安装依赖

npm install serialport

基本使用示例

const { SerialPort } = require('serialport');

const port = new SerialPort({
  path: 'COM3', // Windows
  baudRate: 9600
});

port.on('data', (data) => {
  console.log('Received:', data.toString());
});

port.write('AT\\r\\n', (err) => {
  if (err) console.error('Write error:', err);
});

注意事项

  • 需处理连接错误事件:

    port.on('error', (err) => {
      console.error('Port error:', err);
    });
  • 二进制数据建议使用 DataViewTypedArray 处理

    js 实现串口

  • 不同操作系统端口名称格式:

    • Windows: COM3
    • Linux: /dev/ttyUSB0
    • macOS: /dev/cu.usbmodem1411

浏览器兼容性处理

对于不支持 Web Serial API 的浏览器,可考虑以下方案:

  • 使用 Chrome 扩展程序 API
  • 通过 WebSocket 桥接本地代理服务
  • 使用 Electron 等桌面应用框架

常用串口参数配置

const options = {
  baudRate: 115200,     // 波特率
  dataBits: 8,          // 数据位
  stopBits: 1,          // 停止位
  parity: 'none',       // 校验位
  flowControl: 'none'   // 流控
};

数据转换示例

字符串转Uint8Array

const encoder = new TextEncoder();
const data = encoder.encode('Hello');

Uint8Array转字符串

const decoder = new TextDecoder();
const text = decoder.decode(data);

标签: 串口js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('imag…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…