当前位置:首页 > 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 实现vue

js 实现vue

实现 Vue 的核心功能 在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路: 响应式系统 通过 Object.define…

js实现验证

js实现验证

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

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…

js实现刷新

js实现刷新

刷新当前页面 使用 location.reload() 方法可以强制刷新当前页面。该方法接受一个布尔参数,默认为 false,表示从缓存中加载页面;设为 true 时强制从服务器重新加载。 // 从…