基于Node JS实现网页串口数据实时更新的方案咨询

阿华AIGC实验室

2026-5-8

嘿，我懂你遇到的问题了——你现在用普通的HTTP服务器来处理串口数据，但HTTP是短连接，一次请求对应一次响应，串口后续的新数据根本没法推送到已经完成响应的网页上，这就是页面没法实时更新的核心原因。

要实现无需刷新页面的实时数据更新，咱们得用WebSocket来做长连接，它能让服务器主动把新数据推给客户端，不用客户端反复发请求。下面是具体的解决方案，针对你的Node.js v12.18.2版本完全适用：

步骤1：安装WebSocket依赖

我们用Node.js生态里常用的ws库来实现WebSocket功能，先安装它：

npm install ws

步骤2：修改你的Node.js服务器代码

我们会创建一个HTTP服务器来提供静态页面，同时挂载WebSocket服务器处理实时数据推送，代码如下：

const http = require('http');
const fs = require('fs'); // 用来读取本地HTML文件
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');
const WebSocket = require('ws');

// 初始化串口连接
const port = new SerialPort('/dev/ttyACM0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));

// 创建HTTP服务器，负责返回静态页面
const server = http.createServer((req, res) => {
  // 访问根路径时返回我们的HTML页面
  if (req.url === '/') {
    fs.readFile('index.html', (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end('加载页面出错了');
      }
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(data);
    });
  }
});

// 创建WebSocket服务器，挂载到HTTP服务器上（共用8888端口）
const wss = new WebSocket.Server({ server });

// 监听客户端的WebSocket连接
wss.on('connection', (ws) => {
  console.log('有客户端连接进来了');

  // 串口收到新数据时，推送给所有在线的WebSocket客户端
  parser.on('data', (data) => {
    console.log(data);
    // 遍历所有连接的客户端，确保只给活跃连接发数据
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  // 监听客户端断开连接的事件
  ws.on('close', () => {
    console.log('客户端断开连接了');
  });
});

// 启动服务器
server.listen(8888, () => {
  console.log('服务器运行在 http://localhost:8888');
});

步骤3：创建对应的HTML页面（命名为index.html，和Node脚本同目录）

这个页面会主动连接WebSocket服务器，收到数据后实时更新页面内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>串口数据实时展示</title>
</head>
<body>
  <h1>当前串口数据：</h1>
  <div id="serialData" style="font-size: 24px; margin-top: 20px;">等待数据中...</div>

  <script>
    // 连接本地的WebSocket服务器
    const ws = new WebSocket('ws://localhost:8888');

    // 收到服务器推送的数据时，更新页面内容
    ws.onmessage = (event) => {
      const dataElement = document.getElementById('serialData');
      dataElement.textContent = event.data;
      // 如果需要保留历史数据，可以改成：dataElement.innerHTML += `<p>${event.data}</p>`;
    };

    // 处理连接错误
    ws.onerror = (error) => {
      console.error('WebSocket连接出错:', error);
    };

    // 处理连接关闭
    ws.onclose = () => {
      console.log('WebSocket连接已关闭');
    };
  </script>
</body>
</html>