diff --git a/tutorials/mqtt/mqtt-dashboard/dashboard/main.js b/tutorials/mqtt/mqtt-dashboard/dashboard/main.js index a32e1ae1..d830f6d2 100644 --- a/tutorials/mqtt/mqtt-dashboard/dashboard/main.js +++ b/tutorials/mqtt/mqtt-dashboard/dashboard/main.js @@ -6,7 +6,7 @@ const DefaultUrl = location.protocol == 'https:' ? 'wss://broker.hivemq.com:8884/mqtt' : 'ws://broker.hivemq.com:8000/mqtt'; // const Delay = (ms, val) => new Promise(resolve => setTimeout(resolve, ms, val)); -const handleFetchError = r => r.ok || alert(`Error: ${r.statusText}`); +// const handleFetchError = r => r.ok || alert(`Error: ${r.statusText}`); const LabelClass = 'text-sm truncate font-medium my-auto whitespace-nowrap'; const BadgeClass = 'flex-inline text-sm rounded-md rounded px-2 py-0.5 ring-1 ring-inset'; const InputClass = 'font-normal text-sm rounded w-full flex-1 py-0.5 px-2 text-gray-700 placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500 rounded border'; @@ -21,21 +21,23 @@ const Colors = { let MqttClient; const Help = () => html` -
-
This is a simple demonstration of the functional device dashboard +
+
This is a simple demonstration of the functional device dashboard that manages a fleet of devices via an MQTT server. Source code - is available on GitHub. -
+ is available on GitHub. + +
For the sake of simplicity, this dashboard does not implement authentication. No external storage is used either to keep device list: for that, retained MQTT messages are utilised. When a device goes online, it publishes its state to the {root_topic}/{device_id}/status topic - LED status and firmware version. -
+
The last will message triggers the "offline" message to the same topic. This is how this web page is able to track online/offline status of devices. + diagram
See developer console for the list of MQTT messages exchanged with diff --git a/tutorials/mqtt/mqtt-dashboard/dashboard/mqtt.svg b/tutorials/mqtt/mqtt-dashboard/dashboard/mqtt.svg new file mode 100644 index 00000000..d597de6b --- /dev/null +++ b/tutorials/mqtt/mqtt-dashboard/dashboard/mqtt.svg @@ -0,0 +1,3 @@ + + +
MQTT server
MQTT server
device_XXX
device_XXX
device_YYY
device_YYY
device_ZZZ
device_ZZZ
mg_mqtt_dashboard/DEVICE_ID/rx          - requests
mg_mqtt_dashboard/DEVICE_ID/rx          - requests
mg_mqtt_dashboard/DEVICE_ID/tx          - responses
mg_mqtt_dashboard/DEVICE_ID/tx          - responses
mg_mqtt_dashboard/DEVICE_ID/status   - last will & change notifications
mg_mqtt_dashboard/DEVICE_ID/status   - last will & change notifications
Topics:
Topics:
This web page
This web page
Browser
Browser \ No newline at end of file