title: MQTT connection works in Node but not as a ReactJS component
body: <p>I have this mqtt connection that works fine when I run it in nodeJS ... but when I move it into a react component I get this error:</p>
  
  <p>Error during WebSocket handshake: net::ERR_CONNECTION_RESET</p>
  
  <p>I've read this is caused by something to do with default ports here ...
  <a href="https://stackoverflow.com/questions/48944899/usage-of-mqtt-protocol-in-react">Usage of MQTT protocol in React</a>
  but I can't find an answer I understand enough to solve it.</p>
  
  <p>Can anyone help? Cheers</p>
  
  <pre><code>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 = () =&gt; {
      const client = mqtt.connect("mqtt://address.cloudmqtt.com", options);
      client.on("connect", function() {
        // When connected
        console.log("connected");
        client.subscribe("vendingmachine2/feedback", error =&gt; {
          if (error) console.error(error);
          else {
            client.publish(topic, "0");
          }
        });
        openDoor();
      });
      client.on("message", (topic, message) =&gt; {
        console.log(topic, message.toString());
      });
      function openDoor() {
        let door = [1, 2];
        for (let i = 0; i &lt; door.length; i++) {
          client.publish(topic, `${door[i]}`);
        }
      }
  };
  return (
      &lt;div&gt;
  
          &lt;button onClick={MQTTConnect}&gt;asdasd&lt;/button&gt;
  
      &lt;/div&gt;
    );
  }
  export default CheckoutForm;
  </code></pre>