目标
通过esp32自建web服务器实现配网。具体来说：
1、esp32上电，手机/电脑/平板连上esp32的wifi。
2、用浏览器访问esp32的网址esp32默认是192.168.4.1
3、在web页面中输入需要esp32连接的wifi名称，和wifi密码
4、esp32自动连接上指定的wifi
需求分析
1、为什么要用自建web服务器的方式配网，而不使用esp32官方推荐的ble或者smartconfig 方式配网？
- 自建web服务器的优势非常明显，兼容性性强，只需要一台拥有浏览器且能连接wifi的智能终端设备即可完成配网。
- ble和smartconfig方式优势是有官方现成的例程，开发快捷。缺点也非常明显，需要在手机上安装app，如果用电脑，还无法实现配网。兼容性非常差。为了配网还要安装一个app，不方便。
2、mvp功能。拿到一个目标后，第一时间是找出，能够实现该目标的最小功能集合。只求功能，不求代码优美，界面优美，功能完美。基于此，可以将mvp功能梳理出来。
- 实现web界面post及get功能请求，此方式可以在eps32 station模式（通过example_connectl连上wifi）下实现，节省时间（避免电脑来回切换wifi，和esp32ap）。整体界面只需要两个标签，两个输入框，一个按钮组成
- ESP32实现wifi名称和密码解析，构想名称和密码发送格式采用网络传输常用的json格式，发送方法采用post方法
- 实现eps32 ap 和station模式切换，采用ap模式收到了wifi名称和密码后，将ap模式切换为station模式，中间采用延时实现，最为简单，后续可以用freertos信号量来触发模式切换。整体流程是，连上ap，输入wifi信息，此时esp32程序进入延时，延时时间到，切换到station模式
效果展示
1、界面展示
此次已经完成最小mvp的开发，实现了通过连接esp32 ap 输入wifi信息，实现配网的功能。
代码展示
注意：web界面需要用谷歌浏览器访问，手机上要用uc浏览器访问，华为手机自带浏览器和qq浏览器访问不了web界面，原因还未找出来，因为这个问题，折腾了好几个小时，还以为代码哪里有问题
1、界面代码
<!DOCTYPE html>
<table class="fixed" border="0">
<col width="1000px" /><col width="500px" />
<h3>wifi 密码配置</h3>
<div>
<label for="name">wifi名称</label>
<input type="text" id="wifi" name="car_name" placeholder="ssid">
<br>
<label for="type">密码</label>
<input type="text" id="code" name="car_type" placeholder="password">
<br>
<button id ="send_WIFI" type="button" onclick="send_wifi()">提交</button>
</div>
</table>
<script>
function setpath() {
var default_path = document.getElementById("newfile").files[0].name;
document.getElementById("filepath").value = default_path;
}
function send_wifi() {
var input_ssid = document.getElementById("wifi").value;
var input_code = document.getElementById("code").value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/wifi_data", true);
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
console.log(xhttp.responseText);
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
var data = {
"wifi_name":input_ssid,
"wifi_code":input_code
}
xhttp.send(JSON.stringify(data));
}
</script>
最后送json数据的时候，要用JSON.stringify方法格式化data，否则esp32解析json会报错，此处一定要注意！！！
整体html界面非常简单，没有基础的也很容易读懂，里面写了一个js函数，该函数是在点击按钮的时候触发，功能主要是读取文本框输入的数据，将数据封装为json格式，然后post发送数据，xhttp.open(“POST”, “/wifi_data”, true);中的url “/wifi_data”和esp32服务端中的定义要一致，否则是无法成功的。
web 服务端代码展示
基于esp32 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;
}
/* URI handler for getting uploaded files */
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);
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;
}
主要关注最后两个注册函数，
1、file_download函数，其中的句柄函数为download_get_handler，当用户访问根目录，就是192.，168.4.1的时候，服务端会调用download_get_handler函数，实现web页面的加载。
2、wifi_data 函数，当用户请求/wifi_data目录时（点击按钮，post会请求该目录），会调用send_wifi_handler函数，处理post请求以及发送过来的json数据
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;
}
// char *str_u = "abcdefg";
// for(int i = 0; i<sizeof(str_u);i++){
// putchar(str_u[i]);
// }
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);
// int ssid = cJSON_GetObjectItem(root, "wifi_name")->valueint;
// int code = cJSON_GetObjectItem(root, "wifi_code")->valueint;
char *ssid = cJSON_GetObjectItem(root, "wifi_name")->valuestring;
char *code = cJSON_GetObjectItem(root, "wifi_code")->valuestring;
int len1 = strlen(ssid);
int len2 = strlen(code);
memcpy(user_id,ssid,strlen(ssid));
memcpy(user_code,code,strlen(code));
user_id[len1] = '\0';
user_code[len2] = '\0';
cJSON_Delete(root);
// ESP_LOGI(TAG, "json load finished. SSID:%d password:%d ",ssid,code);
// ESP_LOGI(TAG, "json load finished. SSID:%s password:%s ",user_id,user_code);
printf("\r\nwifi_ssid:");
for(int i = 0;i<len1;i++){
printf("%c",user_id[i]);
}
printf("\r\nwifi_code:");
for(int i = 0;i<len2;i++){
printf("%c",user_code[i]);
}
printf("\r\n");
httpd_resp_sendstr(req, "Post control value successfully");
return ESP_OK;
}
/* Function to start the file server */
注意：
1、wifi名称和密码是字符串，故解析的时候要用使用valuestring的值，这个表示里面的数据用字符串格式解析，valueint表示数据用整形数据接收。
2、定义两个全局变量char ssid[32];char code[64];这个长度是esp32默认支持的长度，json解析到的名称和密码存储到这两个数组中，用到memcpy函数。
3、将数组中无效位的第一位写成’\0’,esp32判断字符串完成的标志就是’\0’
4、最后就是将解析出来的数据进行打印
主函数代码展示
void app_main(void)
{
ESP_ERROR_CHECK(nvs_flash_init());
ESP_ERROR_CHECK(esp_netif_init());
ESP_ERROR_CHECK(esp_event_loop_create_default());
/* This helper function configures Wi-Fi or Ethernet, as selected in menuconfig.
* Read "Establishing Wi-Fi or Ethernet Connection" section in
* examples/protocols/README.md for more information about this function.
*/
// ESP_ERROR_CHECK(example_connect());
wifi_init_softap();
/* Initialize file storage */
ESP_ERROR_CHECK(init_spiffs());
/* Start the file server */
ESP_ERROR_CHECK(start_file_server("/spiffs"));
vTaskDelay(60000 / portTICK_PERIOD_MS);
wifi_init_sta(user_id,user_code);
}
整个个工程是基于file_server修改，如果删除掉init_spiffs函数，编译会报错，暂时保留，后期优化代码的时候再处理
整个过程很简单，先开启ap模式，然后开启web服务，延时60s，切换为station模式，连上设定的wifi。如果60s内没有完成wifi信息的输入，程序也会切换到station模式，最后会联网不成功。
wifi_station代码展示
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "freertos/event_groups.h"
#include "esp_system.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "lwip/err.h"
#include "lwip/sys.h"
#include <stdlib.h>
#include "freertos/event_groups.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "esp_system.h"
#include "nvs_flash.h"
#include "esp_netif.h"
#include "lwip/err.h"
#include "lwip/sockets.h"
#include "lwip/sys.h"
#include "lwip/netdb.h"
#include "lwip/dns.h"
#include "esp_tls.h"
#include "esp_crt_bundle.h"
#include "esp_http_client.h"
/* The examples use WiFi configuration that you can set via project configuration menu
If you'd rather not, just change the below entries to strings with
the config you want - ie #define EXAMPLE_WIFI_SSID "mywifissid"
*/
#define EXAMPLE_ESP_WIFI_SSID "GAUSSIAN"
#define EXAMPLE_ESP_WIFI_PASS "gaussian705"
#define EXAMPLE_ESP_MAXIMUM_RETRY 5
/* FreeRTOS event group to signal when we are connected*/
static EventGroupHandle_t s_wifi_event_group;
/* The event group allows multiple bits for each event, but we only care about two events:
* - we are connected to the AP with an IP
* - we failed to connect after the maximum amount of retries */
#define WIFI_CONNECTED_BIT BIT0
#define WIFI_FAIL_BIT BIT1
static const char *TAG = "wifi station";
static int s_retry_num = 0;
static void event_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_START) {
esp_wifi_connect();
} else if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_DISCONNECTED) {
if (s_retry_num < EXAMPLE_ESP_MAXIMUM_RETRY) {
esp_wifi_connect();
s_retry_num++;
ESP_LOGI(TAG, "retry to connect to the AP");
} else {
xEventGroupSetBits(s_wifi_event_group, WIFI_FAIL_BIT);
}
ESP_LOGI(TAG,"connect to the AP fail");
} else if (event_base == IP_EVENT && event_id == IP_EVENT_STA_GOT_IP) {
ip_event_got_ip_t* event = (ip_event_got_ip_t*) event_data;
ESP_LOGI(TAG, "got ip:" IPSTR, IP2STR(&event->ip_info.ip));
s_retry_num = 0;
xEventGroupSetBits(s_wifi_event_group, WIFI_CONNECTED_BIT);
}
}
void wifi_init_sta(unsigned char *name,unsigned char *code)
{
s_wifi_event_group = xEventGroupCreate();
esp_netif_create_default_wifi_sta();
wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
ESP_ERROR_CHECK(esp_wifi_init(&cfg));
esp_event_handler_instance_t instance_any_id;
esp_event_handler_instance_t instance_got_ip;
ESP_ERROR_CHECK(esp_event_handler_instance_register(WIFI_EVENT,
ESP_EVENT_ANY_ID,
&event_handler,
NULL,
&instance_any_id));
ESP_ERROR_CHECK(esp_event_handler_instance_register(IP_EVENT,
IP_EVENT_STA_GOT_IP,
&event_handler,
NULL,
&instance_got_ip));
wifi_config_t wifi_config = {
.sta = {
// .ssid = "a",
// .password = "b",
/* Setting a password implies station will connect to all security modes including WEP/WPA.
* However these modes are deprecated and not advisable to be used. Incase your Access point
* doesn't support WPA2, these mode can be enabled by commenting below line */
.threshold.authmode = WIFI_AUTH_WPA2_PSK,
.pmf_cfg = {
.capable = true,
.required = false
},
},
};
memcpy(wifi_config.sta.ssid,name,32);
memcpy(wifi_config.sta.password,code,64);
ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA) );
ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config) );
ESP_ERROR_CHECK(esp_wifi_start() );
ESP_LOGI(TAG, "wifi_init_sta finished.");
/* Waiting until either the connection is established (WIFI_CONNECTED_BIT) or connection failed for the maximum
* number of re-tries (WIFI_FAIL_BIT). The bits are set by event_handler() (see above) */
EventBits_t bits = xEventGroupWaitBits(s_wifi_event_group,
WIFI_CONNECTED_BIT | WIFI_FAIL_BIT,
pdFALSE,
pdFALSE,
portMAX_DELAY);
/* xEventGroupWaitBits() returns the bits before the call returned, hence we can test which event actually
* happened. */
if (bits & WIFI_CONNECTED_BIT) {
ESP_LOGI(TAG, "connected to ap SSID:%s password:%s",
EXAMPLE_ESP_WIFI_SSID, EXAMPLE_ESP_WIFI_PASS);
} else if (bits & WIFI_FAIL_BIT) {
ESP_LOGI(TAG, "Failed to connect to SSID:%s, password:%s",
EXAMPLE_ESP_WIFI_SSID, EXAMPLE_ESP_WIFI_PASS);
} else {
ESP_LOGE(TAG, "UNEXPECTED Eprotocol_examples_common.h:ENT");
}
/* The event will not be processed after unregister */
ESP_ERROR_CHECK(esp_event_handler_instance_unregister(IP_EVENT, IP_EVENT_STA_GOT_IP, instance_got_ip));
ESP_ERROR_CHECK(esp_event_handler_instance_unregister(WIFI_EVENT, ESP_EVENT_ANY_ID, instance_any_id));
vEventGroupDelete(s_wifi_event_group);
}
其中
memcpy(wifi_config.sta.ssid,name,32);
memcpy(wifi_config.sta.password,code,64);将wifi名称和密码复制到wificonfig结构体。
wifi_ap代码展示
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_system.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "lwip/err.h"
#include "lwip/sys.h"
#include "wifi_ap.h"
// #define EXAMPLE_ESP_WIFI_SSID CONFIG_AP_ESP_WIFI_SSID
// #define EXAMPLE_ESP_WIFI_PASS CONFIG_AP_ESP_WIFI_PASSWORD
// #define EXAMPLE_ESP_WIFI_CHANNEL CONFIG_AP_ESP_WIFI_CHANNEL
// #define EXAMPLE_MAX_STA_CONN CONFIG_AP_ESP_MAX_STA_CONN
#define EXAMPLE_ESP_WIFI_SSID "ESP32"
#define EXAMPLE_ESP_WIFI_PASS "12345678"
#define EXAMPLE_ESP_WIFI_CHANNEL 1
#define EXAMPLE_MAX_STA_CONN 4
static const char *TAG = "wifi softAP";
static void wifi_event_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
if (event_id == WIFI_EVENT_AP_STACONNECTED) {
wifi_event_ap_staconnected_t* event = (wifi_event_ap_staconnected_t*) event_data;
ESP_LOGI(TAG, "station "MACSTR" join, AID=%d",
MAC2STR(event->mac), event->aid);
} else if (event_id == WIFI_EVENT_AP_STADISCONNECTED) {
wifi_event_ap_stadisconnected_t* event = (wifi_event_ap_stadisconnected_t*) event_data;
ESP_LOGI(TAG, "station "MACSTR" leave, AID=%d",
MAC2STR(event->mac), event->aid);
}
}
void wifi_init_softap(void)
{
// ESP_ERROR_CHECK(esp_netif_init());
// ESP_ERROR_CHECK(esp_event_loop_create_default());
esp_netif_create_default_wifi_ap();
wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
ESP_ERROR_CHECK(esp_wifi_init(&cfg));
ESP_ERROR_CHECK(esp_event_handler_instance_register(WIFI_EVENT,
ESP_EVENT_ANY_ID,
&wifi_event_handler,
NULL,
NULL));
wifi_config_t wifi_config = {
.ap = {
.ssid = EXAMPLE_ESP_WIFI_SSID,
.ssid_len = strlen(EXAMPLE_ESP_WIFI_SSID),
.channel = EXAMPLE_ESP_WIFI_CHANNEL,
.password = EXAMPLE_ESP_WIFI_PASS,
.max_connection = EXAMPLE_MAX_STA_CONN,
.authmode = WIFI_AUTH_WPA_WPA2_PSK
},
};
if (strlen(EXAMPLE_ESP_WIFI_PASS) == 0) {
wifi_config.ap.authmode = WIFI_AUTH_OPEN;
}
ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_AP));
ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_AP, &wifi_config));
ESP_ERROR_CHECK(esp_wifi_start());
ESP_LOGI(TAG, "wifi_init_softap finished. SSID:%s password:%s channel:%d",
EXAMPLE_ESP_WIFI_SSID, EXAMPLE_ESP_WIFI_PASS, EXAMPLE_ESP_WIFI_CHANNEL);
}
CMake注意事项
官方源码中，用户自己写的只有.c文件，没有.h文件，是因为行业惯例还是，编译器自动识别，不需要在.h文件中进行函数声明和变量声明？希望大佬能指点下
当包含了自己写.h文件后，编译时，还是报错，说函数未定义，折腾好好久，才发现，需要在CMakeList.txt文件中包含对应的.c文件
idf_component_register(SRCS "main.c" "file_server.c"
"wifi_ap.c" "wifi_station.c" INCLUDE_DIRS "."
EMBED_FILES "favicon.ico" "upload_script.html")
包含之后，编译就正常了。
最后，需要源码的同学，请在评论区留下你的邮箱。大家一起共同进步。
后期功能规划
1、优化web显示效果，提升浏览器的兼容性
2、用信号量触发station模式，解析出wifi名称和密码才进行station模式切换，否则一直等待
3、wifi名称密码记忆功能，将wifi名称密码存储到eps32自带的flash某个区域，首次配网成功后，下一次上电，自动读取存储的wifi信息，并联网，如果联网不成功，报出错误，同时切换到ap配网模式
4、代码优化，优化掉无用的代码，程序封装。以用于未来其他功能需要联网功能的开发
代码链接，采用vscode+platformIO
https://gitee.com/yvany/esp32projects/tree/master/esp32-wificonfig