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

*
本系列博客学习由非官方人员半颗心脏 <http://blog.csdn.net/xh870189248>
潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。

*
1、 Esp8266之搭建开发环境，开始一个“hellow world”串口打印。
<http://blog.csdn.net/xh870189248/article/details/77985541>

*
2、 Esp8266之利用GPIO开始使用按钮点亮你的“第一盏灯”。
<http://blog.csdn.net/xh870189248/article/details/78126689>

*
3、 Esp8266之利用 “软件定时器 ” 定时0.5秒闪烁点亮一盏LED。
<http://blog.csdn.net/xh870189248/article/details/78155357>

*
4 、Esp8266之了解PWM，更为深入地用PWM控制一盏LED的亮度变化。
<http://blog.csdn.net/xh870189248/article/details/78202224>

*
5 、Esp8266之原生乐鑫SDK高级使用之封装Post与Get请求云端，拿到“天气预报信息”。
<http://blog.csdn.net/xh870189248/article/details/78656563>

*
6 、Esp8266之了解 SmartConfig与Airkiss一键配网，给8266配网上云端。无需把wifi名字密码写在固件里。
<http://blog.csdn.net/xh870189248/article/details/78677952>

*
7 、Esp8266之了解 softAP热点配网模式原理，仿“机智云”定义自己的热点配网模式协议。
<http://blog.csdn.net/xh870189248/article/details/78703905>

*
8、 Esp8266之你要找的8266作为UDP、TCP客户端或服务端的角色通讯，都在这了。
<http://blog.csdn.net/xh870189248/article/details/78739311>

*
9、 Esp8266进阶之路第一篇： [小实战上篇]Windows系统搭建8266的本地Mqtt服务器，局域网点亮一盏LED灯。
<http://blog.csdn.net/xh870189248/article/details/78761948>

*
10、 Esp8266进阶之路第二篇： [小实战下篇]Windows系统搭建8266的本地Mqtt服务器，局域网点亮一盏LED灯。
<http://blog.csdn.net/xh870189248/article/details/78777371>

*
11、 Esp8266进阶之路第三篇： 8266接入阿里智能，点亮一盏LED灯，期待天猫精灵语音控制的不约而至！
<http://blog.csdn.net/xh870189248/article/details/78807018>

*
12、 Esp8266进阶之路第四篇：图文并茂学习阿里云主机搭建8266MQTT服务器，实现移动网络远程控制一盏LED。
<http://blog.csdn.net/xh870189248/article/details/78867173>

*
13、 Esp8266进阶之路第五篇：动手做个8266毕设小案例，smartConfig + MQTT协议轻松实现远程控制一盏LED。
<http://blog.csdn.net/xh870189248/article/details/79052347>

*
14、 Esp8266进阶之路第六篇： esp8266的 FreeRtos系统学习的正确姿势 —— 环境搭建、烧录。
<http://blog.csdn.net/xh870189248/article/details/79103373>

*
15、 Esp8266进阶之路第七篇： esp8266的物联网又一股清流，8266接入阿里云平台非阿里智能的SDS服务，点亮一盏LED灯。
<http://blog.csdn.net/xh870189248/article/details/79197459>

*
16、 Esp8266进阶之路第八篇： esp8266的基于Nonos移植红外线H1838，实现红外遥控器配网，远程控制一盏灯。
<http://blog.csdn.net/xh870189248/article/details/79486075>

*
17、 Esp8266进阶之路第九篇： esp8266自研的快速上电开关五次 (开-关为一次) ，无需按键触发则8266进去一键配网模式。
<https://blog.csdn.net/xh870189248/article/details/80027961>

*
18、 Esp8266进阶之路第十篇： esp8266 基于NONOS 实现 OTA 远程升级，实现无线“ 热修复 ”升级固件程序。
<https://blog.csdn.net/xh870189248/article/details/80095139>

*
19、 Esp8266进阶之路第十一篇【外设篇】： esp8266驱动 ds18b20、dht11 温湿度传感器，采集温湿度传感器到服务器。
<https://blog.csdn.net/xh870189248/article/details/80284827>

*
20、 Esp8266进阶之路第十一篇【高级篇】：深入学习esp8266的esp now模式，仿机智云做一个小网关，实现无需网络下轻松彼此连接通讯交互数据。
<https://blog.csdn.net/xh870189248/article/details/80631739>

*
21、 Esp8266进阶之路第十二篇【高级篇】：浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。
<https://blog.csdn.net/xh870189248/article/details/80859347>

目录：

*
* 目录： <https://blog.csdn.net/xh870189248/article/details/80859347#目录>
* 一.前言； <https://blog.csdn.net/xh870189248/article/details/80859347#一前言>
* 二.各种方法对比；
<https://blog.csdn.net/xh870189248/article/details/80859347#二各种方法对比>
*
* 第一种：esp8266和前端都使用tcp或者udp通讯。
<https://blog.csdn.net/xh870189248/article/details/80859347#第一种esp8266和前端都使用tcp或者udp通讯>
* 第二种：esp8266和前端使用http协议的post或get请求数据。
<https://blog.csdn.net/xh870189248/article/details/80859347#第二种esp8266和前端使用http协议的post或get请求数据>
* 三.上面两种方法相结合成最佳方案；
<https://blog.csdn.net/xh870189248/article/details/80859347#三上面两种方法相结合成最佳方案>
* 以上2种方法结合一起使用，总结如下：
<https://blog.csdn.net/xh870189248/article/details/80859347#以上2种方法结合一起使用总结如下>
* 四. 代码； <https://blog.csdn.net/xh870189248/article/details/80859347#四-代码>
* 五. 关于http协议请求的一些常识；
<https://blog.csdn.net/xh870189248/article/details/80859347#五-关于http协议请求的一些常识>
* 六. 硬件下载； <https://blog.csdn.net/xh870189248/article/details/80859347#六-硬件下载>

一.前言；

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

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

* 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
<https://download.csdn.net/download/xh870189248/10509790>
* esp8266学习汇总：https://github.com/xuhongv/StudyInEsp8266
<https://github.com/xuhongv/StudyInEsp8266>
* esp32学习汇总：https://github.com/xuhongv/StudyInEsp32
<https://github.com/xuhongv/StudyInEsp32>
* QQ付费交流群，众多大神带您飞: 434878850

热门工具换一换