【ESP32 C++教程】Unit8-2：Wifi热点和网页上控制设备
Web服务
Web服务通俗来讲就是的一种内容提供服务，内容包括网页、脚本、图片、文件、音视频等，可通过域名（如www.abc.com）或IP地址（如123.123.123.123）访问服务，主要通过浏览器来访问。
可在ESP32环境下提供Web服务的库有很多，如WebServer、WebAsyncServer等
从 https://gitee.com/billyzh/esp32-cpp-lesson 下载本教程的源码到本地硬盘文件夹，如d:\esp32-cpp-lesson
在VSCode中，选择【文件】->【打开文件夹...】选择上一步保存的文件夹打开
示例1：WiFi连接和Web服务
本示例启用WiFi热点，并对外提供Web服务。
打开项目后，选择config.h文件，修改第10行为
#define APP_LESSON82_A 1
应用配置同前一小节。
板级配置同前一小节。
开发板类同前一小节。
WiFi热点代码如下（unit8-lesson82a/my_application.cpp）：
static const IPAddress ap_ip(192, 168, 5, 1);
static const IPAddress ap_gateway(192, 168, 5, 1);
static const IPAddress ap_subnet(255, 255, 255, 0);
void MyApplication::OnInit()
{
WifiBoard *board = (WifiBoard *)(&Board::GetInstance());
Display *display = Board::GetInstance().GetDisplay();
display->Rotate(1);
char *ssid = "esp32_ap";
bool success = board->StartAP(ssid, ap_ip, ap_gateway, ap_subnet);
if (success)
{
Log::Info(TAG, "AP: %s, IP: %s", ssid, ap_ip.toString().c_str());
display->GetWindow()->SetText(1, "AP: esp32_ap, IP: " + board->GetIpAddress());
StartWebServer();
}
else
{
Log::Warn(TAG, "创建AP热点失败。");
display->GetWindow()->SetText(1, "创建AP热点失败。");
}
}在应用类的OnInit方法中，先获得Board的实例并转换为WifiBoard类型，然后调用StartAP方法启动热点，参数1是热点名称，参数2，3，4分别是IP地址，网关和子网掩码；
若热点创建成功，在TFT-LCD显示屏上显示IP地址，否则显示“热点创建失败”
Web服务启动代码如下（unit8-lesson82a/my_application.cpp）：
void MyApplication::StartWebServer()
{
webserver_ = new WebServer(80);
// GET /
webserver_->on("/", [this]()
{ webserver_->send(200, "text/html", "<h3>It's works</h3>"); });
webserver_->begin();
webtask_ = new FrtTask("WebServer");
webtask_->OnLoop([this]() {
webserver_->handleClient();
delay(1); });
webtask_->Start(8192, tskIDLE_PRIORITY + 1);
}程序解读
1.首先创建WebServer实例，使用80端口；
2.设置路径"/"的响应程序，这里简单的输出状态码200，内容It's works；
3.调用实例webserver_的begin方法启动Web服务；
4.创建一个任务并使用handleClient方法监听Web请求，这是必须的，否则将无法响应。
WebServer是ESP32板开发包内置的HTTP服务端库，用于提供HTTP服务，可直接引用使用。
编译项目并上传开发板检验
使用手机（或电脑）连接热点"esp32_ap"，打开浏览器访问 http://192.168.5.1/，可看到网页上显示It's works
示例2：网页上控制设备
本示例启用WiFi热点，并通过一个网页上的下拉框来控制内置LED的开关。
打开项目后，选择config.h文件，修改第10行为
#define APP_LESSON82_B 1
应用配置同前一小节。
板级配置同前一小节。
开发板类同前一小节。
WiFi热点代码如下（unit8-lesson82b/my_application.cpp）：
void MyApplication::OnInit()
{
WifiBoard *board = (WifiBoard *)(&Board::GetInstance());
Display *display = Board::GetInstance().GetDisplay();
display->Rotate(1);
//一、使用热点
char *ssid = "esp32_ap";
bool success = board->StartAP(ssid, ap_ip, ap_gateway, ap_subnet);
std::string message = "AP:" + std::string(ssid) + ", IP:" + std::string(ap_ip.toString().c_str());
//二、连接已有WiFi网络
// bool success = board->StartNetwork("ssid", "password", 10000);
// std::string message = "IP:" + board->GetIpAddress();
if (success) {
Log::Info(TAG, message.c_str());
display->GetWindow()->SetText(1, message);
StartWebServer();
} else {
Log::Warn(TAG, "连接失败。");
display->GetWindow()->SetText(1, "连接失败。");
}
}在应用类的OnInit方法中，先获得Board的实例并转换为WifiBoard类型，然后调用StartAP方法启动热点或调用StartNetwork连接已有热点；
若热点创建或网络连接成功，在TFT-LCD显示屏上显示IP地址，否则显示“连接失败”
Web服务启动代码如下（unit8-lesson82b/my_application.cpp）：
void MyApplication::StartWebServer()
{
webserver_ = new WebServer(80);
// GET /
webserver_->on("/", [this](){
int state = 0;
if (webserver_->hasArg("state")) {
state = webserver_->arg("state").toInt();
}
Led* led = Board::GetInstance().GetLed();
if (state==1) {
led->TurnOn();
} else {
led->TurnOff();
}
webserver_->send(200, "text/html", index_html); // in html_content.h
});
webserver_->begin();
webtask_ = new FrtTask("WebServer");
webtask_->OnLoop([this]() {
webserver_->handleClient();
delay(1); });
webtask_->Start(8192, tskIDLE_PRIORITY + 1);
}程序解读
1.首先创建WebServer实例，使用80端口；
2.设置路径"/"的响应程序，程序先检查state参数，为1则点亮LED，未设置等同于0，然后输出index_html变量的内容，index_html变量在html_content.h中定义；
3.调用实例webserver_的begin方法启动Web服务；
4.创建一个任务并使用handleClient方法监听Web请求，这是必须的，否则将无法响应。
网页表单与表单提交
index_html变量的内容就是HTML（网页专用标记语言），主要内容如下：
<div class='container'>
LED灯
<form id="form" action="/">
<select id="state" name="state" onchange="this.form.submit();">
<option value="0">关</option>
<option value="1">开</option>
</select>
</form>
</div>form元素用来定义表单，表单是专用于与服务端交互的标签，可以包括选选框、输入框、按钮等，本例用select标签定义了一个选项框，包含"关"，"开"两个选项，当选项框有改变时，自动提交表单。
表单提交后，服务端（ESP32端）响应请求根据state的值打开或关闭LED。
编译项目并上传开发板检验
使用手机（或电脑）连接热点"esp32_ap"，打开浏览器访问 http://192.168.5.1/，可看到网页上显示了表单。
改变选项框的值来控制LED的开和关。
关于HTML和Javascript的知识，请参阅相关文档。
- 如需转载，请联系作者；如有侵权，请联系本站处理。
微信分享
评论涨知识
寄存器
寄存器的功能是存储二进制代码，它是由具有存储功能的触发器组合起来构成的。一个触发器可以存储1位二进制代码，故存放n位二进制代码的寄存器，需用n个触发器来构成。
评论:
【ESP32 C++教程】Unit8-1：WiFi连接和HTTP请求
本节主要讲解WifiBoard类的功能和HTTPClient库及cJSON的使用。
【ESP32 C++教程】Unit7-3：TFT-LCD显示屏
本节主要讲解TFT-LCD显示屏的使用和Window派生类与TFT_eSPI库的使用。
基于STEAM教育和设计思维的初中化学跨学科实践活动——基于血氧指标控制的简易供氧器设计与制作
这篇文章展示了如何将化学与工程、信息技术、现代制造技术紧密结合，以“血氧指标控制的简易供氧器”为载体，组织一次真实的跨学科项目。设计中突出“从需求出发”“闭环控制”“可视化反馈”，不仅呼应了新课标中“跨学科实践”的要求，更贴近生活实际需求，尤其适用于对科技应用、健康关怀有兴趣的学生群体，可作为项目式学习或社团活动的优质课例。
【ESP32 C++教程】Unit7-2：OLED显示屏
本节主要讲解OLED显示屏的使用和Display类及派生类的介绍及使用。
【ESP32 C++教程】Unit7-1：四位7段式数码管
本节主要讲解用TM1650来驱动四位7段式数码管模块的显示使用。
【ESP32 C++教程】Unit6-4：资源互斥访问
本节主要讲解FreeRTOS任务间如何使用互斥对象来实现资源互斥访问。
ESP32 Guru Meditation Error报错定位分析
在ESP32的开发，经常会有系统崩溃一直重启的情况，那么如何快速定位出现异常的代码呢？
【ESP32 C++教程】Unit6-3 FreeRTOS任务间通信
本节主要讲解FreeRTOS任务间如何使用消息队列、事件组和二进制信号量进行通信。
【ESP32 C++教程】Unit6-2 FreeRTOS多任务
本节主要讲解Task类，FreeRTOS多任务的使用。
【ESP32 C++教程】Unit6-1 定时器
本节主要讲解Timer类，FreeRTOS定时器的使用。
微信分享
