在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

ESP32運行網頁服務器 (Web-Server)-入門篇

機智云 ? 2025-03-09 14:24 ? 次閱讀

1、什么是 ESP32 Web Server?

ESP32 Web Server是在ESP32微控制器上運行的一個嵌入式網頁服務器。

它能夠處理HTTP請求并作出響應,使用戶可以通過網絡瀏覽器與設備進行通訊和交互。

這種能力使得開發者可以輕松為硬件設備構建用戶友好的接口,實時監控和控制設備。

溫馨提醒:公眾號后臺私信ESP32 Web Server可獲取完整工程;

2、為什么要在ESP32上運行Web Server

在 ESP32 上運行 Web Server 有以下幾個優勢:

前置條件:ESP32 天生自帶Wi-Fi,支持TCP/IP協議棧,是運行Web Server的前置條件;

用戶友好:無需復雜的客戶端軟件,任何設備的瀏覽器都可以訪問和控制。

實時監控與控制:通過簡單的網頁界面即可實時監控設備狀態,并執行控制。

跨平臺兼容:網頁界面可以在任何支持瀏覽器的設備上訪問,無需考慮不同操作系統的兼容性。

易于配置:用戶可以通過網頁便捷設置設備參數。

一個實際的例子,我之前開發過《一個雙無線串口數據記錄工具》,為了對設備進行配置,專門用QT開發了一個上位機,但是由于只出了windows版本,導致其他系統如Linux/MacOS的用戶用不了,所以Web Server將是一個好的解決思路;

335207da-fcaf-11ef-9434-92fbcf53809c.png

上圖基于QT實現的上位機工具;

3、Web Server 原理

33784e54-fcaf-11ef-9434-92fbcf53809c.png

Web Server 原理邏輯圖

本質上Web Server就是利用tcp進行http協議通信,其中ESP32作為Server而瀏覽器作為Client。

那么在HTTP中,最常見的就是GETPOST,這兩種方法,其中GET用于從Server端獲取資源,POST用于把客戶端的信息上報給Server;

除了常見的GETPOST之外還有PUTDELETE,具體的作用可以參考HTTP協議,這里就不展開了;

我們平時訪問Web Server的時候我們一般會獲取到兩種資源;

一種是靜態資源,比如我們通過網頁獲取到一張圖片,不管我們什么時候訪問一般都不會變化;

另一種是動態資源,比如我們訪問股票網頁,股市的數據是實時變化的;

所以當我們用瀏覽器訪問網站時,如果訪問的是靜態資源,服務器則把我們預制的文件(HTML)下發到客戶端的。而這些文件(HTML)則是開發人員提前放到服務器上的。

當訪問的是動態資源時,服務端會進行運算之后再把資源返回給客戶端;

客戶端也就是瀏覽器接收到這些資源,按照我們設計的頁面邏輯把接收到的數據展示出來就是我們看到的頁面了;

所以當我們把ESP32作為Web Server時也需要把預制的網頁保存到ESP32的存儲單元上,可以是Flash或者外接SD卡等方式。

然后等客戶端(瀏覽器)發起了GET請求之后,Server端遵循HTTP協議,加裝指定的html文件之后響應發送給客戶端,客戶端就加載顯示到瀏覽器上;

4、ESP32 上如何實現Web Server

我們這里以通過瀏覽器訪問esp32上的服務地址,然后瀏覽器上可以顯示一行字作為靜態資源,以及esp32的運行時長-作為動態資源,作為我們的實驗例子;

根據上述的原理,我們需要以下3個功能

實現一個http server;

預先存放html文件到esp32上的SD卡(這里我們把SD卡掛載到esp32);

處理瀏覽器發送過來的GET方法,判斷如果是獲取靜態資源則然后返回對應的html文件,如果是動態獲取動態資源則返回esp32的運行時長;

基于以上提到的三個功能,我們接著看看ESP32上的實現;

4.1 ESP32 HTTP Server的實現

在樂鑫的ESP-IDF SDK中,已經有官方提供的esp_http_server組件了,所以我們并不需要手動來造輪子;

組件位置:esp-idf-v5.2/components/esp_http_server主要的幾個函數如如下

創建一個http sever:esp_err_t httpd_start(httpd_handle_t *handle, const httpd_config_t *config);

注冊不同方法的處理函數:esp_err_t httpd_register_uri_handler(httpd_handle_t handle,const httpd_uri_t *uri_handler);

在本實驗中,我注冊了兩個處理函數;

  • index:用于返回頁面的靜態資源;
  • uptime擁有返回設備的運行時長,具體代碼如下:

staticconsthttpd_uri_tindex_page = {
.uri ="/",
.method = HTTP_GET,
.handler = index_get_handler,
/* Let's pass response string in user
* context to demonstrate it's usage */
.user_ctx ="Hello World!"
};
staticconsthttpd_uri_tuptime = {
.uri ="/uptime",
.method = HTTP_GET,
.handler = uptime_handler,
/* Let's pass response string in user
* context to demonstrate it's usage */
.user_ctx ="Hello World!"
};
statichttpd_handle_tstart_webserver(void)
{
httpd_handle_tserver =NULL;
httpd_config_tconfig = HTTPD_DEFAULT_CONFIG();
config.lru_purge_enable =true;
// Start the httpd server
ESP_LOGI(TAG,"Starting server on port: '%d'", config.server_port);
if(httpd_start(&server, &config) == ESP_OK) {
// Set URI handlers
ESP_LOGI(TAG,"Registering URI handlers");
httpd_register_uri_handler(server, &index);
httpd_register_uri_handler(server, &uptime);
returnserver;
}
ESP_LOGI(TAG,"Error starting server!");
returnNULL;
}

4.2 預先存放html文件到esp32上的SD卡

這個步驟主要分為2步

驅動SD卡,同理,ESP-IDF也給我們提供了組件vfs,看下例程很快就知道怎么用了,這里不展開了,如果確實不會,可以直接看本工程源碼;

編寫html文件,這里我簡單寫了一個界面,效果如下圖

33801990-fcaf-11ef-9434-92fbcf53809c.png

4.3 兩個處理函數的實現

index_page,直接加裝我們指定的index.html文件,然后返回;

staticesp_err_tindex_get_handler(httpd_req_t*req)
{
char* buf;
size_tbuf_len;

/* Get header value string length and allocate memory for length + 1,
* extra byte for null termination */
buf_len = httpd_req_get_hdr_value_len(req,"Host") +1;
if(buf_len >1) {
buf =malloc(buf_len);
/* Copy null terminated value string into buffer */
if(httpd_req_get_hdr_value_str(req,"Host", buf, buf_len) == ESP_OK) {
ESP_LOGI(TAG,"Found header => Host: %s", buf);
}
free(buf);
}

/* Read URL query string length and allocate memory for length + 1,
* extra byte for null termination */
buf_len = httpd_req_get_url_query_len(req) +1;
if(buf_len >1) {
buf =malloc(buf_len);
if(httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
ESP_LOGI(TAG,"Found URL query => %s", buf);

}
free(buf);
}

/* Set some custom headers */
/* Send response with custom headers and body set as the
* string passed in user context*/
constchar* resp_str = (constchar*) req->user_ctx;
char*file_name ="/sdcard/html/index.html";
intfileSize = myLogFileSize(file_name);
FILE* fileFD = fopen( file_name,"r+");
if( fileFD ==NULL)
{
constchar* resp_str = (constchar*) req->user_ctx;
ESP_LOGI(TAG,"File not found => %s", file_name);
httpd_resp_send(req, resp_str, HTTPD_RESP_USE_STRLEN);
}
else
{

intread_len =0;
char* fileBuf =NULL;
fseek( fileFD,0, SEEK_END );
fileSize = ftell( fileFD );
fseek( fileFD,0, SEEK_SET );
fileBuf = (char*)malloc( fileSize +1);
memset( fileBuf,0, fileSize +1);
read_len = fread( fileBuf,1, fileSize, fileFD );
fclose( fileFD );
resp_str = fileBuf;
ESP_LOGI(TAG,"Found file => %s", resp_str);
httpd_resp_send(req, resp_str, HTTPD_RESP_USE_STRLEN);
free( fileBuf );
}

/* After sending the HTTP response the old HTTP request
* headers are lost. Check if HTTP request headers can be read now. */
if(httpd_req_get_hdr_value_len(req,"Host") ==0) {
ESP_LOGI(TAG,"Request headers lost");
}
returnESP_OK;
}

uptime_handler獲取系統 運行時長,返回

staticesp_err_tuptime_handler(httpd_req_t*req)
{
uint64_tuptime_microseconds = esp_timer_get_time();// 獲取運行時長(微秒)
uint32_tuptime_seconds = uptime_microseconds /1000000;// 轉換為秒

ESP_LOGI("System Uptime","System has been running for %lu seconds", uptime_seconds);
charresponse[64];
snprintf(response,sizeof(response)," %lu seconds", uptime_seconds);

httpd_resp_set_hdr(req,"Access-Control-Allow-Origin","*");
// httpd_resp_set_hdr(req, "Content-Type", "text/plain");
httpd_resp_send(req, response, HTTPD_RESP_USE_STRLEN);
returnESP_OK;
}

5、實驗效果

我們通過模組的IP或者綁定的mdns域名(什么是mdns可以見我之前的文章:你的ESP32設備有域名嗎?我的有!)訪問,可以獲取到靜態資源和動態的模組運行時長。

效果如下圖展示(運行秒數在遞增)

33920c68-fcaf-11ef-9434-92fbcf53809c.gif

6、結論

通過樂鑫提供的esp_http_server組件,我們在ESP32上成功運行了一個簡單的web server,可以展示一些靜態和動態資源。

后續我將用這個技術原理來實現更多的功能,比如:

通過網頁對ESP32進行配網;

如何基于網頁進行實時通訊;

通過網頁控制ESP32的外設如GPIO串口等功能;

溫馨提醒: 公眾號后臺私信ESP32 Web Server可獲取完整工程;

最后大家覺得這個技術還可以用來做什么有趣的應用,歡迎留言討論。

歡迎大家點贊、關注、轉發將是我創作的最大動力~

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • Web
    Web
    +關注

    關注

    2

    文章

    1285

    瀏覽量

    70959
  • 服務器
    +關注

    關注

    13

    文章

    9730

    瀏覽量

    87462
  • ESP32
    +關注

    關注

    21

    文章

    1012

    瀏覽量

    18977
收藏 人收藏

    評論

    相關推薦
    熱點推薦

    【FireBeetle ESP32-E開發板免費試用】+wifi功能測試&搭建web服務器

    本帖最后由 dql2016 于 2021-9-15 21:11 編輯 ESP32具有wifi功能,可作為AP使用。本帖利用esp32的wifi功能搭建一個簡單的web服務器實現傳
    發表于 09-14 21:51

    Web Server服務器后臺表單處理程序

    1.Web Server服務器后臺表單處理程序:使用 CGI 程序接口編寫后臺程序的 Web服務器。2.Boa
    發表于 12-16 06:25

    CH563運行WEB-SERVER 20分鐘后發熱嚴重怎么改善?

    CH563運行WEB-SERVER 20分鐘后發熱挺嚴重的,估計能有50度以上。PCB是敞開的,環境溫度26度,RSETE連接12.4K電阻,哪位運行WEB
    發表于 06-06 07:35

    ESP32 Web服務器可以向外部Rest API發起HTTP請求嗎?

    我想知道以下是否可行...... 1)作為網絡服務器運行ESP32 可以向外部 Rest API 發起/發出 HTTP 請求嗎?2) 我是否需要同時將其設置為服務器和客戶端,或者
    發表于 03-01 06:22

    如何實現ESP32運行運行HTTP服務器

    我正在努力了解如何與我的網絡服務器建立連接。我正在做一個項目,在 ESP32運行,它運行著一個 HTTP 服務器。我需要從世界任何地方訪
    發表于 03-02 07:25

    使用ESP8266作為Web服務器,如何將網頁上傳到SPIFFS?

    我希望這是一個宣布這個的好地方...... 我一直在使用 ESP8266 作為 Web 服務器,因此必須一直將我的網頁上傳到 SPIFFS。 我曾經使用 Arduino IDE 和 S
    發表于 05-23 08:49

    帶有BME280的ESP32 Web服務器的高級氣象站

    介紹一款帶有BME280的ESP32 Web服務器的高級氣象站。
    發表于 03-17 11:15 ?18次下載
    帶有BME280的<b class='flag-5'>ESP32</b> <b class='flag-5'>Web</b><b class='flag-5'>服務器</b>的高級氣象站

    最簡單DIY基于ESP8266的物聯網智能小車②(webserver服務器網頁高級遙控版)

    ESP8266和ESP32物聯網智能小車開發系列文章目錄第一:最簡單DIY基于ESP8266的物聯網智能小車①(webserver服務器
    發表于 12-29 18:58 ?0次下載
    最簡單DIY基于<b class='flag-5'>ESP</b>8266的物聯網智能小車②(webserver<b class='flag-5'>服務器</b><b class='flag-5'>網頁</b>高級遙控版)

    MELSEC iQ R OPC UA服務器模塊用戶手冊(入門篇)

    MELSEC iQ-R OPC UA服務器模塊用戶手冊(入門篇) 產品規格書
    發表于 08-26 14:21 ?1次下載
    MELSEC iQ R OPC UA<b class='flag-5'>服務器</b>模塊用戶手冊(<b class='flag-5'>入門篇</b>)

    ESP32 CAM WEB服務器入門指南

    電子發燒友網站提供《ESP32 CAM WEB服務器入門指南.zip》資料免費下載
    發表于 11-17 10:44 ?0次下載
    <b class='flag-5'>ESP32</b> CAM <b class='flag-5'>WEB</b><b class='flag-5'>服務器</b>及<b class='flag-5'>入門</b>指南

    使用基于ESP32Web服務器的互聯網控制LED

    電子發燒友網站提供《使用基于ESP32Web服務器的互聯網控制LED.zip》資料免費下載
    發表于 12-20 10:09 ?2次下載
    使用基于<b class='flag-5'>ESP32</b>的<b class='flag-5'>Web</b><b class='flag-5'>服務器</b>的互聯網控制LED

    基于ESP32的簡易web服務器設計

    本文介紹一下如何使用ESP32快速方便的搭建一個簡易的web服務器
    的頭像 發表于 01-05 10:49 ?4582次閱讀

    ESP32 IDF創建WEB SERVER的流程

    ESP-IDF中,Web服務器使用httpd組件實現。我們需要先創建httpd_config_t結構體,指定服務器的端口、最大并發連接數、URI匹配處理
    的頭像 發表于 03-13 15:36 ?5027次閱讀
    <b class='flag-5'>ESP32</b> IDF創建<b class='flag-5'>WEB</b> <b class='flag-5'>SERVER</b>的流程

    使用ESP32 Web服務器進行家庭自動化設置

    電子發燒友網站提供《使用ESP32 Web服務器進行家庭自動化設置.zip》資料免費下載
    發表于 07-03 10:49 ?0次下載
    使用<b class='flag-5'>ESP32</b> <b class='flag-5'>Web</b><b class='flag-5'>服務器</b>進行家庭自動化設置

    什么是web服務器?如何選擇服務器配置?

    Web服務器是一種軟件或硬件設備,用于托管和提供網頁內容。它接收客戶端(如瀏覽)發送的HTTP請求,并返回相應的網頁內容或其他資源,以實現
    的頭像 發表于 01-03 15:25 ?1475次閱讀
    主站蜘蛛池模板: 天天色天 | 你懂的免费在线观看 | 天天操操操操 | 老色鬼久久综合第一 | 伊人久久大香线蕉综合亚洲 | 400部大量精品情侣网站 | 国产色司机在线视频免费观看 | 特黄特色大片免费视频大全 | 中国黄色一级毛片 | 免费观看一级特黄欧美大片 | 日日操夜夜操狠狠操 | 网红和老师啪啪对白清晰 | 国产一级aaa全黄毛片 | h版欧美一区二区三区四区 h网站亚洲 | 激情久久婷婷 | 久久99精品国产麻豆宅宅 | 国产三级毛片视频 | 久久久这里有精品999 | 农村妇女高清毛片一级 | 免费美剧在线观看 | 午夜美女网站 | 一个色在线视频 | 特级全黄一级毛片免费 | 女人张开腿 让男人桶视频 女人张开腿等男人桶免费视频 | 日日噜噜噜夜夜爽爽狠狠视频 | 日韩欧美视频在线一区二区 | 五月天情网 | 年下攻高h好涨 | 免费视频黄 | 日本国产在线 | 老司机亚洲精品影院在线观看 | 人人插人人干 | 天天干天天玩天天操 | 永久免费精品视频 | 亚洲精品福利网站 | 色吧五月天 | 天天干天天曰天天操 | 女人爽到喷水的视频大全在线观看 | 如果我们是季节韩剧在线观看 | 99色视频在线 | 国产牛牛 |