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

Posted 2023-02-16

【中文标题】MQTT 连接在 Node 中工作，但不能作为 ReactJS 组件

【英文标题】：MQTT connection works in Node but not as a ReactJS component

【发布时间】：2020-03-13 17:41:26

【问题描述】：

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

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

我已经读到这是由这里的默认端口引起的... 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;

【参考方案1】：

您正在尝试使用代理 URL 的 mqtt:// 架构强制本地 MQTT 连接。

问题是当 ReactJS 代码在浏览器中运行时它不能使用原生 MQTT（因为浏览器沙箱），你需要使用 MQTT over Websockets。

您可以通过将 URL 架构更改为 wss://（基于安全 Websocket 的 MQTT）并更改端口号来执行此操作。 Cloudmqtt docs 表示端口将是 36987 而不是 16987。

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

【参考方案2】：

URL 架构将更改为 wss:// 以使其工作，并且端口必须更改为 websocket 的端口而不是实例的端口