MQTT 連接在 Node 中工作，但不能作為 ReactJS 組件

Question

我有這個 mqtt 連接，當我在 nodeJS 中運行它時它工作正常......但是當我將它移動到反應組件中時，我收到此錯誤：

WebSocket 握手期間出錯：net::ERR_CONNECTION_RESET

我讀過這是由此處的默認端口引起的...... React 中 MQTT 協議的使用，但我找不到我足夠理解的答案來解決它。

任何人都可以幫忙嗎？ 干杯

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;

Answer 1

URL 模式將更改為wss://以使其工作，並且端口必須更改為 websocket 的端口而不是實例的端口

Answer 2

您正在嘗試使用代理 URL 的mqtt://架構強制本地 MQTT 連接。

問題是當 ReactJS 代碼在瀏覽器中運行時，它不能使用原生 MQTT（因為瀏覽器沙箱），您需要通過 Websockets 使用 MQTT。

為此，您可以將 URL 架構更改為wss:// （基於安全 Websocket 的 MQTT）並更改端口號。 Cloudmqtt文檔說端口將是36987而不是16987 。

您應該能夠通過 NodeJS 和 ReactJS 的 Websockets 使用 MQTT。