Menu
I'm having a hard time figuring out the right way to go when adding MQTT to a react-native project I have. The project needs to run on iOS and Android, so ideally the MQTT can be handled in the javascript side. I realize the networking lair is different from mobile to classic node, so I began down the route of forking MQTT.js and have hit roadblock after roadblock.
Should I continue down the route of forking MQTT.js? Should I aim to replicate the node environment on the mobile environment with polyfills or some other means? Should I break down and get an objective C library and a Java library and wrap them?
977
React Native is Facebook's open-source cross-platform mobile application development framework, a derivative of React for the native mobile application platform, which supports both iOS and Android platforms.
MQTT (originally an initialism of MQ Telemetry Transport) is a lightweight, publish-subscribe, machine to machine network protocol. It is designed for connections with remote locations that have devices with resource constraints or limited network bandwidth.
They both run over TCP connections, and are both client-server in architecture, but MQTT allows messages to pass in both directions between clients and servers whereas HTTP servers only respond to requests from clients.
import React, { Component } from 'react'; var mqtt = require('mqtt'); var options={ clientId:"id", username:"ArduinoProject", password:"ssssss", protocolId: "MQTT", protocolVersion: 4, port : 1883 , clean:true}; var client = mqtt. connect("mqtt://node02.myqtthub.com/",options) client.
As React is a JavaScript library, it is possible to use MQTT.js as the MQTT client library. The following methods 2, 3 are more suitable for referencing projects created by React via CDN links. Installation via the command line, either using the npm or yarn command (one or the other)
Add libRCTmqtt.a to your project's Build Phases ➜ Link Binary With Libraries Click RCTMqtt.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic').
Native lets, make our app Music using the expo init command, Music and install the react native, mqtt library, Music, so edit the app.js file. I use visual studio code, but any editor will work this.
Use MQTT 5.0 client tool - MQTT X as another client to test sending and receiving messages. You can see that MQTT X can receive messages from the browser side normally, as can be seen when sending a message to the topic using MQTT X.
I did some research and it looks like the way to go is with native (tcp) mqtt, and not mqtt over websockets (eventhough you could do both).
The road was unpaved, so after looking into all of our options, I ended up modifying tuanpmt/react-native-mqtt in order to make the library more stable, and are now using it in production.
There you go: https://github.com/SudoPlz/sp-react-native-mqtt
That's native mqtt (using iOS and Android mqtt libraries) and not a websockets js library that needs weird configuration and imports to work with react-native. I'd say that's your best bet right now.
npm install sp-react-native-mqtt and then follow the steps in readme to use it.
Try it.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
