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

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

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

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

目录：

文章目录

• • 目录：
  • @[toc]
  • 一.前言；
  • 二.各种方法对比；
  • • • 第一种：`esp8266`和前端都使用`tcp`或者`udp`通讯。
      • 第二种：`esp8266`和前端使用`http`协议的`post`或`get`请求数据。
  • 三.上面两种方法相结合成最佳方案；
  • • 以上2种方法结合一起使用，总结如下：
  • 四. 代码；
  • 五. 关于`http`协议请求的一些常识；
  • 六. 硬件下载；

一.前言；

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

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

• 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发生状态变化时候，前端是不知道的，需要主动去获取。如果客户端前端定时去服务器获取状最新态，这种做法不可靠，毕竟也是消耗服务器效应资源呢？

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

• 总结如下：

以上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("rn发送成功！rn");
}


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 ...rn");
	//每次发送数据确保端口参数不变
	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-8nnOK!!";

//接收的数据处理
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("nr------ recieve over ------- nr");
	//确定是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

最后

以上就是迷人大象为你收集整理的Esp8266 进阶之路21 【高级篇】浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。（附带Demo）的全部内容，希望文章能够帮你解决Esp8266 进阶之路21 【高级篇】浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。（附带Demo）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。