Merge pull request #59 from bmedicke/mqtt-api

create mqtt api

simulator/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "better-react-mathjax": "^2.0.1",
     "mathjs": "^10.6.1",
+    "precompiled-mqtt": "^4.3.13",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",

simulator/src/App.js

@@ -3,6 +3,7 @@ import Box from './Box.js'
 import InfoOverlay from './InfoOverlay.js'
 import JitterBox from './JitterBox.js'
 import SweepBox from './SweepBox.js'
+import mqtt from 'precompiled-mqtt'
 import styles from './App.module.scss'
 import {
   CavityLength,
@@ -79,6 +80,34 @@ function App() {
   const [isLengthJittering, setIsLengthJittering] = useState(false)
   const [isLengthSweeping, setIsLengthSweeping] = useState(false)
 
+  // MQTT:
+  // mosquitto_sub -h test.mosquitto.org -t 'optical-cavity-simulator' | ts | tee app.log
+  // strict mode renders App twice (dev mode only):
+  // https://reactjs.org/docs/strict-mode.html
+  useEffect(() => {
+    const URL = 'mqtt://test.mosquitto.org:8080'
+    const client = mqtt.connect(URL)
+    const topic = 'optical-cavity-simulator'
+
+    client.on('connect', () => {
+      console.log(`connected to '${URL}', listening to '${topic}'`)
+      client.subscribe(topic, (err) => {
+        if (!err) {
+          client.publish(topic, `App() loaded`)
+        }
+      })
+    })
+
+    client.on('disconnect', () => {
+      console.log('disconnected')
+    })
+
+    client.on('message', (topic, message) => {
+      console.log(message.toString())
+      client.end()
+    })
+  }, [])
+
   useEffect(() => {
     setWavelengthColor(wavelength2rgb(wavelength))
     changeFavicon(wavelength)