当前位置:首页 > JavaScript

js实现串口

2026-02-01 05:40:43JavaScript

使用Web Serial API实现串口通信

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

检查浏览器支持

if ('serial' in navigator) {
  console.log('Web Serial API supported');
} else {
  console.log('Web Serial API not supported');
}

请求串口权限并打开端口

const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });

配置串口参数

const writer = port.writable.getWriter();
const encoder = new TextEncoder();
await writer.write(encoder.encode('Hello World'));
writer.releaseLock();

读取串口数据

const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log(new TextDecoder().decode(value));
}

关闭串口连接

await port.close();

使用Node.js实现串口通信

在Node.js环境中可以使用serialport库实现串口通信:

js实现串口

安装依赖

npm install serialport

基本使用示例

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

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

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

port.write('AT\\r\\n', (err) => {
  if (err) return console.log('Error:', err.message);
});

使用解析器

const { SerialPort } = require('serialport');
const { ReadlineParser } = require('@serialport/parser-readline');

const port = new SerialPort({ path: '/dev/ttyUSB0', baudRate: 9600 });
const parser = port.pipe(new ReadlineParser({ delimiter: '\\r\\n' }));

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

浏览器兼容性解决方案

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

js实现串口

使用WebUSB API 需要设备支持USB通信协议,适用于特定硬件设备。

使用代理服务 通过WebSocket连接到后端服务,由后端处理串口通信:

const socket = new WebSocket('ws://localhost:8080/serial-proxy');

socket.onmessage = (event) => {
  console.log('Received:', event.data);
};

socket.send('AT\\r\\n');

错误处理最佳实践

处理连接错误

try {
  await port.open({ baudRate: 9600 });
} catch (error) {
  console.error('Failed to open port:', error);
}

处理读写错误

port.on('error', (err) => {
  console.error('Serial port error:', err);
});

超时处理

const timeout = setTimeout(() => {
  port.close();
  console.error('Connection timeout');
}, 5000);

port.on('open', () => {
  clearTimeout(timeout);
});

性能优化技巧

使用缓冲区批量处理数据,减少频繁的IO操作。对于高频数据传输,考虑二进制协议而非文本协议。实现流量控制机制,防止缓冲区溢出。定期检查连接状态,实现自动重连机制。

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

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…