Esp8266 进阶之路21 【高级篇】浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。（附带Demo）

---

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

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

---

• 很多人怎么联系我一起学习进步，下面打个小小公告和干货无偿分享：

玩转esp8266带你飞、加群付费QQ群，提高门槛，不喜的朋友勿喷勿加：434878850
esp8266源代码免费学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
esp32源代码免费学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32

目录：

一.前言；

• 前天在做菜时候，不小心把手指弄破了，留了不少血，立项要做一个标准的程序员，手指破了就是几乎敲不了代码了~噢噢。。。。

• 下面正式入正题，在阅读本博文前，要有以下的术语和技术了解：

• http协议的基本了解，post请求和get请求的区别。

• esp8266的基本认识，烧录和编程认识；

• postMan工具的基本使用，主要模拟前端post提交发送数据到esp8266;

---

二.各种方法对比；

---

第一种：esp8266和前端都使用tcp或者udp通讯。

• 这种方法是网上最为流传的，也是很多程序员头脑的第一想法，主要实现的过程如下：

• esp8266作为热点开启，让前端上位机去连接它，获得网关地址，由手机主动发起通讯，之后数据交互；或者esp8266去连接指定的路由器，通过某渠道去获取当前设备的IP地址。 之后也是由手机主动发起通讯。

---

【总结】： 由上面的步骤可以看到，不管是TCP或者UDP，都需要主动拿到设备的IP地址，这样一来就减少了效率，而且在多个前端上位机都通过socket连接到设备，会造成阻塞，特别是这种长连接的tcp协议；

---

第二种：esp8266和前端使用http协议的post或get请求数据。

• 这种post或get请求数据交互在电商的APP和服务器数据交互使用最为广泛（毕竟我是Android开发的），其主要实现的过程如下：

• 前端主动通过http协议，把数据写在发送的内容上面发送到服务器，服务器（esp8266）接收到了之后，服务器接收到数据之后，剖析数据，返回数据给前端，之后立马断开连接，服务器不会主动向前端发送数据！

---

【总结】： 由上面的步骤可以看到；**前端需要主动发送数据到服务器，但是服务器不会主动向前端发送数据！**这缺点大家都想到了：就是当服务器esp8266发生状态变化时候，前端是不知道的，需要主动去获取。如果客户端前端定时去服务器获取状最新态，这种做法不可靠，毕竟也是消耗服务器效应资源呢？

---

三.上面两种方法相结合成最佳方案；

• 总结如下：

方法	优点	缺点
tcp udp	前端可以实时收到设备的最新状态。	如果多个前端一直连接，那么服务器要向多个设备发送数据，会造成阻塞。
http协议	前端主动发送数据之后，立刻断开，避免多个前端一直连接设备。	前端无法实时同步设备的最新状态。

以上2种方法结合一起使用，总结如下：

---

---

• 上面的图可以看到

• 2种想法相结合，设备采用本地UDP广播包来发送状态出去，最重要的是，广播包还含有其局域网的ID地址，后面我们就可以根据这个地址去http协议的post请求；

---

四. 代码；

---

• 本地UDP广播实现，注意不要处理任何接收到的信息，因为我们要实现的是UDP广播包只管发数据！

LOCAL struct espconn user_udp_espconn;
LOCAL os_timer_t checkTimer_wifistate;

void ICACHE_FLASH_ATTR user_udp_sent_cb(void *arg){
    os_printf("\r\n发送成功！\r\n");
}


LOCAL void ICACHE_FLASH_ATTR user_udp_recv_cb(void *arg, char *pdata, unsigned short length) {
	//os_printf("接收数据：%s", pdata);
	//注意不做任何处理
}


LOCAL void sendDataUDP() {
	os_printf("send data ...\r\n");
	//每次发送数据确保端口参数不变
	user_udp_espconn.proto.udp = (esp_udp *) os_zalloc(sizeof(esp_udp));
	user_udp_espconn.type = ESPCONN_UDP;
	user_udp_espconn.proto.udp->local_port = 2000;
	user_udp_espconn.proto.udp->remote_port = 8686;
	const char udp_remote_ip[4] = { 255, 255, 255, 255 };
	os_memcpy(user_udp_espconn.proto.udp->remote_ip, udp_remote_ip, 4);
	espconn_sent(&user_udp_espconn, "this is message!", strlen("this is message!"));
}

//udp远程设置模块wifir接口,udp端口为1025
void ICACHE_FLASH_ATTR udpwificfgg_init(void) {

	user_udp_espconn.proto.udp = (esp_udp *) os_zalloc(sizeof(esp_udp)); //分配空间
	user_udp_espconn.type = ESPCONN_UDP;              //设置类型为UDP协议
	user_udp_espconn.proto.udp->local_port = 2000;            //本地端口
	user_udp_espconn.proto.udp->remote_port = 8686;           //目标端口
	const char udp_remote_ip[4] = { 255, 255, 255, 255 };       //目标IP地址（广播）
	os_memcpy(user_udp_espconn.proto.udp->remote_ip, udp_remote_ip, 4);

	espconn_regist_recvcb(&user_udp_espconn, user_udp_recv_cb);	 		//接收
	espconn_regist_sentcb(&user_udp_espconn, user_udp_sent_cb);	 		//发送
	espconn_create(&user_udp_espconn); //建立 UDP 传输

	wifi_set_broadcast_if(1);

	os_timer_disarm(&checkTimer_wifistate);   //取消定时器定时
	os_timer_setfn(&checkTimer_wifistate, (os_timer_func_t *) sendDataUDP,
	NULL);    //设置定时器回调函数
	os_timer_arm(&checkTimer_wifistate, 1000, 1);      //启动定时器，自动重载

}

---

• 接收前端的post提交数据的处理：

LOCAL struct espconn httperver;
char httphead[] = "HTTP/1.1 200 OK \nDate: %s  \nContent-Type: text/plain; charset=UTF-8\n\nOK!!";

//接收的数据处理
LOCAL void ICACHE_FLASH_ATTR httperver_recv(void *arg, char *pdata,
		unsigned short len) {

	struct espconn *pespconn = (struct espconn *) arg;
	uart0_sendStr(pdata);//把接收到前端的数据打印到串口
	uart0_sendStr("\n\r------ recieve over ------- \n\r");
	//确定是post请求
	if (pdata[0] == 'P' && pdata[1] == 'O' && pdata[2] == 'S'
			&& pdata[3] == 'T') 
		char input[2048] = { 0 };
		char output[2048] = { 0 };
		os_sprintf(input, "%s", pdata);
		findStr(input, output);//获取body
		
		char* pJSON = output;
		char temp[2048];
		os_sprintf(temp, httphead,
				sntp_get_real_time(sntp_get_current_timestamp()));

		uart0_sendStr(temp);//把发送到前端的数据打印到串口
		espconn_sent(pespconn, temp, strlen(temp));//发送http response到前端

	}
	espconn_disconnect(pespconn); //注意要断开连接
}

void ICACHE_FLASH_ATTR httperver_init(void) //http协议服务器接口调用
{
	httperver.type = ESPCONN_TCP;//tcp
	httperver.state = ESPCONN_NONE;
	httperver.proto.tcp = (esp_tcp *) os_zalloc(sizeof(esp_tcp));
	httperver.proto.tcp->local_port = 80;//注意务必是 80端口
	espconn_regist_connectcb(&httperver, httperver_listen);
	espconn_accept(&httperver);
	espconn_regist_time(&httperver, 3, 0);
}

---

---

五. 关于http协议请求的一些常识；

---

• 我们知道http属于短连接，即为一旦发送数据接收到回复，立刻断开连接。这个是建立在tcp之上的，也就是所谓的比tcp还要高级，因此，务必先让esp8266建立tcp服务器端。

• esp8266建立tcp服务器端的端口一定是80，这个端口号是http协议中默认的。

• esp8266反馈给前端的信息是要遵循规律的，要不会发生前端提示服务器没反应！！其信息格式大概如下：

  Headers注意这个状态码200 必须要的。还有提示协议版本。下面的Content-Type指定了返回的内容格式，下面的是文本字符串格式。相信做服务器开发的朋友很熟悉这个了！下面的OK！！就是返回的自定义的内容，比如我还可以加进去一些传感器的数值等。

 HTTP/1.1 200 OK 
 Date: Sat Jun 30 10:45:57 2018
 Content-Type: text/plain; charset=UTF-8
 
 OK!!

于是乎，我们在前端就能看到剖析结果如下，呵呵，他已经把前面的内容去掉了！

• 再看看body内容,果然是我们回复的OK!!!：

---

---

六. 硬件下载；

• 本demo下载：https://download.csdn.net/download/xh870189248/10509790
• esp8266学习汇总：https://github.com/xuhongv/StudyInEsp8266
• esp32学习汇总：https://github.com/xuhongv/StudyInEsp32
• QQ付费交流群，众多大神带您飞: 434878850

---

---