I have an EMQX cloud
environment where the MQTTX
client is connecting to, this works and i can publish and receive messages.
MQTTX Configuration
But when trying to connect to the same service in React-Native
, it does not work and i keep receiving Socket Closed
, undefined
or Timeout
errors.
My Code
import init from "react_native_mqtt";
import AsyncStorage from "@react-native-async-storage/async-storage";
init({
size: 10000,
storageBackend: AsyncStorage,
defaultExpires: 1000 * 3600 * 24,
enableCache: true,
reconnect: true,
sync: {},
});
const options = {
host: "a1b2c3d4.oxo.oco-southeast1.emqxsl.com",
port: 8883,
path: "/mqtt",
id: "id_" + parseInt(id.toString()),
};
const client = new Paho.MQTT.Client(options.host, options.port, options.path, options.id);
export const App: FC<HomeStackScreenProps<"Home">> = ({ navigation, route }) => {
const connect = async () => {
if (client.isConnected()) {
if (__DEV__) console.log(" - Previous client connected? ", client.isConnected());
if (__DEV__) console.log(" - Closing previous client? ", client.disconnect());
onConnect();
} else {
client.connect({
timeout: 3,
userName: "test",
password: "**********",
keepAliveInterval: 60,
cleanSession: true,
useSSL: true,
onSuccess: onConnect,
onFailure: onFailure,
reconnect: true,
mqttVersion: 4,
});
console.log(client);
setStatus("isFetching");
}
};
}
The solution for this problem is basically using a whole other library which supports
mqtts
protocols. I usedreact_native_mqtt
which was fine at first but did not work with an online service likeemqx cloud
. so I changed my whole process to the librarysp-react-native-mqtt
. With some small, only every file that usesMQTT
, code changes it worked perfectly!My code
Eventually after many debugging on
Android
it worked on both platforms and was connected to theEMQX Cloud
. The comment ofhardillb
was part of the solution. With this library, the protocol ismqtts
which is needed to connect toEMQX Cloud
. One can also use websockets but I had to use mqtts.