ESP32HTTP的使用：開發全過程

一、環境搭建

1、首先需要從官方網站下載安裝Arduino IDE軟件，並安裝好ESP32板子相關的支持庫。

#include 
#include 

WebServer server(80);

void handleRoot() {
  server.send(200, "text/plain", "Hello from ESP32!");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP Server started");
}

void loop() {
  server.handleClient();
}

2、然後將ESP32與電腦連接，選擇對應的開發板和端口後，即可進行編寫代碼。

3、將ESP32與網絡連接起來。在WiFi.begin()中填入訪問點名稱和密碼，即可連接。

4、開啟WebServer並監聽80端口，調用handleRoot函數處理根網頁請求。處理完請求後調用server.send將文本「Hello from ESP32!」返回至客戶端。

二、HTML展示

1、為WebServer添加網頁文件

#include 
#include 

WebServer server(80);

void handleRoot() {
  server.send(200, "text/html", "Hello from ESP32!");
}

void handleNotFound(){
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP Server started");
}

void loop() {
  server.handleClient();
}

2、將HTML文本添加至處理函數handleRoot中，使用text/html表示文本類型。

3、如果在根目錄未找到對應文件，調用handleNotFound函數通知客戶端，發送404狀態碼和提示信息。

三、表單處理

1、編寫表單HTML代碼及處理函數

#include 
#include 

WebServer server(80);

void handleRoot() {
  server.send(200, "text/html", "
");
}

void handleForm() {
  String message = server.arg("message");
  server.send(200, "text/html", "Message Received

" + message + "");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/form", HTTP_POST, handleForm);
  server.begin();
  Serial.println("HTTP Server started");
}

void loop() {
  server.handleClient();
}

2、在handleRoot函數中添加表單HTML代碼。form標籤屬性method和action分別為POST請求和/form路徑，包含一個text類型的輸入框和提交按鈕。

3、在handleForm函數中將表單中的輸入信息取出並組成回應HTML代碼發送到客戶端。

4、將/form路徑註冊為HTTP POST請求的處理函數。

四、服務器訪問

1、使用WebClient訪問ESP32的WebServer

#include 
#include 

WiFiClient wifiClient;
WebClient client(wifiClient);

void setup() {
  Serial.begin(9600);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  client.begin("http://esp32-webserver.local");
  client.addHeader("Content-Type", "text/plain");
  if (client.GET("/")) {
    Serial.println(client.getResponsePayload());
  } else {
    Serial.println("Request failed");
  }
  delay(5000);
}

2、初始化WebClient並連接WiFi。

3、循環調用client.GET方法請求ESP32的WebServer根路徑，並接收響應信息。

4、判斷請求是否成功，若成功則輸出響應信息至串行監視器。

五、文件讀寫

1、文件上傳和處理

#include 
#include 
#include 
#include 

WebServer server(80);
File fsUploadFile;

void handleUpload() {
  HTTPUpload& upload = server.upload();
  if (upload.status == UPLOAD_FILE_START) {
    fsUploadFile = SPIFFS.open("/" + upload.filename, "w");
  } else if (upload.status == UPLOAD_FILE_WRITE) {
    if (fsUploadFile) {
      fsUploadFile.write(upload.buf, upload.currentSize);
    }
  } else if (upload.status == UPLOAD_FILE_END) {
    if (fsUploadFile) {
      fsUploadFile.close();
    }
  }
  server.send(200);
}

void handleOTA() {
  HTTPUpload& upload = server.upload();
  if (upload.status == UPLOAD_FILE_START) {
    Serial.println("Start uploading");
    Serial.flush();
    esp_err_t err = esp_ota_begin(esp_ota_get_next_update_partition(NULL), OTA_WITH_SEQUENTIAL_WRITES, NULL);
    if (err != ESP_OK) {
      Serial.printf("OTA begin failed, error=%d\r\n", err);
    } else {
      Serial.println("OTA begin succeeded");
    }
  } else if (upload.status == UPLOAD_FILE_WRITE) {
    esp_err_t err = esp_ota_write(upload.buf, upload.currentSize);
    if (err != ESP_OK) {
      Serial.printf("OTA write failed, error=%d\r\n", err);
    }
  } else if (upload.status == UPLOAD_FILE_END) {
    if (esp_ota_end(esp_ota_get_running_partition()) == ESP_OK) {
      esp_err_t err = esp_ota_set_boot_partition(esp_ota_get_next_update_partition(NULL));
      if (err == ESP_OK) {
        Serial.println("ESP32 will reboot now.");
        delay(2000);
        ESP.restart();
      } else {
        Serial.printf("OTA partition setting failed, error=%d\r\n", err);
      }
    } else {
      Serial.println("OTA end failed");
    }
  }
  server.send(200);
}

void handleRoot() {
  server.send(200, "text/html", "\
    ESP32 Web Server\
    \
      \
      \
    \
    \
      \
      \
    \
  ");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  SPIFFS.begin();
  server.on("/", handleRoot);
  server.on("/upload", HTTP_POST, [](){ server.send(200); }, handleUpload);
  server.on("/ota", HTTP_POST, [](){ server.send(200); }, handleOTA);
  server.begin();
  Serial.println("HTTP Server started");
}

void loop() {
  server.handleClient();
}

2、在handleUpload函數中接收上傳的文件，將其存儲到SPIFFS中。

3、在handleOTA函數中開始OTA程序，將上傳文件寫入FLASH並更新ESP32的boot分區，完成後重啟ESP32。

4、在handleRoot函數中添加表單HTML代碼，其中指定POST請求路徑為/upload和/ota，並設置enctype屬性為multipart/form-data表示表單數據包含文件信息。

5、聲明SPIFFS文件對象fsUploadFile，用於在handleUpload函數中存儲上傳的文件。

6、在setup函數中初始化SPIFFS文件系統。

原創文章，作者：PBOU，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/135656.html

ESP32HTTP的使用：開發全過程

一、環境搭建

二、HTML展示

Hello from ESP32!

三、表單處理

四、服務器訪問

五、文件讀寫

ESP32 Web Server

相關推薦

發表回復