MQTT connection works in Node but not as a ReactJS component

Question

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:

Error during WebSocket handshake: net::ERR_CONNECTION_RESET

I've read this is caused by something to do with default ports here ... Usage of MQTT protocol in React but I can't find an answer I understand enough to solve it.

Can anyone help? Cheers

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;

hardillb · Accepted Answer · 2020-03-14 07:30:17Z

2

You are trying to force a native MQTT connection using the mqtt:// schema for the broker URL.

The problem is when the ReactJS code runs in the browser it can't use native MQTT (because of the browser sandbox), you need to use MQTT over Websockets.

You do this by changing the URL schema to wss:// (MQTT over Secure Websockets) and change the port number. The Cloudmqtt docs say the port will be 36987 rather than 16987.

You should be able to use MQTT over Websockets from NodeJS as well as ReactJS.

edited Mar 14, 2020 at 7:30

answered Mar 13, 2020 at 20:25

hardillb

60.6k11 gold badges81 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kendrick Bong · Accepted Answer · 2020-03-14 00:56:32Z

2

the URL schema is to be changed to wss:// for it to work and the port has to be changed to the websocket's port instead of the instance's port

answered Mar 14, 2020 at 0:56

Kendrick Bong

211 bronze badge

Comments

mainak · Accepted Answer · 2023-04-10 17:37:02Z

working solution

install precompiled-mqtt npm package

import mqtt from "precompiled-mqtt";

const URL = "ws://x.xxx.xx.xxx:8000";
  const [client, setClient] = React.useState(null);

  useEffect(() => {
    mqttConnect();
  }, []);


const mqttConnect = () => {
    const client = mqtt.connect(URL, {
      // clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
      connectTimeout: 5000,
      hostname: "x.xxx.xx.xxx",
      port: 8000,
      path: "/mqtt",
    });
    setClient(client);
  };

useEffect(() => {
    if (client) {
      client.on("connect", () => {
        console.log("connected");
        setConnectStatus("Connected");
      });
      client.on("error", (err) => {
        console.error("Connection error: ", err);
        client.end();
      });
      client.on("reconnect", () => {
        setConnectStatus("Reconnecting");
      });
      client.on("message", (topic, message) => {
        const payload = { topic, message: message.toString() };
        console.log("payload", payload);
      });
    }
  }, [client]);

malik türkoğlu · Accepted Answer · 2023-08-31 13:49:13Z

1

mainak is right. the solution worked. but please dont forget to sub topic.

  client.on("reconnect", () => {
    setConnectStatus("Reconnecting");
  });
client.subscribe(`ChannelName`, () => {                        // 'car', 'car/' , 'chatIst' ...
        
        client.on("message", (topic, message, packet) => {
          console.log("message:", JSON.parse(message));
          
        });
      });

answered Aug 31, 2023 at 13:49

malik türkoğlu

514 bronze badges

Collectives™ on Stack Overflow

MQTT connection works in Node but not as a ReactJS component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related