MQTT-соединение работает в узле, но не как компонент ReactJS - PullRequest
Новая
       17

MQTT-соединение работает в узле, но не как компонент ReactJS

0 голосов
/ 13 марта 2020

У меня есть это соединение mqtt, которое прекрасно работает, когда я запускаю его в nodeJS ... но когда я перемещаю его в реагирующий компонент, я получаю эту ошибку:

Ошибка во время рукопожатия WebSocket: net :: ERR_CONNECTION_RESET

Я читал, что это вызвано чем-то, связанным с портами по умолчанию здесь ... Использование протокола MQTT в 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;

Ответы [ 2 ]

1 голос
/ 14 марта 2020

схема URL должна быть изменена на wss://, чтобы она работала, а порт должен быть изменен на порт websocket вместо порта экземпляра

0 голосов
/ 13 марта 2020

Вы пытаетесь принудительно установить собственное MQTT-соединение, используя схему mqtt:// для URL-адреса брокера.

Проблема заключается в том, что при запуске в браузере кода ReactJS он не может использовать собственный MQTT ( из-за изолированной программной среды браузера) вам необходимо использовать MQTT через веб-сокеты.

Это можно сделать, изменив схему URL-адреса на wss:// (MQTT через безопасные веб-сокеты) и изменив номер порта. Cloudmqtt документы говорят, что порт будет 36987, а не 16987.

Вы должны иметь возможность использовать MQTT для веб-сокетов с NodeJS, а также ReactJS.

...