使用HTML与Node.js WebSocket读取Arduino数据前端接收问题求助

核心问题 #

你服务端拿到串口数据后没有主动通过WebSocket连接推送给前端，仅做了本地打印，所以前端收不到传感器数据。同时存在2个小逻辑疏漏：

1. port.on("open") 事件绑定写在了WebSocket连接回调内部，只有当有客户端连接时才会绑定该事件，若服务端启动时串口已经完成打开，该事件永远不会触发，所以看不到对应日志
2. 串口数据的事件监听每次新客户端连接都会重复绑定，多客户端连接时会出现重复触发的问题

修正后的index.js代码 #

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 5000 });
const SerialPort = require("serialport");
const Readline = require("@serialport/parser-readline");

// 串口初始化逻辑移到WebSocket连接回调外部，服务端启动就执行
const port = new SerialPort('COM4', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));

// 串口打开事件绑定移到外部
port.on("open", () => { 
  console.log("Serial Port Open");
});

// 串口收到数据时，推送给所有已连接的WebSocket客户端
parser.on("data", data => {
  console.log(`RPM: ${data}`);
  // 遍历所有已连接的存活客户端，发送数据
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(data.trim());
    }
  });
});

wss.on("connection", ws => {
  console.log("New Client Connection");

  // 测试用的客户端消息回显逻辑保留
  ws.on("message", data => {
    console.log("TEST");
    ws.send(data);
  });
});

console.log("The server is ON");

修正后的index.html代码 #

<script src="server/plotly.min.js"></script>
<script>
  const ws = new WebSocket("ws://localhost:5000");
  // 示例Plotly初始化，你可以替换成自己原有绘图逻辑
  let time = 0;
  const data = [{
    x: [time],
    y: [0],
    mode: 'lines',
    name: 'RPM'
  }];
  const layout = { title: 'Arduino传感器实时数据' };
  Plotly.newPlot('plot', data, layout);

  ws.addEventListener("open", () => {
    console.log("We Are Connected");
    ws.send("TestData");
  });

  ws.addEventListener("message", e => {
    console.log("收到传感器数据:", e.data);
    // 转成数字类型
    const rpm = Number(e.data);
    // 调用Plotly更新逻辑，替换成你自己的绘图函数即可
    time += 1;
    Plotly.extendTraces('plot', {
      x: [[time]],
      y: [[rpm]]
    }, [0])
    // 可选：限制最多显示100个数据点，避免页面卡顿
    if (time > 100) {
      Plotly.relayout('plot', {
        xaxis: {
          range: [time - 100, time]
        }
      })
    }
  });
</script>
<!-- 绘图容器 -->
<div id="plot" style="width:100%;height:600px;"></div>

额外注意事项 #

• 若前端控制台收到的数据有乱码，检查Arduino串口输出的波特率和服务端设置的9600是否一致，同时确认Arduino输出每一行数据末尾带了换行符\n，和服务端parser的分隔符匹配
• 如果页面打开时串口已经在输出数据，刷新页面后无需重启服务端就能自动收到新数据

内容的提问来源于stack exchange，提问作者Stuart B