当前位置:首页 > 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库实现串口通信:

安装依赖

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的浏览器,可以考虑以下方案:

使用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);
});

超时处理

js实现串口

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

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

性能优化技巧

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

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

相关文章

js 实现vue

js 实现vue

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

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Pro…

js实现图片放大缩小

js实现图片放大缩小

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

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…