使用ReactJs从MQTT服务器获取数据

Question

我正在尝试使用react.js 和 TypeScript 从 MQTT 服务器获取数据。 服务器每 100 毫秒发送一次来自机器人的数据。 我已经尝试过 npm install mqtt 。

我对 MQTT 没有太多经验，我只是想从中获取数据

import React from "react";
import * as mqtt from "mqtt";

function App() {
  let client = mqtt.connect("mqtt://test.mosquitto.org");

  React.useEffect(() => {
    client.on("connect", function () {
      client.subscribe("presence", function (err: any) {
        if (!err) {
          client.publish("presence", "Hello mqtt");
        }
      });
    });

    client.on("message", function (topic: any, message: any) {
      // message is Buffer
      console.log(message.toString());
      client.end();
    });
  }, []);

  return <> MQQT </>;
}

export default App;

错误是 constants.js:46 Uncaught ReferenceError: 缓冲区未定义 在./node_modules/mqtt-packet/constants.js (constants.js:46:1)

我该如何正确处理这个问题？

从 'mqtt' 导入 mqtt； 预期获取数据

Answer 1

使用vite或webpack时，导入有所不同：

import * as mqtt from 'mqtt/dist/mqtt.min'

全部记录在案：https://github.com/mqttjs/MQTT.js#vite