桌面小屏幕实战课程：DesktopScreen 13 HTTP SERVER
飞书文档
https://x509p6c8to.feishu.cn/docx/doxcnGRheM4Il23BxU8m7tEWr4c
参考源码
/home/kemp/work/esp/esp-idf/examples/protocols/http_server
源码下载方式参考：
源码下载方式
http_server移植
编写html文件：参考飞书文档
添加html文件到/home/kemp/work/esp/DesktopScreen/main/CMakeLists.txt
EMBED_FILES
"setting.html"
分区表添加spiffs，用于存储setting.html
分区表 - ESP32 - ‒ ESP-IDF 编程指南 latest 文档
# Name, Type, SubType, Offset, Size, Flags
# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
nvs, data, nvs, 0x9000, 0x6000,
phy_init, data, phy, 0xf000, 0x1000,
factory, app, factory, 0x10000, 0x100000,
storage, data, spiffs, 0x110000,0x4D000,
使用idf.py menuconfig设置Custom partition table CSV打开
HTTP 服务器 - - ‒ ESP-IDF 编程指南 release-v4.1 文档
/* HTTP File Server ExampleThis example code is in the Public Domain (or CC0 licensed, at your option.)Unless required by applicable law or agreed to in writing, thissoftware is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES ORCONDITIONS OF ANY KIND, either express or implied.
*/#include <stdio.h>
#include <string.h>
#include <sys/param.h>
#include <sys/unistd.h>
#include <sys/stat.h>
#include <dirent.h>#include "esp_err.h"
#include "esp_log.h"#include "cJSON.h"
#include "esp_vfs.h"
#include "esp_spiffs.h"
#include "esp_http_server.h"
#include "nvs_flash.h"
#include "esp_event.h"#include "ds_spiffs.h"
#include "ds_system_data.h"char user_id[20];
char user_code[20];/* Max length a file path can have on storage */
#define FILE_PATH_MAX (ESP_VFS_PATH_MAX + CONFIG_SPIFFS_OBJ_NAME_LEN)/* Max size of an individual file. Make sure this* value is same as that set in upload_script.html */
#define MAX_FILE_SIZE (200*1024) // 200 KB
#define MAX_FILE_SIZE_STR "200KB"/* Scratch buffer size */
#define SCRATCH_BUFSIZE 8192struct file_server_data {/* Base path of file storage */char base_path[ESP_VFS_PATH_MAX + 1];/* Scratch buffer for temporary storage during file transfer */char scratch[SCRATCH_BUFSIZE];
};static const char *TAG = "file_server";/* Handler to redirect incoming GET request for /index.html to /* This can be overridden by uploading file with same name */
static esp_err_t index_html_get_handler(httpd_req_t *req)
{httpd_resp_set_status(req, "307 Temporary Redirect");httpd_resp_set_hdr(req, "Location", "/");httpd_resp_send(req, NULL, 0); // Response body can be emptyreturn ESP_OK;
}/* Handler to respond with an icon file embedded in flash.* Browsers expect to GET website icon at URI /favicon.ico.* This can be overridden by uploading file with same name */
static esp_err_t favicon_get_handler(httpd_req_t *req)
{extern const unsigned char favicon_ico_start[] asm("_binary_favicon_ico_start");extern const unsigned char favicon_ico_end[] asm("_binary_favicon_ico_end");const size_t favicon_ico_size = (favicon_ico_end - favicon_ico_start);httpd_resp_set_type(req, "image/x-icon");httpd_resp_send(req, (const char *)favicon_ico_start, favicon_ico_size);return ESP_OK;
}/* Send HTTP response with a run-time generated html consisting of* a list of all files and folders under the requested path.* In case of SPIFFS this returns empty list when path is any* string other than '/', since SPIFFS doesn't support directories */
static esp_err_t http_resp_dir_html(httpd_req_t *req, const char *dirpath)
{char entrypath[FILE_PATH_MAX];char entrysize[16];const char *entrytype;struct dirent *entry;struct stat entry_stat;DIR *dir = opendir(dirpath);const size_t dirpath_len = strlen(dirpath);/* Retrieve the base path of file storage to construct the full path */strlcpy(entrypath, dirpath, sizeof(entrypath));if (!dir) {ESP_LOGE(TAG, "Failed to stat dir : %s", dirpath);/* Respond with 404 Not Found */httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Directory does not exist");return ESP_FAIL;}/* Send HTML file header */httpd_resp_sendstr_chunk(req, "<!DOCTYPE html><html><body>");/* Get handle to embedded file upload script */extern const unsigned char upload_script_start[] asm("_binary_setting_html_start");extern const unsigned char upload_script_end[] asm("_binary_setting_html_end");const size_t upload_script_size = (upload_script_end - upload_script_start);/* Add file upload form and script which on execution sends a POST request to /upload */httpd_resp_send_chunk(req, (const char *)upload_script_start, upload_script_size);/* Send file-list table definition and column labels */httpd_resp_sendstr_chunk(req,"<table class=\"fixed\" border=\"1\">""<col width=\"800px\" /><col width=\"300px\" /><col width=\"300px\" /><col width=\"100px\" />""<thead><tr><th>Name</th><th>Type</th><th>Size (Bytes)</th><th>Delete</th></tr></thead>""<tbody>");/* Iterate over all files / folders and fetch their names and sizes */while ((entry = readdir(dir)) != NULL) {entrytype = (entry->d_type == DT_DIR ? "directory" : "file");strlcpy(entrypath + dirpath_len, entry->d_name, sizeof(entrypath) - dirpath_len);if (stat(entrypath, &entry_stat) == -1) {ESP_LOGE(TAG, "Failed to stat %s : %s", entrytype, entry->d_name);continue;}sprintf(entrysize, "%ld", entry_stat.st_size);ESP_LOGI(TAG, "Found %s : %s (%s bytes)", entrytype, entry->d_name, entrysize);/* Send chunk of HTML file containing table entries with file name and size */httpd_resp_sendstr_chunk(req, "<tr><td><a href=\"");httpd_resp_sendstr_chunk(req, req->uri);httpd_resp_sendstr_chunk(req, entry->d_name);if (entry->d_type == DT_DIR) {httpd_resp_sendstr_chunk(req, "/");}httpd_resp_sendstr_chunk(req, "\">");httpd_resp_sendstr_chunk(req, entry->d_name);httpd_resp_sendstr_chunk(req, "</a></td><td>");httpd_resp_sendstr_chunk(req, entrytype);httpd_resp_sendstr_chunk(req, "</td><td>");httpd_resp_sendstr_chunk(req, entrysize);httpd_resp_sendstr_chunk(req, "</td><td>");httpd_resp_sendstr_chunk(req, "<form method=\"post\" action=\"/delete");httpd_resp_sendstr_chunk(req, req->uri);httpd_resp_sendstr_chunk(req, entry->d_name);httpd_resp_sendstr_chunk(req, "\"><button type=\"submit\">Delete</button></form>");httpd_resp_sendstr_chunk(req, "</td></tr>\n");}closedir(dir);/* Finish the file list table */httpd_resp_sendstr_chunk(req, "</tbody></table>");/* Send remaining chunk of HTML file to complete it */httpd_resp_sendstr_chunk(req, "</body></html>");/* Send empty chunk to signal HTTP response completion */httpd_resp_sendstr_chunk(req, NULL);return ESP_OK;
}#define IS_FILE_EXT(filename, ext) \(strcasecmp(&filename[strlen(filename) - sizeof(ext) + 1], ext) == 0)/* Set HTTP response content type according to file extension */
static esp_err_t set_content_type_from_file(httpd_req_t *req, const char *filename)
{if (IS_FILE_EXT(filename, ".pdf")) {return httpd_resp_set_type(req, "application/pdf");} else if (IS_FILE_EXT(filename, ".html")) {return httpd_resp_set_type(req, "text/html");} else if (IS_FILE_EXT(filename, ".jpeg")) {return httpd_resp_set_type(req, "image/jpeg");} else if (IS_FILE_EXT(filename, ".ico")) {return httpd_resp_set_type(req, "image/x-icon");}/* This is a limited set only *//* For any other type always set as plain text */return httpd_resp_set_type(req, "text/plain");
}/* Copies the full path into destination buffer and returns* pointer to path (skipping the preceding base path) */
static const char* get_path_from_uri(char *dest, const char *base_path, const char *uri, size_t destsize)
{const size_t base_pathlen = strlen(base_path);size_t pathlen = strlen(uri);const char *quest = strchr(uri, '?');if (quest) {pathlen = MIN(pathlen, quest - uri);}const char *hash = strchr(uri, '#');if (hash) {pathlen = MIN(pathlen, hash - uri);}if (base_pathlen + pathlen + 1 > destsize) {/* Full path string won't fit into destination buffer */return NULL;}/* Construct full path (base + path) */strcpy(dest, base_path);strlcpy(dest + base_pathlen, uri, pathlen + 1);/* Return pointer to path, skipping the base */return dest + base_pathlen;
}/* Handler to download a file kept on the server */
static esp_err_t download_get_handler(httpd_req_t *req)
{char filepath[FILE_PATH_MAX];FILE *fd = NULL;struct stat file_stat;const char *filename = get_path_from_uri(filepath, ((struct file_server_data *)req->user_ctx)->base_path,req->uri, sizeof(filepath));if (!filename) {ESP_LOGE(TAG, "Filename is too long");/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Filename too long");return ESP_FAIL;}/* If name has trailing '/', respond with directory contents */if (filename[strlen(filename) - 1] == '/') {//返回html页面return http_resp_dir_html(req, filepath);}if (stat(filepath, &file_stat) == -1) {/* If file not present on SPIFFS check if URI* corresponds to one of the hardcoded paths */if (strcmp(filename, "/index.html") == 0) {return index_html_get_handler(req);} else if (strcmp(filename, "/favicon.ico") == 0) {return favicon_get_handler(req);}ESP_LOGE(TAG, "Failed to stat file : %s", filepath);/* Respond with 404 Not Found */httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "File does not exist");return ESP_FAIL;}fd = fopen(filepath, "r");if (!fd) {ESP_LOGE(TAG, "Failed to read existing file : %s", filepath);/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to read existing file");return ESP_FAIL;}ESP_LOGI(TAG, "Sending file : %s (%ld bytes)...", filename, file_stat.st_size);set_content_type_from_file(req, filename);/* Retrieve the pointer to scratch buffer for temporary storage */char *chunk = ((struct file_server_data *)req->user_ctx)->scratch;size_t chunksize;do {/* Read file in chunks into the scratch buffer */chunksize = fread(chunk, 1, SCRATCH_BUFSIZE, fd);if (chunksize > 0) {/* Send the buffer contents as HTTP response chunk */if (httpd_resp_send_chunk(req, chunk, chunksize) != ESP_OK) {fclose(fd);ESP_LOGE(TAG, "File sending failed!");/* Abort sending file */httpd_resp_sendstr_chunk(req, NULL);/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to send file");return ESP_FAIL;}}/* Keep looping till the whole file is sent */} while (chunksize != 0);/* Close file after sending complete */fclose(fd);ESP_LOGI(TAG, "File sending complete");/* Respond with an empty chunk to signal HTTP response completion */httpd_resp_send_chunk(req, NULL, 0);return ESP_OK;
}/* Handler to upload a file onto the server */
static esp_err_t upload_post_handler(httpd_req_t *req)
{char filepath[FILE_PATH_MAX];FILE *fd = NULL;struct stat file_stat;/* Skip leading "/upload" from URI to get filename *//* Note sizeof() counts NULL termination hence the -1 */const char *filename = get_path_from_uri(filepath, ((struct file_server_data *)req->user_ctx)->base_path,req->uri + sizeof("/upload") - 1, sizeof(filepath));if (!filename) {/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Filename too long");return ESP_FAIL;}/* Filename cannot have a trailing '/' */if (filename[strlen(filename) - 1] == '/') {ESP_LOGE(TAG, "Invalid filename : %s", filename);httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Invalid filename");return ESP_FAIL;}if (stat(filepath, &file_stat) == 0) {ESP_LOGE(TAG, "File already exists : %s", filepath);/* Respond with 400 Bad Request */httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "File already exists");return ESP_FAIL;}/* File cannot be larger than a limit */if (req->content_len > MAX_FILE_SIZE) {ESP_LOGE(TAG, "File too large : %d bytes", req->content_len);/* Respond with 400 Bad Request */httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST,"File size must be less than "MAX_FILE_SIZE_STR "!");/* Return failure to close underlying connection else the* incoming file content will keep the socket busy */return ESP_FAIL;}fd = fopen(filepath, "w");if (!fd) {ESP_LOGE(TAG, "Failed to create file : %s", filepath);/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to create file");return ESP_FAIL;}ESP_LOGI(TAG, "Receiving file : %s...", filename);/* Retrieve the pointer to scratch buffer for temporary storage */char *buf = ((struct file_server_data *)req->user_ctx)->scratch;int received;/* Content length of the request gives* the size of the file being uploaded */int remaining = req->content_len;while (remaining > 0) {ESP_LOGI(TAG, "Remaining size : %d", remaining);/* Receive the file part by part into a buffer */if ((received = httpd_req_recv(req, buf, MIN(remaining, SCRATCH_BUFSIZE))) <= 0) {if (received == HTTPD_SOCK_ERR_TIMEOUT) {/* Retry if timeout occurred */continue;}/* In case of unrecoverable error,* close and delete the unfinished file*/fclose(fd);unlink(filepath);ESP_LOGE(TAG, "File reception failed!");/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to receive file");return ESP_FAIL;}/* Write buffer content to file on storage */if (received && (received != fwrite(buf, 1, received, fd))) {/* Couldn't write everything to file!* Storage may be full? */fclose(fd);unlink(filepath);ESP_LOGE(TAG, "File write failed!");/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to write file to storage");return ESP_FAIL;}/* Keep track of remaining size of* the file left to be uploaded */remaining -= received;}/* Close file upon upload completion */fclose(fd);ESP_LOGI(TAG, "File reception complete");/* Redirect onto root to see the updated file list */httpd_resp_set_status(req, "303 See Other");httpd_resp_set_hdr(req, "Location", "/");httpd_resp_sendstr(req, "File uploaded successfully");return ESP_OK;
}static esp_err_t send_wifi_handler(httpd_req_t *req)
{int total_len = req->content_len;int cur_len = 0;char *buf = ((struct file_server_data *)(req->user_ctx))->scratch;int received = 0;if (total_len >= SCRATCH_BUFSIZE) {/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "content too long");return ESP_FAIL;}while (cur_len < total_len) {received = httpd_req_recv(req, buf + cur_len, total_len);if (received <= 0) {/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to post control value");return ESP_FAIL;}cur_len += received;}buf[total_len] = '\0';printf("recived data length is :%d\n",total_len);for (int i = 0; i <total_len ; i++){putchar(buf[i]);}printf("\r\nwifi data recived!\r\n");cJSON *root = cJSON_Parse(buf);//读取wifi ssid pswchar *ssid = cJSON_GetObjectItem(root, "wifi_name")->valuestring;char *psw = cJSON_GetObjectItem(root, "wifi_code")->valuestring;int ssid_len = strlen(ssid);int psw_len = strlen(psw);set_system_data_wifi_info(ssid,ssid_len,psw ,psw_len);print_system_data_wifi_info();cJSON_Delete(root);httpd_resp_sendstr(req, "Post control value successfully");return ESP_OK;
}
/* Function to start the file server *//* Function to start the file server */
esp_err_t start_file_server(const char *base_path)
{static struct file_server_data *server_data = NULL;/* Validate file storage base path */if (!base_path || strcmp(base_path, "/spiffs") != 0) {ESP_LOGE(TAG, "File server presently supports only '/spiffs' as base path");return ESP_ERR_INVALID_ARG;}if (server_data) {ESP_LOGE(TAG, "File server already started");return ESP_ERR_INVALID_STATE;}/* Allocate memory for server data */server_data = calloc(1, sizeof(struct file_server_data));if (!server_data) {ESP_LOGE(TAG, "Failed to allocate memory for server data");return ESP_ERR_NO_MEM;}strlcpy(server_data->base_path, base_path,sizeof(server_data->base_path));httpd_handle_t server = NULL;httpd_config_t config = HTTPD_DEFAULT_CONFIG();/* Use the URI wildcard matching function in order to* allow the same handler to respond to multiple different* target URIs which match the wildcard scheme */config.uri_match_fn = httpd_uri_match_wildcard;ESP_LOGI(TAG, "Starting HTTP Server");if (httpd_start(&server, &config) != ESP_OK) {ESP_LOGE(TAG, "Failed to start file server!");return ESP_FAIL;}//收到根页面访问httpd_uri_t file_download = {.uri = "/*", // Match all URIs of type /path/to/file.method = HTTP_GET,.handler = download_get_handler,.user_ctx = server_data // Pass server data as context};httpd_register_uri_handler(server, &file_download);/* URI handler for uploading files to server */httpd_uri_t file_upload = {.uri = "/upload/*", // Match all URIs of type /upload/path/to/file.method = HTTP_POST,.handler = upload_post_handler,.user_ctx = server_data // Pass server data as context};httpd_register_uri_handler(server, &file_upload);//收到wifi参数设置httpd_uri_t wifi_data = {.uri = "/wifi_data", // Match all URIs of type /delete/path/to/file.method = HTTP_POST,.handler = send_wifi_handler,.user_ctx = server_data // Pass server data as context};httpd_register_uri_handler(server, &wifi_data);return ESP_OK;
}void ds_http_server_init(){/* Initialize file storage */ESP_ERROR_CHECK(init_spiffs());/* Start the file server */ESP_ERROR_CHECK(start_file_server("/spiffs"));
}
连接热点后，用浏览器访问esp32的网址esp32默认是192.168.4.1