如何使用Node.js读取USB串口数据并将数据打印到网页

前期准备 #

• 确认RS232转USB设备对应的串口号：Windows系统可在设备管理器的「端口 (COM 和 LPT)」分类下查看，Linux/macOS系统执行ls /dev/tty*即可找到对应设备路径
• 安装16版本及以上的Node.js运行环境

后端服务实现（负责串口读取+实时数据推送） #

后端使用serialport库读取串口数据，通过socket.io实现和前端的实时通信，步骤如下：

1. 新建项目文件夹，进入文件夹后执行以下命令初始化项目、安装依赖：

npm init -y
npm install serialport @serialport/parser-readline socket.io express

2. 新建server.js文件，代码如下：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const { SerialPort } = require('serialport');
const { ReadlineParser } = require('@serialport/parser-readline');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: { origin: "*" }
});

// 托管前端静态文件
app.use(express.static('public'));

// 串口配置，参数和你之前使用超级终端的配置保持一致
const serialPort = new SerialPort({
  path: 'COM3', // 替换为你自己的设备串口号
  baudRate: 9600, // 替换为设备对应的波特率
  dataBits: 8,
  stopBits: 1,
  parity: 'none'
});

// 按行解析串口返回的数据
const parser = serialPort.pipe(new ReadlineParser({ delimiter: '\r\n' }));

// 监听串口返回的数据，推送给所有在线的前端
parser.on('data', (data) => {
  console.log('收到串口数据：', data);
  io.emit('serialData', data);
});

// 监听串口异常
serialPort.on('error', (err) => {
  console.error('串口连接错误：', err.message);
});

// 服务启动在3000端口
server.listen(3000, () => {
  console.log('服务已启动，访问 http://localhost:3000 查看数据');
});

前端页面实现（实时展示串口数据） #

1. 在项目根目录新建public文件夹，在文件夹内新建index.html文件，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>串口数据实时展示</title>
  <style>
    .log-item {
      padding: 6px 0;
      border-bottom: 1px solid #f0f0f0;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>实时串口数据日志</h1>
  <div id="logBox"></div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const logBox = document.getElementById('logBox');

    socket.on('serialData', (data) => {
      const logItem = document.createElement('div');
      logItem.className = 'log-item';
      logItem.innerText = `[${new Date().toLocaleString()}] ${data}`;
      // 最新日志展示在顶部
      logBox.prepend(logItem);
    });
  </script>
</body>
</html>

运行测试 #

• 确认RS232转USB设备正常连接到电脑，修改server.js中的串口号、波特率等参数和实际配置一致
• 执行node server.js启动服务
• 浏览器访问http://localhost:3000即可看到实时推送的串口数据

注意：如果读取到乱码，优先检查波特率、数据位、停止位、校验位参数是否和设备端配置完全匹配，和之前超级终端使用的参数保持一致即可。

内容的提问来源于stack exchange，提问作者Milind Sutar