MQTT 连接在 Node 中工作，但不能作为 ReactJS 组件

当我在 nodeJS 中运行它时，我有这个 mqtt 连接工作正常......但是当我将它移动到反应组件中时，我收到此错误：

WebSocket 握手期间出错：net::ERR_CONNECTION_RESET

我读过这是由与这里的默认端口有关的事情引起的......React 中 MQTT 协议的使用 https://stackoverflow.com/questions/48944899/usage-of-mqtt-protocol-in-react但我找不到一个我足够理解的答案来解决它。

有人可以帮忙吗？干杯

import React, { Component } from "react";
import mqtt from "mqtt";

let topic = "vendingmachine2/command";
const options = {
  port: 16987,
  host: "mqtt://address.cloudmqtt.com",
  clientId: "***",
  username: "***",
  password: "***",
  keepalive: 60,
  reconnectPeriod: 1000,
  protocolId: "MQIsdp",
  protocolVersion: 3,
  clean: true,
  encoding: "utf8",
  timeout: 3,
  useSSL: true
};
function CheckoutForm() {
const MQTTConnect = () => {
    const client = mqtt.connect("mqtt://address.cloudmqtt.com", options);
    client.on("connect", function() {
      // When connected
      console.log("connected");
      client.subscribe("vendingmachine2/feedback", error => {
        if (error) console.error(error);
        else {
          client.publish(topic, "0");
        }
      });
      openDoor();
    });
    client.on("message", (topic, message) => {
      console.log(topic, message.toString());
    });
    function openDoor() {
      let door = [1, 2];
      for (let i = 0; i < door.length; i++) {
        client.publish(topic, `${door[i]}`);
      }
    }
};
return (
    <div>

        <button onClick={MQTTConnect}>asdasd</button>

    </div>
  );
}
export default CheckoutForm;

您正在尝试使用以下命令强制本机 MQTT 连接mqtt://代理 URL 的架构。

问题是，当 ReactJS 代码在浏览器中运行时，它无法使用本机 MQTT（因为浏览器沙箱），您需要通过 Websockets 使用 MQTT。

您可以通过将 URL 架构更改为wss://（基于安全 Websockets 的 MQTT）并更改端口号。云MQTTdocs https://www.cloudmqtt.com/docs/websocket.html说港口将是36987而不是16987.

您应该能够通过 NodeJS 和 ReactJS 中的 Websockets 使用 MQTT。