How to connect to an MQTT broker in React-Native?

Question

I am trying to integrate MQTT into my app. I was reading this post , but I can't connect to the broker due to either using an outdated React Native MQTT library or my code being wrong. How can I successfully connect to a broker?

import init from 'react_native_mqtt';
import { AsyncStorage } from 'react-native';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true,
  sync : {
  }
});

const client = new Paho.MQTT.Client(
  "m23.cloudmqtt.com", 
  18628,
  "clientID-" + parseInt(Math.random() * 100)
);

client.connect({ 
  useSSL: true,
  userName: "username",
  password: "password"
});

function onConnect() {
  client.subscribe("topic");
}

Answer 1

SUPER LATE answer here but I'm hoping that this helps other because it took me a good 3 days to figure this out. The thing is that the library that you are using works as promised but it requires web sockets, I'm not saying that now you have to implement web-sockets but now you will have to use the Web-Socket Port for your broker.

For Example ::
Broker : broker.hivemq.com

Port :
1) 8000 (for web sockets)
2) 1883 (for TCP connection, pretty sure you'll be using this in your IOT)

So your client creation code will now look something like this ::

    const client = new Paho.MQTT.Client(
      "broker.hivemq.com", 
      8000,
      "clientID-" + parseInt(Math.random() * 100)
    );

Read more on the HiveMQ Public Broker and its Web-Sockets Browser Client so that makes it easy for you to test your MQTT publish and subscribe!

Not only that, but the AsyncStorage that you are using is deprecated . So use this instead.

With the new AsyncStorage and the Web-Sockets port for the broker, you are ready to go! Or at least for the storage and connection part :)

Here's my code, for better understanding ::

    import AsyncStorage from '@react-native-async-storage/async-storage';
    import init from 'react_native_mqtt';
    
    init({
      size: 10000,
      storageBackend: AsyncStorage,
      defaultExpires: 1000 * 3600 * 24,
      enableCache: true,
      reconnect: true,
      sync : {}
    });
    
    function onConnect() {
      console.log("onConnect");
      client.subscribe('reactnative/testmqtt');
    }
    
    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost:"+responseObject.errorMessage);
      }
    }
    
    function onMessageArrived(message) {
      var x = "\nTopic : "+message.topic+"\nMessage : "+message.payloadString;
      console.log(x);
    }
    
    const client = new Paho.MQTT.Client('broker.hivemq.com', 8000, 'uname');
    client.onMessageArrived = onMessageArrived;
    client.connect({ onSuccess:onConnect, useSSL: false });
    client.onConnectionLost = onConnectionLost;

PS Don't use SSL because that didn't work for some reason 0_o