Esp8266进阶之路32【高级篇】当esp8266遇到Html，该怎么内置网页控制设备，理清内置网页的实现过程，实现无需路由器手机也可以控制esp8266。（附带固件）

• 本系列博客学习由非官方人员 半颗心脏 潜心所力所写&＃xff0c;仅仅做个人技术交流分享&＃xff0c;不做任何商业用途。如有不对之处&＃xff0c;请留言&＃xff0c;本人及时更改。

1、 Esp8266之 搭建开发环境&＃xff0c;开始一个“hellow world”串口打印。
2、 Esp8266之 利用GPIO开始使用按钮点亮你的“第一盏灯”。
3、 Esp8266之 利用 "软件定时器 " 定时0.5秒闪烁点亮一盏LED。
4 、Esp8266之 了解PWM&＃xff0c;更为深入地用PWM控制一盏LED的亮度变化。
5 、Esp8266之 原生乐鑫SDK高级使用之封装Post与Get请求云端&＃xff0c;拿到“天气预报信息”。
6 、Esp8266之 了解 SmartConfig与Airkiss一键配网&＃xff0c;给8266配网上云端。无需把wifi名字密码写在固件里。
7 、Esp8266之 了解 softAP热点配网模式原理&＃xff0c;仿“机智云”定义自己的热点配网模式协议。
8、 Esp8266之 你要找的8266作为UDP、TCP客户端或服务端的角色通讯&＃xff0c;都在这了。
9、 Esp8266进阶之路第1篇&＃xff1a; [小实战上篇]Windows系统搭建8266的本地Mqtt服务器&＃xff0c;局域网点亮一盏LED灯。
10、 Esp8266进阶之路第2篇&＃xff1a; [小实战下篇]Windows系统搭建8266的本地Mqtt服务器&＃xff0c;局域网点亮一盏LED灯。
11、 Esp8266进阶之路第3篇&＃xff1a; 8266接入阿里智能&＃xff0c;点亮一盏LED灯&＃xff0c;期待天猫精灵语音控制的不约而至&＃xff01;
12、 Esp8266进阶之路第4篇&＃xff1a; 图文并茂学习阿里云主机搭建8266MQTT服务器&＃xff0c;实现移动网络远程控制一盏LED。
13、 Esp8266进阶之路第5篇&＃xff1a; 动手做个8266毕设小案例&＃xff0c;smartConfig &＃43; MQTT协议轻松实现远程控制一盏LED。
14、 Esp8266进阶之路第6篇&＃xff1a; esp8266的 FreeRtos系统学习的正确姿势 ------ 环境搭建、烧录。
15、 Esp8266进阶之路第7篇&＃xff1a; esp8266的 物联网又一股清流&＃xff0c;8266接入阿里云平台非阿里智能的SDS服务&＃xff0c;点亮一盏LED灯。
16、 Esp8266进阶之路第8篇&＃xff1a; esp8266的 基于Nonos移植红外线H1838&＃xff0c;实现红外遥控器配网&＃xff0c;远程控制一盏灯。
17、 Esp8266进阶之路第9篇&＃xff1a; esp8266自研的快速上电开关五次 (开-关为一次) &＃xff0c;无需按键触发则8266进去一键配网模式。
18、 Esp8266进阶之路第10篇&＃xff1a; esp8266 基于NONOS 实现 OTA 远程升级&＃xff0c;实现无线“ 热修复 ”升级固件程序。
19、 Esp8266进阶之路第11篇&＃xff1a; esp8266驱动 ds18b20、dht11 温湿度传感器&＃xff0c;采集温湿度传感器到服务器。
20、 Esp8266进阶之路第12篇&＃xff1a; 深入学习esp8266的esp now模式&＃xff0c;仿机智云做一个小网关&＃xff0c;实现无需网络下轻松彼此连接通讯交互数据。
21、 Esp8266进阶之路第13篇&＃xff1a; 浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。
22、 Esp8266进阶之路第14篇&＃xff1a; esp8266的工程如何添加第三方静态库文件以及如何自定义文件夹&＃xff0c;聊聊那些makeFile的事。。
23、 Esp8266进阶之路第15篇&＃xff1a; 再来一波 esp8266 基于 freeRtos系统连接自己私有的服务器实现OTA远程升级&＃xff0c;接触下 lwip的基本知识。。
24、 Esp8266进阶之路第16篇&＃xff1a; 渗透学习回顾下esp8266的外置spi芯片25q系列&＃xff0c;熟悉8266代码块在其的分布&＃xff0c;得心应手放置图片或其他资料。
25、 Esp8266进阶之路第17篇&＃xff1a; 深聊下esp8266的串口 Uart 通讯中断编程&＃xff0c;为您准备好了 NONOS 版本 和 RTOS 系统的串口驱动文件。
26、 Esp8266进阶之路第18篇&＃xff1a; RTOS分析 MQTT 实现过程&＃xff0c;实现移植 MQTT协议在 esp8266 rtos实时系统&＃xff0c;可断线重连。
27、 Esp8266进阶之路第19篇&＃xff1a; 跟紧脚步&＃xff0c;用VisualStudio Code开发 esp8266 rtos SDK v3.0版本&＃xff0c;全新的 idf 框架&＃xff0c;节省内存模块化开发。
28、 Esp8266进阶之路第20篇&＃xff1a; 教你轻松自如使用cJson在乐鑫 esp8266 如何解析一段json数据以及如何生成一段json数据。
29、 Esp8266进阶之路第21篇&＃xff1a; 百万条消息免费之乐鑫esp8266使用TCP直连模式MQTT协议接入阿里云物联网平台&＃xff0c;支持私家服务器对接支持阿里云规则引擎。
30、 Esp8266进阶之路第22篇&＃xff1a; 乐鑫esp8266 SDK编程使用 IIC总线驱动 0.96寸的OLED显示屏&＃xff0c;显示天气预报信息。
31、 Esp8266进阶之路第23篇&＃xff1a; 当esp8266遇到 Html&＃xff0c;该怎么内置网页控制设备&＃xff0c;理清内置网页的实现过程&＃xff0c;实现无需路由器手机也可以控制esp8266。
32、 Esp8266进阶之路第24篇&＃xff1a; 细聊HmacMD5的加密方法带来的安全性&＃xff0c;并实践在esp8266上&＃xff0c;最大保障传输的过程的信息的安全性。
33、 Esp8266进阶之路第25篇&＃xff1a; 如何优雅地像乐鑫原厂封装esp8266底层寄存器的逻辑思维&＃xff0c;做成自己的静态库库文件&＃xff0c;让第三方人使用&＃xff1f;
34、 Esp8266进阶之路第26篇&＃xff1a; 乐鑫esp8266 NONOS SDK 3.0编程使用 SPI 驱动基于Max7219芯片的八位数码管&＃xff0c;显示日期信息。
35、 Esp8266进阶之路第27篇&＃xff1a; 乐鑫esp8266芯片借助机智云平台做一个商业化的七彩RGB灯泡可调整体方案项目&＃xff0c;炫彩夺目高大尚。
36、 Esp8266学习rtos3.0笔记第1篇&＃xff1a; 认识esp8266 Rtos 3.0 sdk 工程结构&＃xff0c;esp8266如何向esp-idf工程靠近的&＃xff0c;如何自定义头文件编译&＃xff1f;
37、 Esp8266学习rtos3.0笔记第2篇&＃xff1a; 你要找的基本外设功能都在这里了&＃xff0c;包括Gpio、Pwm 和 Uart 接口使用。
38、 Esp8266学习rtos3.0笔记第3篇&＃xff1a; 一篇文章带你搞掂存储技术 NVS 的认识和使用&＃xff0c;如何利用NVS保存整型、字符串、数组以及结构体。
39、 Esp8266学习rtos3.0笔记第4篇&＃xff1a; 带你捋一捋市面上的微信公众号配网智能设备 esp8266 并绑定设备的过程&＃xff0c;移植并成功实现在 esp8266 rtos3.1 sdk。
40、 Esp8266学习rtos3.0笔记第5篇&＃xff1a; 基于乐鑫idf框架&＃xff0c;研究出超稳定、掉线重连、解决内存泄露问题的Mqtt框架&＃xff01;支持esp8266和esp32&＃xff01;
41、 Esp8266学习rtos3.0笔记第6篇&＃xff1a; esp8266-12模块基于rtos3.1版本ota功能远程空中升级固件&＃xff0c;官网基础之上增加dns域名解析&＃xff01;

一、前言&＃xff1b;

• 这个月也快结束了&＃xff0c;时间真快&＃xff0c;我服务器知识自学依然在路途中&＃xff0c;这几天听到热点网页配置esp8266连接路由器&＃xff0c;那么我想这个不是很复杂&＃xff0c;不过需要一些通讯协议的基础&＃xff0c;以及对esp8266的SDK开发的熟悉&＃xff0c;这几天撸了几下也就轻松弄出来了&＃xff01;不过我今天给大家带来的是实现的原理&＃xff0c;我是用作于gpio口控制&＃xff0c;也就是一盏灯的点亮点灭&＃xff01;当然了&＃xff0c;你可以沿着我思路去做网页内置配网哦&＃xff01;

二、整体思路&＃xff1b;

• 必须要知道的知识&＃xff1a;

• ①&＃xff1a;以手机浏览器为例&＃xff0c;其访问指定的ip地址&＃xff0c;过程是怎么样的&＃xff1f;

     我们都在用手机浏览器&＃xff0c;很少知道他是怎么实现访问交互数据的。这里我们把esp8266作为服务器端&＃xff0c;手机浏览器作为客户端&＃xff0c;一般地&＃xff0c;都是get请求&＃xff0c;除非指定post提交&＃xff0c;而请求的数据格式&＃xff0c;大家可以去百度下http协议的数据格式&＃xff0c;这里不再累赘&＃xff01;而请求之后&＃xff0c;esp8266那肯定是要以http协议数据来回复内容的&＃xff0c;这内容也就包含了gpio的管脚状态&＃xff01;从而实现了数据交互&＃xff01;

• ②&＃xff1a;编写好的html对应烧录的地址&＃xff0c;应该怎么注意什么&＃xff1f;

      这里我就不再多说html的文件怎么编写&＃xff0c;这需要一定的前端知识。对应的烧录地址必须在代码块外的地址烧录&＃xff0c;大家不懂哪些是代码块外的地址&＃xff0c;可以去看看我上个月写的25q16存储芯片的分布&＃xff0c;点我查看&＃xff01;&＃xff0c;之后我们需要在代码中读取这个网页&＃xff0c;之后发送给客户端就可以了&＃xff01;

三、编写一个简单的Html文件&＃xff1b;

• 非常簡單&＃xff0c;我这里直接上代码&＃xff1a;
  • 用的是post提交&＃xff0c;不是get请求&＃xff01;
  • 当点击开灯&＃xff0c;发送powerOn&＃61;1&＃xff0c;点击关灯发送powerOn&＃61;0&＃xff01;
  • 注意编码是utf-8!

esp8266热点内置网页单开关灯By半颗心脏

%s

用电脑浏览器打开预览如下&＃xff1a;

四、esp8266编程&＃xff1b;

看标题大家都知道&＃xff0c;这个设备esp8266是作为一个热点让客户端去主动连接&＃xff0c;那么esp8266必须要开启热点模式&＃xff0c;我这里让它固定一个ip地址192.168.5.1&＃xff0c;当然了&＃xff0c;你也可以不设置固定地址&＃xff0c;因为默认就是192.168.4.1&＃xff01;开启热点之后&＃xff0c;等待客户端连接&＃xff0c;如果客户端有成功连接后&＃xff0c;开启tcp服务器&＃xff08;其实就是web服务器第一步&＃xff09;&＃xff0c;这时候就是一直处于和客户端连接交互数据的状态了&＃xff01;

4.1 配置热点模式&＃xff0c;开启软路由&＃xff01;

下面代码中的webEsp8266是设备发出的热点名字&＃xff0c;xh12345678是密码&＃xff0c;192, 168, 5, 1是固定自定义的ip地址&＃xff0c;允许最大四个的客户端连接&＃xff0c;而且分配的ip是从192, 168, 5, 100到192, 168, 5, 105;

wifi_set_opmode(SOFTAP_MODE);struct softap_config *config &＃61; (struct softap_config *) zalloc(sizeof(struct softap_config)); // 初始化wifi_softap_get_config(config);sprintf(config->ssid, "webEsp8266");sprintf(config->password, "xh12345678");config->authmode &＃61; AUTH_WPA_WPA2_PSK;config->ssid_len &＃61; 0;config->max_connection &＃61; 4;wifi_softap_set_config(config); // Set ESP8266 soft-AP configfree(config);struct station_info * station &＃61; wifi_softap_get_station_info();while (station) {printf("bssid : MACSTR, ip : IPSTR/n", MAC2STR(station->bssid),IP2STR(&station->ip));station &＃61; STAILQ_NEXT(station, next);}wifi_softap_free_station_info(); // Free it by calling functionsswifi_softap_dhcps_stop(); // disable soft-AP DHCP server//配置dhcp&＃xff0c;固定esp8266的ip为 192, 168, 5, 1struct ip_info info;IP4_ADDR(&info.ip, 192, 168, 5, 1);IP4_ADDR(&info.gw, 192, 168, 5, 1);IP4_ADDR(&info.netmask, 255, 255, 255, 0);wifi_set_ip_info(SOFTAP_IF, &info);struct dhcps_lease dhcp_lease;IP4_ADDR(&dhcp_lease.start_ip, 192, 168, 5, 100); //分配的网段ip开始IP4_ADDR(&dhcp_lease.end_ip, 192, 168, 5, 105); //分配的网段ip结束wifi_softap_set_dhcps_lease(&dhcp_lease);wifi_softap_dhcps_start(); // 使能 soft-AP DHCP 服务


4.2 创建tcp服务器&＃xff01;

代码比较复杂&＃xff0c;总的来说&＃xff0c;先初始化socket&＃xff0c;之后bind绑定端口号&＃xff0c;大家都知道浏览器的默认访问的端口是80&＃xff0c;那么这里也肯定是80&＃xff0c;然后监听这个端口&＃xff0c;阻塞等待消息&＃xff01;

int32 listenfd;int32 ret &＃61; 0;char input[1024] &＃61; { 0 };char output[1024] &＃61; { 0 };struct sockaddr_in server_addr, remote_addr;int stack_counter &＃61; 0;memset(&server_addr, 0, sizeof(server_addr));server_addr.sin_family &＃61; AF_INET;server_addr.sin_addr.s_addr &＃61; INADDR_ANY;server_addr.sin_len &＃61; sizeof(server_addr);server_addr.sin_port &＃61; htons(80);printf("[XHLogUtils] Task_local_server init succeed!!! \n");/* Create socket for incoming connections */do {listenfd &＃61; socket(AF_INET, SOCK_STREAM, 0);printf("[XHLogUtils] Create socket for incoming connections !!! \n");if (listenfd &＃61;&＃61; -1) {printf("[XHLogUtils] Create socket for incoming connections -1 !!! \n");vTaskDelay(1000 / portTICK_RATE_MS);}} while (listenfd &＃61;&＃61; -1);/* Bind to the local port */do {ret &＃61; bind(listenfd, (struct sockaddr * )&server_addr,sizeof(server_addr));printf("[XHLogUtils] Create socket binding !!! \n");if (ret !&＃61; 0) {printf("Create socket binding &＃61; -1 \n");vTaskDelay(1000 / portTICK_RATE_MS);}} while (ret !&＃61; 0);do {// Listen to the local connectionret &＃61; listen(listenfd, 4);printf("[XHLogUtils] Create socket listening !!! \n");if (ret !&＃61; 0) {printf("[XHLogUtils] Create socket listening &＃61; -1 will close!!! \n");vTaskDelay(1000 / portTICK_RATE_MS);}} while (ret !&＃61; 0);int32 client_sock;int32 len &＃61; sizeof(struct sockaddr_in);for (;;) {printf("[XHLogUtils] Task_local_server block here waiting remote connect request !!! \n");/*block here waiting remote connect request*/if ((client_sock &＃61; accept(listenfd, (struct sockaddr * )&remote_addr,(socklen_t * )&len)) <0) {printf("[XHLogUtils] acceptting <0...\n");continue;} else {printf("[XHLogUtils] acceptting > 0...\n");}}

4.3 对来自客户端数据的处理以及回复&＃xff01;

前面已经说了&＃xff0c;我们点击开关灯时候&＃xff0c;是post提交数据&＃xff0c;所以我们是先判断否为post提交&＃xff0c;然后对里面的数据进一步剖析&＃xff0c;我们看看客户端发来了什么内容&＃xff1f;对比下面可以看到&＃xff0c;在body里面数据不一样&＃xff0c;开灯时候是powerOn&＃61;1&＃xff0c;而关灯是powerOn&＃61;0&＃xff01;那么我们就从body里面数据剖析就可以啦&＃xff1f;这岂不是很简单&＃xff1f;

• 开灯请求得到客户端数据&＃xff1a;

POST /setLight HTTP/1.1
Host: 192.168.5.1
Connection: keep-alive
Content-Length: 9
Cache-Control: max-age&＃61;0
Origin: http://192.168.5.1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; MI 8 Build/OPM1.171019.026) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.9 Mobile Safari/537.36
Accept: text/html,application/xhtml&＃43;xml,application/xml;q&＃61;0.9,image/webp,image/apng,image/sharpp,image/apng,image/tpg,*/*;q&＃61;0.8
Referer: http://192.168.5.1/setLight
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,en-US;q&＃61;0.8powerOn&＃61;1


• 关灯请求得到客户端数据&＃xff1a;

POST /setLight HTTP/1.1
Host: 192.168.5.1
Connection: keep-alive
Content-Length: 9
Cache-Control: max-age&＃61;0
Origin: http://192.168.5.1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; MI 8 Build/OPM1.171019.026) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.9 Mobile Safari/537.36
Accept: text/html,application/xhtml&＃43;xml,application/xml;q&＃61;0.9,image/webp,image/apng,image/sharpp,image/apng,image/tpg,*/*;q&＃61;0.8
Referer: http://192.168.5.1/setLight
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,en-US;q&＃61;0.8powerOn&＃61;0


• 对body里面数据剖析&＃xff0c;进一步得到指定的动作执行gpio&＃xff01;&＃xff01;并回复给客户端&＃xff0c;注意之后主动要断开tcp连接&＃xff01;

//确定是post请求if (input[0] &＃61;&＃61; &＃39;P&＃39; && input[1] &＃61;&＃61; &＃39;O&＃39; && input[2] &＃61;&＃61; &＃39;S&＃39;&& input[3] &＃61;&＃61; &＃39;T&＃39;) {//显示client 端的网络地址char *pBody &＃61; NULL;//得到bodyget_http_body(input, &pBody);char attribute[] &＃61; { "" };//截取之后保存的位置&＃xff0c;源字符串&＃xff0c;要截取的字符串的长度strncpy(attribute, pBody, strlen(pBody) - 2);//获取value设置数值char *pValue &＃61; (char *) strstr(pBody, "&＃61;");pValue &＃43;&＃61; 1;if (strcmp(pValue, "0") &＃61;&＃61; 0) {GPIO_OUTPUT_SET(GPIO_ID_PIN(12), 1);} else {GPIO_OUTPUT_SET(GPIO_ID_PIN(12), 0);}}char *pStatus;if (GPIO_INPUT_GET(12) &＃61;&＃61; 0x00) {pStatus &＃61; "智能灯的当前状态:开";} else {pStatus &＃61; "智能灯的当前状态:关";}char tempHttpHead[1024], tempHttpBody[1024];sprintf(tempHttpHead, httpHead, strlen(tempSaveData));//协议头拼接到发送的变量sprintf(sendstr, tempHttpHead);//设置结束符tempSaveData[594] &＃61; 0;//协议body拼接到发送的变量sprintf(tempHttpBody, tempSaveData, pStatus);//拼接到发送全部消息strcat(sendstr, tempHttpBody);write(client_sock, sendstr, strlen(sendstr));

五、esp8266的flash读取网页的注意要点&＃xff1b;

• 在我之前说到的是先通过工具把html网页烧录到flash芯片&＃xff0c;我这里使用的是25q32&＃xff0c;可用的空间会比较大&＃xff0c;我这里就烧录到0x1F4000&＃xff0c;计算之后是哪个扇区呢&＃xff1f;大家可以算下&＃xff0c;0x1F4000换算十进制就是‭2048000‬&＃xff0c;一个扇区是4096 bytes&＃xff0c;而‭2048000 / 4096 &＃61; 500 ‬ &＃xff0c;也就是第 500 个扇区了&＃xff01;于是我们代码这样读取&＃xff1a;

//500*4096 相当于 0x1F4000 &＃xff0c;也就是 0x1F4 * 4096spi_flash_read(500 * 4096, (uint32 *) &tempSaveData, sizeof(tempSaveData));printf("get Html Content: %s \n", tempSaveData);

• 在拿到了网页信息之后&＃xff0c;要自己设置字符串内容的结束符&＃xff0c;这就需要我们的Html文件有多大&＃xff1f;注意&＃xff1a;我们要的是显示全部内容下的时候才拿到这个Html文件大小&＃xff0c;注意我们上面的是格式符%s&＃xff0c;取出来的当然会小很多&＃xff01;

//设置结束符tempSaveData[594] &＃61; 0;


六、其他注意要点&＃xff1b;

• 上面注意这个文件大小&＃xff0c;再来设置结束符&＃xff01;如果设置不对&＃xff0c;设置过多或过少&＃xff0c;会影响显示效果哦&＃xff01;切记切记&＃xff01;
• 下面是烧录固件和Html文件的烧录截图&＃xff01;

• 下面是客户端手机浏览器截图&＃xff01;

• 后记&＃xff1a;在群里的小伙伴提到&＃xff0c;博文提到的第500个扇区是非安全区域存储地址&＃xff0c;对于4M flash安全的起始扇区是 508 即 0x1FC&＃xff0c;计算方法就是2M以外的部分&＃xff0c;也就是&＃xff08;1024&＃43;1024&＃43;4&＃xff09;/4096&＃61;508 &＃xff0c;其中 4 是指reserved 部分&＃xff0c;详情自己阅读官方的代码块分布&＃xff01;*所以&＃xff0c;大家的项目中请到此外的区域读写&＃xff0c;当然了&＃xff0c;本硬件博文只是示范&＃xff0c;大家修改下即可&＃xff01;

• 固件下载&＃xff0c;非源码&＃xff1a;https://download.csdn.net/download/xh870189248/10753770
• 下载源码&＃xff0c;付费的哦&＃xff01;不喜勿喷勿点击&＃xff1a; http://www.demodashi.com/demo/14321.html
• 玩转esp8266带你飞、加群付费QQ群&＃xff0c;不喜的朋友勿喷勿加&＃xff1a;434878850
• esp8266源代码学习汇总&＃xff08;持续更新&＃xff0c;欢迎star&＃xff09;&＃xff1a;https://github.com/xuhongv/StudyInEsp8266
• esp32源代码学习汇总&＃xff08;持续更新&＃xff0c;欢迎star&＃xff09;&＃xff1a;https://github.com/xuhongv/StudyInEsp32