mirror/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2025-08-06 13:37:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Update help message

Browse Source
This commit is contained in:
Sergey Lyubka 2025-07-09 12:58:15 +01:00
parent 8a9b1d9873
commit 5db89aa264
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
tutorials/mqtt/mqtt-dashboard/dashboard/main.js
View File

@ -6,7 +6,7 @@ const DefaultUrl = location.protocol == 'https:'
? 'wss://broker.hivemq.com:8884/mqtt' ? 'wss://broker.hivemq.com:8884/mqtt'
: 'ws://broker.hivemq.com:8000/mqtt'; : 'ws://broker.hivemq.com:8000/mqtt';
// const Delay = (ms, val) => new Promise(resolve => setTimeout(resolve, ms, val)); // 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 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 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'; 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; let MqttClient;
const Help = () => html` const Help = () => html`
<div class="p-2 w-96 text-slate-600 bg-slate-50 overflow-auto text-sm"> <div class="p-2 w-96 text-slate-600 bg-amber-100 overflow-auto text-sm">
<div>This is a simple demonstration of the functional device dashboard <div class="py-2">This is a simple demonstration of the functional device dashboard
that manages a fleet of devices via an MQTT server. Source code that manages a fleet of devices via an MQTT server. Source code
is <a class="text-blue-600" href="https://github.com/cesanta/mongoose/tree/master/tutorials/mqtt/mqtt-dashboard">available on GitHub<//>.<//> is <a class="text-blue-600" href="https://github.com/cesanta/mongoose/tree/master/tutorials/mqtt/mqtt-dashboard">available on GitHub<//>.
<div class="py-1"> <//>
<div class="py-2">
For the sake of simplicity, this dashboard does not implement authentication. For the sake of simplicity, this dashboard does not implement authentication.
No external storage is used either to keep device list: for that, retained 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 MQTT messages are utilised. When a device goes online, it publishes its
state to the {root_topic}/{device_id}/status topic state to the {root_topic}/{device_id}/status topic
- LED status and firmware version. - LED status and firmware version.
<//> <//>
<div class="py-1"> <div class="py-2">
The last will message triggers The last will message triggers
the "offline" message to the same topic. This is how this web page the "offline" message to the same topic. This is how this web page
is able to track online/offline status of devices. is able to track online/offline status of devices.
<img src="mqtt.svg" alt="diagram" />
<//> <//>
<div class="py-1"> <div class="py-1">
See developer console for the list of MQTT messages exchanged with See developer console for the list of MQTT messages exchanged with

3
tutorials/mqtt/mqtt-dashboard/dashboard/mqtt.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB