This is a demonstration of how Message Queuing Telemetry Transport (MQTT) network messaging can be integrated with React to create a simple single page application that displays live weather data.
- WiFi or other mobile sensors publish data to an MQTT broker
- Node.js back-end subscribes to the MQTT broker and receives the data using MQTT.js
- Node.js forwards the data over Socket.IO to React
- React's state is updated and the data is passed down to stateless components
-
An MQTT broker needs to be accessible for this project. I'm using Eclipse Mosquitto deployed to a VPS, but cloud-baed MQTT brokers are available such as AWS IoT.
- Server environment variables:
MQTT_SERVER='wss://your.server.com:port' MQTT_USERNAME=username MQTT_PASSWORD=password
-
WiFi equipped sensors: e.g. Particle Photon or Adafruit WICED Feather. Alternatively, MQTT publishing can be done from a shell, see notes on running.
This app expects any of the following JSON parameters from the broker:
name: [STRING]
temp: [INT or FLOAT]
humidity: [INT or FLOAT]
pressure: [INT or FLOAT]
windspeed: [INT or FLOAT]
winddirection: [STRING]
The publish topic MUST be set to app; data will not be received from any other topics.
To publish to the MQTT broker from a shell, install MQTT.js globally:
npm install mqtt -gHere is an example of a valid publish command:
mqtt pub -u 'USERNAME' -P 'PASSWORD' -h 'SERVER' -t 'app' -m '{"name": "houston", "temp": 79, "humidity": 88, "pressure": 28.95, "windspeed": 7.5, "winddirection": "SW"}'
React | 
Express | 
Node.js
MQTT.js | 
SOCKET.IO | 
Eclipse Mosquitto | 
Bootstrap
