React Dashboard for MQTT

• Create React App
• Install Dependencies
• Run the App

WIP

Create React App

npx create-react-app mqtt-dashboard

Edit src/App.js

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

var mqtt = require('mqtt');
var options = {
    protocol: 'ws',
    username: 'admin',
    password: 'instar',
    // clientId uniquely identifies client
    // choose any string you wish
    clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
};
var client  = mqtt.connect('ws://192.168.2.111:8885', options);

// cameras/ws is the MQTT topic
client.subscribe('cameras/ws');

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

  // Sets default React state 
  const [msg, setMsg] = useState(<Fragment><em>...</em></Fragment>);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello MQTT in React</h1>
        <p>The message payload is: {msg}</p>
      </header>
    </div>
  );
}

export default App;

Install Dependencies

MQTT.js

cd mqtt-dashboard
npm install mqtt

Run the App

npm start

mosquitto_pub -t 'cameras/ws' -h '192.168.2.111' -m 'Hey!' -p 1885 -u admin -P instar