React+TypeScript连接MQTT服务器取数据遇Buffer未定义错误求解

错误原因 #

Buffer是Node.js环境的内置API，浏览器环境默认不支持。你使用的mqtt库默认是为Node.js设计的，直接在React浏览器项目中引入会触发该错误。

解决方案 #

方案1：使用MQTT的浏览器适配版本 #

修改mqtt的导入路径，直接引用专为浏览器编译的适配版本：

import mqtt from 'mqtt/dist/mqtt.min.js';

方案2：添加Buffer Polyfill #

1. 安装buffer库：

npm install buffer

2. 在项目入口文件（如index.tsx）中注入全局Buffer：

import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

修正后的完整实现代码 #

针对你持续接收机器人数据的需求，优化代码避免重复连接、内存泄漏，实现稳定的数据获取：

import React, { useEffect, useRef } from "react";
import mqtt from 'mqtt/dist/mqtt.min.js';

function App() {
  // 用useRef保存MQTT客户端实例，避免组件重渲染重复创建连接
  const clientRef = useRef<mqtt.MqttClient | null>(null);

  useEffect(() => {
    // 建立MQTT连接
    const client = mqtt.connect("mqtt://test.mosquitto.org");
    clientRef.current = client;

    // 连接成功回调
    client.on("connect", () => {
      console.log("MQTT连接成功");
      // 替换为你的机器人数据实际主题
      const targetTopic = "robot/data";
      client.subscribe(targetTopic, (err) => {
        err ? console.error("订阅失败:", err) : console.log(`已订阅主题: ${targetTopic}`);
      });
    });

    // 接收消息回调
    client.on("message", (topic, message) => {
      // 解析二进制消息为字符串（若为JSON格式，可进一步用JSON.parse解析）
      const robotData = message.toString();
      console.log(`收到[${topic}]的数据:`, robotData);
      // 可将数据存入state用于组件渲染，例：setRobotData(robotData)
    });

    // 错误监听
    client.on("error", (err) => {
      console.error("MQTT连接异常:", err);
    });

    // 组件卸载时清理资源
    return () => {
      if (clientRef.current) {
        clientRef.current.unsubscribe("robot/data");
        clientRef.current.end();
        clientRef.current = null;
      }
    };
  }, []);

  return <div>MQTT机器人数据获取中...</div>;
}

export default App;

关键注意事项 #

• 务必将"robot/data"替换为你的机器人数据实际发布主题，不要使用测试用的"presence"主题
• 不要在message回调中调用client.end()，否则会直接断开连接，无法持续接收每100ms的推送数据
• 使用useRef保存客户端实例，避免组件重渲染时重复创建连接
• 添加错误监听便于快速排查连接异常问题

内容的提问来源于stack exchange，提问作者Farouk Jamali