物联网系统：Web 前端到底如何使用 HTTP 协议展示数据？

一、先给你最终结论（超级重要）

MQTT = 设备上传数据用（传感器→基站→服务器）

HTTP = 浏览器看网页、拿数据用（用户→服务器）

你的系统里：设备走 MQTT，人看页面走 HTTP。

---

二、HTTP 在你这套系统里的3 个核心用途

1. 浏览器访问 Web 页面（HTML/CSS/JS）

2. 前端通过 HTTP 请求实时数据

3. 前端通过 HTTP 请求历史曲线数据

所有展示环节，全部走 HTTP。

---

三、完整流程（一步一步讲透）

第 1 步：用户打开浏览器输入地址

http://192.168.1.100:5000

→ 发送 HTTP 请求

→ 服务器返回 网页（HTML）

---

第 2 步：网页加载完成，自动发送 HTTP 请求获取数据

前端 JS 代码执行：

GET /api/latest

→ HTTP 请求

→ 服务器返回所有传感器最新数据

[
  {
    "dev_id": "sensor001",
    "temp": 26.8,
    "humi": 55.4,
    "level_x": 0.3,
    "level_y": -0.2
  }
]

---

第 3 步：前端把数据显示到页面

温度、湿度、水平角度 → 显示在表格

---

第 4 步：前端再发 HTTP 请求获取历史数据

GET /api/history?dev_id=sensor001

→ 服务器返回 24 小时数据

→ 前端用 ECharts 画成曲线图

---

第 5 步：前端每 10 秒自动刷新一次

自动发送 HTTP 请求 → 自动更新显示

不用按 F5

---

三、HTTP 在系统架构中的位置（最清晰图）

【LoRa 传感器】
     ↓ LoRa
【LoRa 基站】
     ↓ MQTT（设备上传）
【MQTT Broker】
     ↓ 解析存储
【数据库】
     ↓
【Web 服务器（Flask）】
   ↙️ ↖️
【HTTP 协议】
   ↙️ ↖️
【浏览器前端】
   展示：实时数据 + 曲线图

---

四、HTTP 工作流程（最精简总结版）

1. 浏览器 → 发送 HTTP → 服务器

要网页

2. 服务器 → 返回 HTTP → 浏览器

给网页

3. 网页 → 发送 HTTP → 服务器

要传感器数据

4. 服务器 → 返回 HTTP → 网页

给 JSON 数据

5. 网页渲染显示

温度、湿度、水平、曲线

---

五、一句话记住（永远不会忘）

设备上传用 MQTT，网页展示用 HTTP。

MQTT 负责机器通信，HTTP 负责给人看。