MQTT 温湿度监控

浏览器里直接连 MQTT Broker，实时接收温度和湿度并画成曲线。数据格式很随意：往主题里发一个纯数字就行。

sensor/temp  →  26.5
sensor/hum   →  60.2

也认 JSON（{"value": 26.5}、{"temp": 26.5} 这类），方便发送端带更多字段。

Broker温度主题湿度主题显示点数3060120

未连接表格视图

当前温度

—°C

等待数据

当前湿度

—%RH

等待数据

温度°C

等待 sensor/temp 的数据…

湿度%RH

等待 sensor/hum 的数据…

说明

为什么是两张图。 温度和湿度量纲不同（°C 和 %RH），画在一张图上必然要引入第二个 Y 轴。双轴的刻度对应关系是人为选的，会让读者看出一个数据里并不存在的相关性——所以这里拆成上下两张，各用各的刻度。（折线颜色：温度橙、湿度蓝，已按色觉障碍可辨识度校验过。）

图表颜色在两个主题下都是各自挑选的，不是简单地把浅色模式反转。

关于连接。 页面从浏览器直连 Broker，用的是 WebSocket 协议，所以填的是 ws:// 地址而不是 tcp://。如果部署在 HTTPS 站点上，浏览器会拦截 ws:// 混合内容，需要改用 wss://。