A taste of MQTT in React

Mar 3, 2020 21:43 · 582 words · 3 minute read React MQTT JavaScript

Update Apr 20: This tutorial previously used the MQTT online broker HiveMQ, which worked fine when you were using a local development server. However once uploaded to a web site provider using https (pretty much everyone now), then it generated a mixed content error message. This update therefore uses the Eclipse Mosquitto MQTT broker, which doesn’t have these problems.

Introduction

MQTT, is according to Wikipedia,

“an open OASIS and ISO standard (ISO/IEC PRF 20922) lightweight, publish-subscribe network protocol that transports messages between devices.”

It was first used to monitor an oil pipeline through the desert, and is now used in various Internet of Things scenarios. This guide for the Linux command line shows how you might update a React page using a MQTT online broker - specifically Mosquitto.

Prerequisites

  • NodeJS - If you haven’t installed it before, I found installing it using the Node Version Manager as suggested on this Stack Overflow answer to cause less aggravation than downloading via the official website.
  • If you’ve previously installed create-react-app globally via npm install -g create-react-app, then uninstall it with the command npm uninstall -g create-react-app so you are using the latest version in the step below.

Use Create-React-App to initiate project

Use create-react-app to kick off our React project:

npx create-react-app mqtt_react
cd mqtt_react

Install MQTT.js

MQTT.js is a fully-featured Javascript library for the MQTT protocol. Install as follows:

npm install mqtt

Edit src/App.js

Open the file src/App.js using your favourite text editor, delete all the text and replace with:

import React, { useState, Fragment } from 'react';
import './App.css';

var mqtt    = require('mqtt');
var options = {
	protocol: 'mqtts',
	// clientId uniquely identifies client
	// choose any string you wish
	clientId: 'b0908853' 	
};
var client  = mqtt.connect('mqtt://test.mosquitto.org:8081', options);

// preciouschicken.com is the MQTT topic
client.subscribe('preciouschicken.com');

function App() {
  var note;
  client.on('message', function (topic, message) {
    note = message.toString();
    // Updates React state with message 
    setMesg(note);
    console.log(note);
    client.end();
    });

  // Sets default React state 
  const [mesg, setMesg] = useState(<Fragment><em>nothing heard</em></Fragment>);

  return (
    <div className="App">
    <header className="App-header">
    <h1>A taste of MQTT in React</h1>
    <p>The message is: {mesg}</p>
		<p>
		<a href="https://www.preciouschicken.com/blog/posts/a-taste-of-mqtt-in-react/"    
		style={{
			color: 'white'
		}}>preciouschicken.com/blog/posts/a-taste-of-mqtt-in-react/</a>
		</p>
		</header>
		</div>
  );
}

export default App;

(or alternatively download from github).

Start the app

Start the React application with:

npm start

and point your browser to localhost:3000 where you should see:

Nothing heard

Publish a message via the command line

Open the terminal and enter:

mqtt pub -t 'preciouschicken.com' -h 'test.mosquitto.org' -m 'Your message here!'

See the results in the React app

Go back to localhost:3000 and you should see:

Your message here

The message should also appear in your browser’s console.

In the event you see messages appearing that you haven’t written, it means other people are using the same MQTT Topic you are. In that case remove the string preciouschicken.com from the file src/App.js and replace with something unique - for instance your birth year followed by your dog’s name: e.g. 84rover. Use that same phrase in the Topic flag (i.e. -t) of the MQTT command line and you will see your own messages only (assuming that other people born in 1984 with a dog named Rover aren’t also broadcasting).

I’ve also uploaded the page to taste-of-mqtt-in-react.preciouschicken.now.sh, where hopefully it can be demo’d live.

Conclusion

Congratulations. You are a step closer to achieving your life’s ambition of getting your internet enabled fridge to post to the net…

Further reading

tweet