# Connect to the Deployment with React
This article mainly introduces how to use MQTT (opens new window) in the React project for implementing connect, subscribe, messaging and unsubscribe, etc., between the client and MQTT broker.
React (also known as React.js or ReactJS) is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.^1 (opens new window)
# Preconditions
- The deployment has been created. You can view connection-related information under Deployment Overview. Please make sure that the deployment status is running. At the same time, you can use WebSocket to test the connection to the MQTT server.
- Set the user name and password in
Authentication & ACL
>Authentication
for connection verification.
# New project
Reference link: https://reactjs.org/docs/getting-started.html (opens new window)
Creating new React applications with
Create React App
npx create-react-app react-mqtt-test
1If you need to use TypeScript, simply add the --template typescript parameter at the end of the command line
npx create-react-app react-mqtt-test --template typescript
1Then add the TypeScript type library required in the React project
npm install --save typescript @types/node @types/react @types/react-dom @types/jest # or yarn add typescript @types/node @types/react @types/react-dom @types/jest
1
2
3The use of TypeScript will not be the focus of the examples in this article, but if you wish to use it, you can add TypeScript features after referring to the creation example and the full code examples.
Import via CDN
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
1
2
# Install the MQTT client library
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)
npm install mqtt --save # or yarn add mqtt
1
2
3Import via CDN
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
1Download to the local and then import using the relative path
<script src="/your/path/to/mqtt.min.js"></script>
1
# Connection
Please find the relevant address and port information in the Deployment Overview of the Console. Please note that if it is the standard plan, the port is not 1883 or 8883, please confirm the port.
# Connection settings
This article will use the free public MQTT broker (opens new window) which is provided by EMQX. This service is based on EMQX's MQTT IoT cloud platform (opens new window) to create. The server access information is as follows.
- Broker: broker.emqx.io
- TCP Port: 1883
- WebSocket Port: 8083
# Connect
const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {
setConnectStatus("Connecting");
setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {
if (client) {
console.log(client);
client.on("connect", () => {
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() };
setPayload(payload);
});
}
}, [client]);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Subscribe
const mqttSub = (subscription) => {
if (client) {
const { topic, qos } = subscription;
client.subscribe(topic, { qos }, (error) => {
if (error) {
console.log("Subscribe to topics error", error);
return;
}
setIsSub(true);
});
}
};
2
3
4
5
6
7
8
9
10
11
12
# Unsubscribe
const mqttUnSub = (subscription) => {
if (client) {
const { topic } = subscription;
client.unsubscribe(topic, (error) => {
if (error) {
console.log("Unsubscribe error", error);
return;
}
setIsSub(false);
});
}
};
2
3
4
5
6
7
8
9
10
11
12
# Publish
const mqttPublish = (context) => {
if (client) {
const { topic, qos, payload } = context;
client.publish(topic, payload, { qos }, (error) => {
if (error) {
console.log("Publish error: ", error);
}
});
}
};
2
3
4
5
6
7
8
9
10
# Disconnect
const mqttDisconnect = () => {
if (client) {
client.end(() => {
setConnectStatus("Connect");
});
}
};
2
3
4
5
6
7
The complete project example code: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React (opens new window).
# Test
We have written the following simple browser application using React with the ability to create connections, subscribe to topics, send and receive messages, unsubscribe, and disconnect.
Use MQTT 5.0 client tool - MQTT X (opens new window) 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.
# More
In summary, we have implemented the creation of an MQTT connection in the React project, and simulated subscribing, sending and receiving messages, unsubscribing and disconnecting between the client and MQTT broker.
In this article, we use React v16.13.1, so the Hook Component feature will be used as example code to demonstrate, or if required, you can refer to the ClassMqtt component in the full example code to use the Class Component feature for project building.
You can download the source code of the example here (opens new window), and you can also find more demo examples in other languages on GitHub (opens new window).