A taste of MQTT in React

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 message was generated due to an insecure Web Socket (WS) protocol running underneath the secure HTTPS protocol, hence causing the browser to flag this. The solution to this is to use the Web Socket Secure (WSS) protocol, which for some reason I could not get to work with HiveMQ. This update therefore uses the Eclipse Mosquitto MQTT broker, which allowed me to use WSS and fixed the issue.

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.

For reference I'm using Ubuntu 18.04.4 LTS on the Regolith desktop environment, mqtt.js 3.0.0, npm 6.14.4 and node 12.6.0.

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:

Publish a message via the command line

Open the terminal and enter:

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

NB - Eagle-eyed readers might note this command differs slightly from that used in the MQTT.js documentation. This recommends that the npm package is installed globally (using the -g flag) so the mqtt pub command is available on your path, I prefer to use npx instead which means no need to install system-wide.

See the results in the React app

Go back to localhost:3000 and you should see:

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

• Beginner's Guide to the MQTT Protocol
• MQTT.js documentation as part of HiveMQ's MQTT Client Library Encyclopedia
• Getting Started with Node.js and MQTT