MQTTJS wrapper with React Hooks
This library is focused in help you to connect, publish and subscribe to a Message Queuing Telemetry Transport (MQTT) in ReactJS with the power of React Hooks.
Rewritten in javascript
from mqtt-react-hooks due to bug for the latest mqtt
and react
versions.
Pre-requisites:
React ^17.0.2
mqtt ^4.3.4
- custom
mqtt_hooks
library
Hooks available
-
useMqttState()
->return {connectionStatus, mqttClient}
-
connectionStatus
:Connecting
Connected
Reconnecting
Offline
-
mqttClient
is used to transmit data to the drone viamqttClient.publish
method.
-
-
useSubscription(topic:string|arrayOfString|object,options?)
->return {mqttClient, topic, message, connectionStatus}
-
topic
isString
topic to subscribe to or anArray
orobject
object = { 'topic1' : {qos: 0|1|2}, 'topic2': {qos: 0|1|2} }
-
options
is the optionsobject
to subscribe with, including:-
qos
QoS subscription level,default 0
-
nl
No Local MQTT 5.0 flag (If the value istrue
, Application Messages MUST NOT be forwarded to a connection with aClientID
equal to theClientID
of the publishing connection) -
rap
Retain as Published MQTT 5.0 flag (Iftrue
, Application Messages forwarded using this subscription keep theRETAIN
flag they were published with. Iffalse
, Application Messages forwarded using this subscription have theRETAIN
flag set to 0.) -
rh
Retain Handling MQTT 5.0 (This option specifies whether retained messages are sent when the subscription is established.) -
properties
:object
-
subscriptionIdentifier
: representing the identifier of the subscription number, -
userProperties
: The User Property is allowed to appear multiple times to represent multiple name, value pairs object
-
-
-
Usage
npm install mqtt-reactjs-hooks
The mqtt
client version 4.3.4
is wrapped in react-hooks
to facilitate the connection as well as data subsription. React.useContext
is used to provides for the mqtt
client in order to share a single instance of mqtt
connection across all components. Thus, the <Connector>
component must wrap the root
component.
App
Root component i.e. The only property for the connector is the connection information for mqtt.Client#connect
import React from 'react';
import { Connector } from 'mqtt-reactjs-hooks';
import Status from './Status';
export default function App() {
return (
<Connector brokerUrl='ws://test.mosquitto.org:1884'>
<Status />
</Connector>
);
}
brokerUrl
: can be on the following protocols: mqtt
, mqtts
, tcp
, tls
, ws
, wss
, wxs
, alis
. The URL
can also be an object as returned by URL.parse()
, in that case the two objects are merged, i.e. you can pass a single object with both the URL
and the connect options
.
<Connector brokerUrl="ws://test.mosquitto.org" options={
servers:[{host: 'localhost', port: 1883}], // optional servers settings
keepAlive:60, // in seconds
reschedulePings:true, //reschedule ping messages after sending packets (default true)
clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
protocolId: 'MQTT',
protocolVersion: 4,
clean: true, // set to false to receive QoS 1 and 2 messages while offline
reconnectPeriod: 1000 // milliseconds, interval between two reconnections. Disable auto reconnect by setting to 0.
connectTimeout: 30 * 1000, // milliseconds, time to wait before a CONNACK is received
username: , //the username required by your broker, if any
password: , //the password required by your broker, if any
incomingStore: ,//a Store for the incoming packets
outgoingStore: , //a Store for the outgoing packets
queueQoSZero: , //if connection is broken, queue outgoing QoS zero messages (default true)
autoUseTopicAlias: ,//enabling automatic Topic Alias using functionality
properties: {//properties MQTT 5.0. object that supports the following properties:
sessionExpiryInterval: ,//representing the Session Expiry Interval in seconds number,
receiveMaximum: ,//representing the Receive Maximum value number,
maximumPacketSize: ,//representing the Maximum Packet Size the Client is willing to accept number,
topicAliasMaximum: , //representing the Topic Alias Maximum value indicates the highest value that the Client will accept as a Topic Alias sent by the Server number,
requestResponseInformation: ,//The Client uses this value to request the Server to return Response Information in the CONNACK boolean,
requestProblemInformation: ,//The Client uses this value to indicate whether the Reason String or User Properties are sent in the case of failures boolean,
userProperties: ,//The User Property is allowed to appear multiple times to represent multiple name, value pairs object},
authenticationMethod: ,//the name of the authentication method used for extended authentication string,
authenticationData: ,//Binary Data containing authentication data binary
},
authPacket: ,//settings for auth packet object
will: {//a message that will sent by the broker automatically when the client disconnect badly. The format is:
topic: ,//the topic to publish
payload: ,//the message to publish
qos: ,//the QoS
retain: ,//the retain flag
properties: ,//properties of will by MQTT 5.0:
willDelayInterval: ,//representing the Will Delay Interval in seconds number,
payloadFormatIndicator: ,//Will Message is UTF-8 Encoded Character Data or not boolean,
messageExpiryInterval: ,//value is the lifetime of the Will Message in seconds and is sent as the Publication Expiry Interval when the Server publishes the Will Message number,
contentType: ,//describing the content of the Will Message string,
responseTopic: ,//String which is used as the Topic Name for a response message string,
correlationData: , //The Correlation Data is used by the sender of the Request Message to identify which request the Response Message is for when it is received binary,
userProperties: , //The User Property is allowed to appear multiple times to represent multiple name, value pairs object
}
transformWsUrl : optional (url, options, client) => url // function For ws/wss protocols only. Can be used to implement signing urls which upon reconnect can have become expired.
resubscribe : true,//if connection is broken and reconnects, subscribed topics are automatically subscribed again (default true)
messageIdProvider: , //custom messageId provider. when new UniqueMessageIdProvider() is set, then non conflict messageId is provided.
}>
{child component}
</Connector>
useMqttState()
Mainly would be used to monitor the connection status or publishing the data.
Status
import React from 'react';
import { useMqttState } from 'mqtt-reactjs-hooks';
export default function Status() {
/*
* Status list
* - Offline
* - Connected
* - Reconnecting
* - Closed
* - Error: printed in console too
*/
const { connectionStatus } = useMqttState();
return <h1>{`Status: ${connectionStatus}`}</h1>;
}
Publishing
MQTT Client is passed on useMqttState
and can be used to publish messages via mqtt
.Client#publish and don't need Subscribe
import React from 'react';
import { useMqttState } from 'mqtt-react-hooks';
export default function Status() {
const { mqttClient } = useMqttState();
function handleClick(message) {
return mqttClient.publish('ping/esp32', message);
}
return (
<button type='button' onClick={() => handleClick('start')}>
Start
</button>
);
}
useSubscription()
Subscribing and receiving messages
import React from 'react';
import { useSubscription } from 'mqtt-reactjs-hooks';
export default function Status() {
/* Message structure:
* topic: string
* message: string
*/
const { message } = useSubscription(['esp32/home/sensors']);
return (
<>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span>{`topic:${message.topic} - message: ${message.message}`}</span>
</div>
</>
);
}