ESP32開發入門(七)：HTTP開發實踐

一、HTTP協議基礎

1.1 什么是HTTP？

HTTP（HyperText Transfer Protocol，超文本傳輸協議）是互聯網上應用最為廣泛的一種網絡協議，用于從服務器傳輸超文本到本地瀏覽器。它是一種無狀態的請求/響應協議，工作在客戶端-服務器計算模型中。

1.2 HTTP的工作原理

HTTP協議基于請求-響應模型，主要包含以下組件：

客戶端（Client）：發送HTTP請求（如瀏覽器、ESP32等設備）
服務器（Server）：接收請求并返回響應
請求方法：GET、POST、PUT、DELETE等
狀態碼：200(成功)、404(未找到)、500(服務器錯誤)等

ESP32設備（客戶端） --HTTP請求--> Web服務器 <--HTTP響應-- 瀏覽器或其他客戶端

1.3 HTTP的核心特性

簡單快速：基于文本的簡單協議
無連接：每次連接只處理一個請求
無狀態：協議不保留之前的請求信息
靈活：可以傳輸任意類型的數據
支持多種請求方法：滿足不同場景需求

1.4 HTTP在物聯網中的應用

設備數據上報：向服務器發送傳感器數據
遠程配置：從服務器獲取設備配置
固件升級：通過HTTP下載固件包
Web控制界面：提供設備管理頁面
API交互：與其他系統集成

二、ESP32-S3 HTTP通信程序 (FreeRTOS + Arduino框架)

下面是一個基于ESP32-S3的HTTP通信程序，使用FreeRTOS和Arduino框架實現。這個程序包含HTTP客戶端功能，可以向服務器發送GET和POST請求。

#include <WiFi.h>
#include <HTTPClient.h>
#include <Arduino.h>
#include <freertos/FreeRTOS.h>
#include <freertos/task.h>
?
// WiFi配置
const char* ssid = "你的WiFi名稱";
const char* password = "你的WiFi密碼";
?
// 服務器配置
const char* serverUrl = "http://你的服務器地址:端口/api/data"; // 示例："http://192.168.1.100:3000/api/data"
?
// FreeRTOS任務句柄
TaskHandle_t httpTaskHandle = NULL;
TaskHandle_t wifiTaskHandle = NULL;
?
// 連接WiFi函數
void connectToWiFi() {Serial.println();Serial.print("正在連接WiFi: ");Serial.println(ssid);
?WiFi.begin(ssid, password);
?while (WiFi.status() != WL_CONNECTED) {vTaskDelay(500 / portTICK_PERIOD_MS);Serial.print(".");}
?Serial.println("");Serial.println("WiFi已連接");Serial.print("IP地址: ");Serial.println(WiFi.localIP());
}
?
// 發送HTTP GET請求
void sendHttpGetRequest() {if (WiFi.status() == WL_CONNECTED) {HTTPClient http;Serial.print("發送GET請求到: ");Serial.println(serverUrl);http.begin(serverUrl);int httpCode = http.GET();if (httpCode > 0) {Serial.printf("HTTP響應碼: %d\n", httpCode);if (httpCode == HTTP_CODE_OK) {String payload = http.getString();Serial.println("服務器響應:");Serial.println(payload);}} else {Serial.printf("GET請求失敗, 錯誤: %s\n", http.errorToString(httpCode).c_str());}http.end();} else {Serial.println("WiFi未連接，無法發送請求");}
}
?
// 發送HTTP POST請求
void sendHttpPostRequest() {if (WiFi.status() == WL_CONNECTED) {HTTPClient http;Serial.print("發送POST請求到: ");Serial.println(serverUrl);http.begin(serverUrl);http.addHeader("Content-Type", "application/json");// 創建JSON格式的POST數據String httpRequestData = "{\"deviceId\":\"ESP32-S3\",\"temperature\":25.5,\"humidity\":60}";int httpCode = http.POST(httpRequestData);if (httpCode > 0) {Serial.printf("HTTP響應碼: %d\n", httpCode);if (httpCode == HTTP_CODE_OK || httpCode == HTTP_CODE_CREATED) {String payload = http.getString();Serial.println("服務器響應:");Serial.println(payload);}} else {Serial.printf("POST請求失敗, 錯誤: %s\n", http.errorToString(httpCode).c_str());}http.end();} else {Serial.println("WiFi未連接，無法發送請求");}
}
?
// HTTP任務函數
void httpTask(void *pvParameters) {while (1) {// 每隔10秒發送一次請求static uint32_t lastRequestTime = 0;uint32_t now = millis();if (now - lastRequestTime > 10000) {lastRequestTime = now;// 交替發送GET和POST請求static bool sendGet = true;if (sendGet) {sendHttpGetRequest();} else {sendHttpPostRequest();}sendGet = !sendGet;}vTaskDelay(100 / portTICK_PERIOD_MS);}
}
?
// WiFi監控任務函數
void wifiMonitorTask(void *pvParameters) {while (1) {if (WiFi.status() != WL_CONNECTED) {Serial.println("WiFi連接丟失，嘗試重新連接...");connectToWiFi();}vTaskDelay(10000 / portTICK_PERIOD_MS); // 每10秒檢查一次}
}
?
void setup() {Serial.begin(115200);// 初始化WiFi連接connectToWiFi();// 創建HTTP任務xTaskCreatePinnedToCore(httpTask, ? ? ? ? ? // 任務函數"HTTP Task", ? ? ? ?// 任務名稱8192, ? ? ? ? ? ? ? // 堆棧大小NULL, ? ? ? ? ? ? ? // 參數1, ? ? ? ? ? ? ? ? ?// 優先級&httpTaskHandle, ? ?// 任務句柄1 ? ? ? ? ? ? ? ? ? // 運行在核心1上);// 創建WiFi監控任務xTaskCreatePinnedToCore(wifiMonitorTask, ? ?// 任務函數"WiFi Task", ? ? ? ?// 任務名稱4096, ? ? ? ? ? ? ? // 堆棧大小NULL, ? ? ? ? ? ? ? // 參數1, ? ? ? ? ? ? ? ? ?// 優先級&wifiTaskHandle, ? ?// 任務句柄0 ? ? ? ? ? ? ? ? ? // 運行在核心0上);
}
?
void loop() {// 主循環為空，所有功能由FreeRTOS任務處理vTaskDelay(1000 / portTICK_PERIOD_MS);
}

2.1 代碼說明

WiFi連接：
- 使用WiFi.begin()連接到指定的WiFi網絡
- 單獨的WiFi監控任務持續檢查連接狀態并在斷開時重新連接
HTTP功能：
- 使用HTTPClient庫實現HTTP協議
- 支持GET和POST請求
- POST請求發送JSON格式數據
- 自動處理HTTP響應
FreeRTOS集成：
- 創建了兩個任務：一個用于HTTP通信，一個用于WiFi監控
- 任務運行在不同的核心上以提高效率
- 使用vTaskDelay()代替delay()以確保不阻塞其他任務
多任務處理：
- HTTP任務負責定期發送HTTP請求
- WiFi任務持續監控網絡連接狀態

2.2 使用說明

修改ssid和password為你自己的WiFi配置
修改serverUrl為你的服務器地址和API端點
根據需要調整POST請求的內容和格式
請求頻率可以在httpTask函數中調整

2.3 所需庫

WiFi.h (Arduino ESP32核心自帶)
HTTPClient (Arduino ESP32核心自帶)

三、HTTP驗證步驟 - 搭建Node.js服務器

為了驗證ESP32的HTTP功能，我們可以使用Node.js搭建一個簡單的服務器，接收ESP32的請求并返回響應。

下面我將詳細介紹如何搭建一個完整的Node.js服務器，并將HTML頁面數據整合到server.js文件中，以便于ESP32通過HTTP協議與服務器進行通信。

注意：若你電腦沒安裝node，請自行百度安裝，網上教程較多，這里就不贅述了。

3.1 創建Node.js服務器

新建一個文件夾作為項目目錄
在該目錄下創建server.js文件，內容如下：

const express = require('express');
const bodyParser = require('body-parser');
?
const app = express();
const port = 3000;
?
// 中間件
app.use(bodyParser.json());
?
// 存儲接收到的數據
let receivedData = [];
?
// HTML頁面內容
const htmlPage = `
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ESP32 數據監控</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.data-container {margin-top: 20px;padding: 15px;border: 1px solid #ddd;border-radius: 5px;background-color: #f9f9f9;}button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}.data-item {margin-bottom: 10px;padding: 10px;border-bottom: 1px solid #eee;}.timestamp {color: #666;font-size: 0.9em;}</style>
</head>
<body><h1>ESP32 數據監控</h1><button id="refreshBtn">刷新數據</button><div class="data-container"><h2>最新上報數據 (共<span id="dataCount">0</span>條)</h2><div id="dataDisplay"><p>暫無數據...</p></div></div>
?<script>const refreshBtn = document.getElementById('refreshBtn');const dataDisplay = document.getElementById('dataDisplay');const dataCount = document.getElementById('dataCount');// 格式化數據顯示function formatData(data) {if (data.receivedData && data.receivedData.length > 0) {return data.receivedData.map(item => \`<div class="data-item"><div><strong>設備ID:</strong> \${item.data.deviceId || '未知'}</div><div><strong>溫度:</strong> \${item.data.temperature || 'N/A'}°C</div><div><strong>濕度:</strong> \${item.data.humidity || 'N/A'}%</div><div class="timestamp">\${new Date(item.timestamp).toLocaleString()}</div></div>\`).join('');}return '<p>暫無數據...</p>';}// 獲取數據函數async function fetchData() {try {const response = await fetch('/api/data');const data = await response.json();dataCount.textContent = data.receivedData ? data.receivedData.length : 0;dataDisplay.innerHTML = formatData(data);} catch (error) {dataDisplay.innerHTML = \`<p style="color:red;">獲取數據失敗: \${error.message}</p>\`;}}// 初始加載數據document.addEventListener('DOMContentLoaded', fetchData);// 按鈕點擊事件refreshBtn.addEventListener('click', fetchData);// 每5秒自動刷新setInterval(fetchData, 5000);</script>
</body>
</html>
`;
?
// 首頁路由 - 返回HTML頁面
app.get('/', (req, res) => {res.send(htmlPage);
});
?
// GET請求處理 - 獲取所有數據
app.get('/api/data', (req, res) => {console.log('收到GET請求');res.status(200).json({message: '數據獲取成功',receivedData: receivedData,timestamp: new Date().toISOString()});
});
?
// POST請求處理 - 接收ESP32數據
app.post('/api/data', (req, res) => {console.log('收到POST請求:', req.body);// 驗證數據if (!req.body.deviceId) {return res.status(400).json({error: '缺少必要字段: deviceId'});}// 存儲數據receivedData.push({data: req.body,timestamp: new Date().toISOString()});// 限制存儲的數據量if (receivedData.length > 50) {receivedData = receivedData.slice(-50);}res.status(201).json({message: '數據接收成功',yourData: req.body});
});
?
// 清空數據接口
app.delete('/api/data', (req, res) => {receivedData = [];res.status(200).json({message: '所有數據已清空'});
});
?
// 啟動服務器
app.listen(port, () => {console.log(`服務器運行在 http://localhost:${port}`);console.log(`API端點:`);console.log(`GET / ? ? ? ? ?  - 查看數據監控頁面`);console.log(`GET /api/data ?  - 獲取所有接收到的數據`);console.log(`POST /api/data ? - 接收ESP32發送的數據`);console.log(`DELETE /api/data - 清空所有數據`);
});

3.1.1 代碼詳細說明

3.1.1.1 初始化設置

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

引入Express框架和body-parser中間件
創建Express應用實例
設置服務器端口為3000

3.1.1.2 數據存儲

let receivedData = [];

使用一個數組來存儲ESP32發來的所有數據
每個數據項包含原始數據和接收時間戳

3.1.1.3 HTML頁面整合

const htmlPage = `...`;

將完整的HTML頁面內容作為模板字符串存儲在變量中
包含CSS樣式和內聯JavaScript
使用ES6模板字符串語法方便插入變量

3.1.1.4 路由處理

首頁路由：
```
app.get('/', (req, res) => {res.send(htmlPage);
});
```
- 處理根路徑請求
- 直接返回HTML頁面內容

GET API接口：

app.get('/api/data', (req, res) => {res.json({message: '數據獲取成功',receivedData: receivedData,timestamp: new Date().toISOString()});
});

返回所有存儲的數據
包含狀態信息和時間戳

POST API接口：

app.post('/api/data', (req, res) => {// 數據驗證和存儲res.status(201).json({message: '數據接收成功',yourData: req.body});
});

接收ESP32發來的JSON數據
驗證必要字段
存儲數據并返回確認

DELETE API接口：

app.delete('/api/data', (req, res) => {receivedData = [];res.json({ message: '所有數據已清空' });
});

清空存儲的數據
用于測試和調試

3.1.1.5 前端JavaScript功能

// 格式化數據顯示
function formatData(data) {// 將JSON數據轉換為HTML顯示
}
?
// 獲取數據函數
async function fetchData() {// 從/api/data獲取數據并更新頁面
}
?
// 事件監聽和自動刷新
document.addEventListener('DOMContentLoaded', fetchData);
refreshBtn.addEventListener('click', fetchData);
setInterval(fetchData, 5000);

使用Fetch API獲取數據
動態更新頁面內容
自動刷新和手動刷新功能
數據格式化顯示

3.2 安裝依賴

在項目目錄下運行以下命令安裝必要的依賴：

npm init -y
npm install express body-parser

3.3 啟動服務器

node server.js

服務器啟動后，你將在控制臺看到：

服務器運行在 http://localhost:3000

現在你可以通過瀏覽器訪問http://localhost:3000來查看ESP32上報的數據。

3.4 驗證步驟

確保你的PC和ESP32在同一個局域網
修改ESP32代碼中的serverUrl為你的PC的IP地址和端口（如http://192.168.1.100:3000/api/data）
上傳ESP32代碼并打開串口監視器
在瀏覽器中訪問http://localhost:3000
觀察串口輸出和網頁顯示的數據

3.6 預期結果

串口輸出：

發送GET請求到: http://192.168.1.100:3000/api/data
HTTP響應碼: 200
服務器響應:
{"message":"Hello from Node.js server!","receivedData":[...],"timestamp":"..."}
?
發送POST請求到: http://192.168.1.100:3000/api/data
HTTP響應碼: 201
服務器響應:
{"message":"Data received successfully","yourData":{"deviceId":"ESP32-S3","temperature":25.5,"humidity":60}}

網頁顯示：

最新上報數據
{"message": "Hello from Node.js server!","receivedData": [{"data": {"deviceId": "ESP32-S3","temperature": 25.5,"humidity": 60},"timestamp": "..."}],"timestamp": "..."
}

四、實際項目應用示例

4.1 環境監測系統

功能設計：

定期上報溫濕度數據
從服務器獲取配置參數
實現固件升級檢查

void checkForUpdates() {HTTPClient http;http.begin("http://yourserver.com/api/update");int httpCode = http.GET();if (httpCode == HTTP_CODE_OK) {String payload = http.getString();DynamicJsonDocument doc(1024);deserializeJson(doc, payload);if (doc["available"] == true) {String newVersion = doc["version"];String firmwareUrl = doc["url"];if (newVersion != currentFirmwareVersion) {startFirmwareUpdate(firmwareUrl);}}}http.end();
}

4.2 遠程控制面板

功能設計：

提供Web控制界面
實現設備狀態實時顯示
支持多設備管理

void handleRoot() {String html = "<html><body>";html += "<h1>ESP32 Control Panel</h1>";html += "<p>Temperature: " + String(readTemperature()) + "°C</p>";html += "<p>Humidity: " + String(readHumidity()) + "%</p>";html += "<form method='post' action='/control'>";html += "<button name='led' value='on'>Turn LED On</button>";html += "<button name='led' value='off'>Turn LED Off</button>";html += "</form>";html += "</body></html>";server.send(200, "text/html", html);
}