代码地址如下：
http://www.demodashi.com/demo/14321.html

一、前言；

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

二、整体思路；

  • ①：以手机浏览器为例，其访问指定的ip地址，过程是怎么样的？

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

  • ②：编写好的html对应烧录的地址，应该怎么注意什么？

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

三、编写一个简单的Html文件；

  • 非常簡單，我这里直接上代码：

    • 用的是post提交，不是get请求！
    • 当点击开灯，发送powerOn=1，点击关灯发送powerOn=0！
    • 注意编码是utf-8!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8"></meta><title>esp8266内置网页单开关灯</title></head>
  5. 	<body>
  6. 		<h2 align="center">esp8266热点内置网页单开关灯By半颗心脏</h2>
  7. 		<h3 align="center">%s</h3>
  8. 		<form method="post"action="setLight">
  9. 			<table align="center"><tr><td>开灯:</td><td>
  10. 				<button name="powerOn"type="submit"value="1">点我开灯</button>
  11. 			</td></tr><tr><td>关灯:</td><td>
  12. 				<button name="powerOff"type="submit"value="0">点我关灯</button>
  13. 			</td></tr>
  14. 		   </table>
  15. 	</form>
  16. </body>
  17. </html>

用电脑浏览器打开预览如下：

四、esp8266编程；

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

4.1 配置热点模式，开启软路由！

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


  2. 	wifi_set_opmode(SOFTAP_MODE);
  3. 	struct softap_config *config = (struct softap_config *) zalloc(
  4. 			sizeof(struct softap_config)); // 初始化
  6. 	wifi_softap_get_config(config);
  7. 	sprintf(config->ssid, "webEsp8266");
  8. 	sprintf(config->password, "xh12345678");
  9. 	config->authmode = AUTH_WPA_WPA2_PSK;
  10. 	config->ssid_len = 0;
  11. 	config->max_connection = 4;
  12. 	wifi_softap_set_config(config); // Set ESP8266 soft-AP config
  13. 	free(config);
  15. 	struct station_info * station = wifi_softap_get_station_info();
  16. 	while (station) {
  17. 		printf("bssid : MACSTR, ip : IPSTR/n", MAC2STR(station->bssid),
  18. 				IP2STR(&station->ip));
  19. 		station = STAILQ_NEXT(station, next);
  20. 	}
  21. 	wifi_softap_free_station_info(); // Free it by calling functionss
  22. 	wifi_softap_dhcps_stop(); // disable soft-AP DHCP server
  24. 	//配置dhcp，固定esp8266的ip为 192, 168, 5, 1
  25. 	struct ip_info info;
  26. 	IP4_ADDR(&info.ip, 192, 168, 5, 1);
  27. 	IP4_ADDR(&info.gw, 192, 168, 5, 1);
  28. 	IP4_ADDR(&info.netmask, 255, 255, 255, 0);
  29. 	wifi_set_ip_info(SOFTAP_IF, &info);
  30. 	struct dhcps_lease dhcp_lease;
  31. 	IP4_ADDR(&dhcp_lease.start_ip, 192, 168, 5, 100); //分配的网段ip开始
  32. 	IP4_ADDR(&dhcp_lease.end_ip, 192, 168, 5, 105); //分配的网段ip结束
  33. 	wifi_softap_set_dhcps_lease(&dhcp_lease);
  34. 	wifi_softap_dhcps_start(); // 使能 soft-AP DHCP 服务

4.2 创建tcp服务器！

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

  1. 	int32 listenfd;
  2. 	int32 ret = 0;
  3. 	char input[1024] = { 0 };
  4. 	char output[1024] = { 0 };
  5. 	struct sockaddr_in server_addr, remote_addr;
  6. 	int stack_counter = 0;
  7. 	memset(&server_addr, 0, sizeof(server_addr));
  8. 	server_addr.sin_family = AF_INET;
  9. 	server_addr.sin_addr.s_addr = INADDR_ANY;
  10. 	server_addr.sin_len = sizeof(server_addr);
  11. 	server_addr.sin_port = htons(80);
  13. 	printf("[XHLogUtils] Task_local_server init succeed!!! \n");
  15. 	/* Create socket for incoming connections */
  16. 	do {
  17. 		listenfd = socket(AF_INET, SOCK_STREAM, 0);
  18. 		printf("[XHLogUtils] Create socket for incoming connections !!! \n");
  19. 		if (listenfd == -1) {
  20. 			printf(
  21. 					"[XHLogUtils] Create socket for incoming connections -1 !!! \n");
  22. 			vTaskDelay(1000 / portTICK_RATE_MS);
  23. 		}
  24. 	} while (listenfd == -1);
  26. 	/* Bind to the local port */
  27. 	do {
  28. 		ret = bind(listenfd, (struct sockaddr * )&server_addr,
  29. 				sizeof(server_addr));
  30. 		printf("[XHLogUtils] Create socket binding !!! \n");
  31. 		if (ret != 0) {
  32. 			printf("Create socket binding = -1 \n");
  33. 			vTaskDelay(1000 / portTICK_RATE_MS);
  34. 		}
  35. 	} while (ret != 0);
  37. 	do {
  38. 		// Listen to the local connection
  39. 		ret = listen(listenfd, 4);
  40. 		printf("[XHLogUtils] Create socket listening !!! \n");
  41. 		if (ret != 0) {
  42. 			printf(
  43. 					"[XHLogUtils] Create socket listening = -1 will close!!! \n");
  44. 			vTaskDelay(1000 / portTICK_RATE_MS);
  45. 		}
  46. 	} while (ret != 0);
  48. 	int32 client_sock;
  49. 	int32 len = sizeof(struct sockaddr_in);
  51. 	for (;;) {
  53. 		printf(
  54. 				"[XHLogUtils] Task_local_server block here waiting remote connect request !!! \n");
  56. 		/*block here waiting remote connect request*/
  57. 		if ((client_sock = accept(listenfd, (struct sockaddr * )&remote_addr,
  58. 				(socklen_t * )&len)) < 0) {
  59. 			printf("[XHLogUtils] acceptting < 0...\n");
  60. 			continue;
  61. 		} else {
  62. 			printf("[XHLogUtils] acceptting > 0...\n");
  63. 		}
  64. 	}

4.3 对来自客户端数据的处理以及回复！

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

  • 开灯请求得到客户端数据：
  1. POST /setLight HTTP/1.1
  2. Host: 192.168.5.1
  3. Connection: keep-alive
  4. Content-Length: 9
  5. Cache-Control: max-age=0
  6. Origin: http://192.168.5.1
  7. Content-Type: application/x-www-form-urlencoded
  8. 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
  9. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,image/sharpp,image/apng,image/tpg,*/*;q=0.8
  10. Referer: http://192.168.5.1/setLight
  11. Accept-Encoding: gzip, deflate
  12. Accept-Language: zh-CN,en-US;q=0.8
  14. powerOn=1
  • 关灯请求得到客户端数据：
  1. POST /setLight HTTP/1.1
  2. Host: 192.168.5.1
  3. Connection: keep-alive
  4. Content-Length: 9
  5. Cache-Control: max-age=0
  6. Origin: http://192.168.5.1
  7. Content-Type: application/x-www-form-urlencoded
  8. 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
  9. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,image/sharpp,image/apng,image/tpg,*/*;q=0.8
  10. Referer: http://192.168.5.1/setLight
  11. Accept-Encoding: gzip, deflate
  12. Accept-Language: zh-CN,en-US;q=0.8
  14. powerOn=0
  • 对body里面数据剖析，进一步得到指定的动作执行gpio！！并回复给客户端，注意之后主动要断开tcp连接！

  2. 			//确定是post请求
  3. 			if (input[0] == 'P' && input[1] == 'O' && input[2] == 'S'
  4. 					&& input[3] == 'T') {
  6. 				//显示client 端的网络地址
  7. 				char *pBody = NULL;
  8. 				//得到body
  9. 				get_http_body(input, &pBody);
  10. 				char attribute[] = { "" };
  11. 				//截取之后保存的位置，源字符串，要截取的字符串的长度
  12. 				strncpy(attribute, pBody, strlen(pBody) - 2);
  13. 				//获取value设置数值
  14. 				char *pValue = (char *) strstr(pBody, "=");
  15. 				pValue += 1;
  16. 				if (strcmp(pValue, "0") == 0) {
  17. 					GPIO_OUTPUT_SET(GPIO_ID_PIN(12), 1);
  18. 				} else {
  19. 					GPIO_OUTPUT_SET(GPIO_ID_PIN(12), 0);
  20. 				}
  22. 			}
  24. 			char *pStatus;
  25. 			if (GPIO_INPUT_GET(12) == 0x00) {
  26. 				pStatus = "智能灯的当前状态:开";
  27. 			} else {
  28. 				pStatus = "智能灯的当前状态:关";
  29. 			}
  31. 			char tempHttpHead[1024], tempHttpBody[1024];
  32. 			sprintf(tempHttpHead, httpHead, strlen(tempSaveData));
  33. 			//协议头拼接到发送的变量
  34. 			sprintf(sendstr, tempHttpHead);
  35. 		    //设置结束符
  36. 			tempSaveData[594] = 0;
  37. 			//协议body拼接到发送的变量
  38. 			sprintf(tempHttpBody, tempSaveData, pStatus);
  39. 			//拼接到发送全部消息
  40. 			strcat(sendstr, tempHttpBody);
  42. 			write(client_sock, sendstr, strlen(sendstr));

五、esp8266的flash读取网页的注意要点；

  • 在我之前说到的是先通过工具把html网页烧录到flash芯片，我这里使用的是25q32，可用的空间会比较大，我这里就烧录到0x1F4000，计算之后是哪个扇区呢？大家可以算下，0x1F4000换算十进制就是‭2048000‬，一个扇区是4096 bytes，而‭2048000 / 4096 = 500 ‬ ，也就是第 500 个扇区了！于是我们代码这样读取：
  1.     //500*4096 相当于  0x1F4000 ，也就是 0x1F4 * 4096
  2. 	spi_flash_read(500 * 4096, (uint32 *) &tempSaveData, sizeof(tempSaveData));
  3. 	printf("get Html Content:  %s \n", tempSaveData);
  • 在拿到了网页信息之后，要自己设置字符串内容的结束符，这就需要我们的Html文件有多大？注意：我们要的是显示全部内容下的时候才拿到这个Html文件大小，注意我们上面的是格式符%s，取出来的当然会小很多！
  1.            //设置结束符
  2. 			tempSaveData[594] = 0;

六、其他注意要点；

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

  • 下面是客户端手机浏览器截图！

esp8266烧录Html文件，实现内置网页控制设备！

代码地址如下：
http://www.demodashi.com/demo/14321.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权

esp8266烧录Html文件，实现内置网页控制设备！的更多相关文章

  1. 手机QQ内置网页，微信内置网页中进行分享到QQ和微信的操作

    微信内的网页分享: API内容详见微信开发文档  https://mp.weixin.qq.com/wiki 这里需要注意的是:调用微信API的时候修改的是微信内网页右上角三个点那里打开后,选择分享之 ...

  2. JavaWeb -jsp文件和内置对象的解析

    jsp文件和内置对象的解析 对page解析 JSP九大内置对象(自带,无需new) 1 out:输出对象 2 request:请求对象,存储“客户端像服务端发送的请求信息” 3 response:响应 ...

  3. [转]python file文件操作--内置对象open

    python file文件操作--内置对象open   说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前 ...

  4. python file文件操作--内置对象open

    说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前工作目录)或者一个绝对路径,当传入路径不存在此文件会报错 ...

  5. 谷歌浏览器调试手机app内置网页

    当自己的H5项目内置于手机app内时,遇到了样式问题或者想查看H5页面代码.数据交互以及缓存等情况来检查数据,此时可以使用谷歌浏览器的控制台远程调试手机,步骤如下: 一.手机开启允许usb调试 二.手 ...

  6. django+mongodb 内置用户控制

    0x01 项目:django2.1 数据库:mongodb 这是一个很蛋疼的组合 mongodb并非官方支持使用的数据库,这意味着要使用user group permissions等进行用户和权限控制 ...

  7. 【原创】Matlab.NET混合编程技巧之找出Matlab内置函数

                  本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新    Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 Matlab与.N ...

  8. 在Android中访问内置SE和基于SE的卡模拟（一）

    2013-10-10 编写 前言 在“十问Android NFC手机上的卡模拟”文中仅仅简单的介绍了一下相关的概念,如果需要了解基于SE的卡模拟的更多细节,也就是,究竟在Android的NFC手机上, ...

  9. Matlab.NET混编技巧之——找出Matlab内置函数

    原文 http://www.cnblogs.com/asxinyu/p/3295309.html Matlab与.NET的混合编程,掌握了基本过程,加上一定的开发经验和算法基础,肯 定不难.反之,有时 ...

随机推荐

  1. 高手写的“iOS 的多核编程和内存管理”

    原文地址:http://anxonli.iteye.com/blog/1097777 多核运算 在iOS中concurrency编程的框架就是GCD(Grand Central Dispatch), ...

  2. pytest文档24-fixture的作用范围(scope)

    fixture作用范围 fixture里面有个scope参数可以控制fixture的作用范围:session > module > class > function fixture( ...

  3. ArcEngine 连接sql server sde

    前言 本想在soe中进行sde for sqlserver数据获取.由于soe的调试不方便,为了测试的简便,先在桌面上写了个arcengine连接sde for sqlserver的程序,但是本以为是 ...

  4. GUI程序设计2

    8. 按钮(JButton)使用示例 例14. 按钮使用示例. package GUI; import java.awt.BorderLayout; import java.awt.Container ...

  5. DDR SDRAM芯片DQS的作用以及读写DQS/DQ对齐方式不同的原因

    节选内容转载自https://www.design-reuse.com/articles/13805/the-love-hate-relationship-with-ddr-sdram-control ...

  6. mybatis异常 ：元素内容必须由格式正确的字符数据或标记组成。

    今天同事写一个查询接口的时候,出错:元素内容必须由格式正确的字符数据或标记组成. 错误原因:mybatis查询的时候,需要用到运算符 小于号:< 和  大于号: >,在mybatis配置文 ...

  7. 【系统】supervisor支持多进程

    [program:deployworker] directory = /etc/ansible/easyAnsible/app/deploy/ command = python Deploy.py p ...

  8. matlab中，怎样把矩阵中所有的0改为2

    一句话搞定:>> a(find(a==0))=[2]:把矩阵中所有的0改为2

  9. 如何在MVC的ActionLink中应用Resource文件

    项目中建立Resources文件夹. 添加Resource文件,必须添加一个默认的,其他语言可以添加很多个.我这里只添加了一个中文的. 双击每个资源文件,将Access Modifier 设置成pub ...

  10. (C++)UrlEncode的标准实现

    http://blog.163.com/xiaopengyan_109/blog/static/149832173201072685539394/ 地址栏传中文参数后是什么编码格式 网页中的表单使用P ...