当前位置：网站首页>ESP32-CAM高性价比温湿度监控系统配网与上网方案设计与实现

ESP32-CAM高性价比温湿度监控系统配网与上网方案设计与实现

2022-06-23 10:35:00 【daodanjishui】

ESP32-CAM ArduinoIDE开发系列文章目录

第一篇：ESP32-CAM高性价比WIFI图传方案快速入门教程
 第二篇：ESP32-CAM第一个无线点灯程序
 第三篇：ESP32-CAM智能网关的设计与实现
 第四篇：ESP32-CAM创建热点构成并发式DNS服务器
 第五篇：ESP32-CAM高性价比温湿度监控系统
 第六篇：ESP32-CAM高性价比温湿度监控系统配网与上网方案设计与实现

前言

daodanjishui物联网核心原创技术之ESP32-CAM高性价比温湿度监控系统配网与上网方案设计与实现。
在上一篇：ESP32-CAM高性价比温湿度监控系统我们可以看到确实这个图传模块可以实现网络监控，但是问题又来了，wifi摄像头连上的是局域网的热点，并且局域网的热点和密码是写死在程序里面的，所以让这个图传模块连上网络似乎比较头疼。
有一篇CSDN的博客论述了WIFI模块各种常见的配网方式说明及其比较，证明了最好的配网方式是WEB配网，反正个人觉得微信配网很麻烦，因为要使用微信，没有微信就没有办法了。

一、ESP32-CAM高性价比温湿度监控系统配网与上网方案设计与实现是什么？

在这一期项目中：将要实现一个WEB配网方式，通过ESP32-CAM先创建一个知道账号和密码的AP热点“daodanjishui”，然后用手机WIFI通过输入密码asdfghjkl连上这个热点，再用该手机打开浏览器，在浏览器网址输入栏输入192.168.4.1(热点的IP是固定的，如果想在局域网实现DNS域名解析，请看第四篇：ESP32-CAM创建热点构成并发式DNS服务器，输入网址之后就可以看到保存在ESP32的配网主页，在主页输入要链接的无线WIFI账号和密码，点击连接即可。连上Internet之后，自然可以轻松地发送get请求，最后请求"心知天气"的服务器返回北京的天气预报，最后ESP32-CAMM模块通过串口打印出来天气情况，以此来证明ESP32-CAM确实能与外网相互通信。

二、软件开发思路

1.编写配网主页

首先编写一个配网主页，存入单片机。
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<!--<meta http-equiv="Content-Type" content="text/html; charset=GBK" />-->
		<meta charset="GBK">
		<meta name="viewport"content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible"content="ie=edge">
		<title>daodanjishui网页配网</title>
		
	</head>
	<body>
		<form name="my">
			WiFi名称：
			<input type="text" name="s" placeholder="请输入您WiFi的名称" id="aa">
			 <br>
			WiFi密码：
			<input type="text" name="p" placeholder="请输入您WiFi的密码" id="bb">
			 <br>
			<input type="button" value="连接" onclick="wifi()">
		</form>
		<script language="javascript">
			
			function wifi()
			{
    
				var ssid = my.s.value;
				var password = bb.value;
				var xmlhttp=new XMLHttpRequest();
				xmlhttp.open("GET","/HandleVal?ssid="+ssid+"&password="+password,true);
				xmlhttp.send()	
				alert("用户名为："+ssid+' '+"密码为："+password);
			}
		</script>
	</body>
</html>

然后单片机开机之后创建一个无需密码的热点，手机连上如下图的热点在这里插入图片描述
连上无密码热点之后在其浏览器上输入地址192.168.4.1（这个热点IP是不会变的，所以不用看串口打印的ＩＰ地址就可以写对）先显示这个配网主页，如下图所示：

让用户输入无线热点的账号和密码，通过提交网页表单的方式让单片机接收该账号和密码去运行配网的代码从而实现智能网页配网（如果密码正确，ESP32会在串口打印出有关网络信息（箭头1），并且利用该网络发送get请求（箭头2）。用户可以修改为LED指示灯也是没有问题的）。配网成功之后切换联网模式正常上网，上网之后获取心知天气的天气预报。串口打印信息如下：
在这里插入图片描述
互联网上的“心知天气”服务器收到该ESP32-CAM发送的get请求，就会把json格式的天气预报信息返回给ESP32-CAM，ESP32-CAM再将该信息打印到串口上，如上图的箭头三所示（不想让程序复杂化，这里我没有做json字符串解析），如下图所示
在这里插入图片描述

2.单片机读入表单数据

通过单片机读取网页表单的密码和账号完成配网
代码如下（示例）：

void HandleVal()
{
    
    String wifis = server.arg("ssid"); //从JavaScript发送的数据中找ssid的值
    String wifip = server.arg("password"); //从JavaScript发送的数据中找password的值
    Serial.println(wifis);
    Serial.println(wifip);
    //WiFi.begin(wifis,wifip);
    WiFi.begin(wifis.c_str(),wifip.c_str());
}

3.单片机发送post请求获取心知天气服务器的数据

单片机连上互联网之后就可以实时获取网络上服务器的数据了。现在就不是局域网的通信了。

   String postRequest =(String)("GET ") + url + " HTTP/1.1\r\n" +  
     //"Content-Type: text/html;charset=utf-8\r\n" + 
     "Host: " + host + "\r\n" + 
     "Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n"+
     "Accept-Language:zh-cn\r\n"+
     //"User-Agent: daodanjishuiESP32\r\n" +
     "Connection: Keep Alive\r\n\r\n";  
 Serial.println(postRequest);  
 client.print(postRequest);  // 发送HTTP请求 
    // 展示返回的所有信息 
   String line = client.readStringUntil('\n');
   while(line.length() != 0){
    
     Serial.println(line);
     line = client.readStringUntil('\n');
   }
   Serial.println(line);
   client.stop();

总结

总结：这套代码可以学到图传摄像头ESP32-CAM WEB配网、AP模式发布配网主页到手机浏览器、嵌入式服务器获取表单数据、STA模式连上Internet、发送GET请求给远程服务器获取天气预报。免费版的代码是没有注释的，收费版是有详细注释的，收费版还送了网页源码和get请求格式指导，随君选择。本项目涉及到的有关项目都是原创为主，不是什么51单片机点灯之类程序，挑选的是比较新的前沿的设备进行创作。程序源码都经过严格测试，教程也详细到位，从而保证了含金，也欢迎广大电子爱好者和同学们采用相关的方案做电子设计、毕业设计或diy创作。后期将加入一些娱乐、玩耍和科幻创作的元素，敬请期待。

免费代码下载链接：https://www.cirmall.com/circuit/19407/
点我直接跳转

收费代码下载链接：https://www.cirmall.com/circuit/19409/
点我直接跳转

原网站

版权声明
本文为[daodanjishui]所创，转载请带上原文链接，感谢
https://blog.csdn.net/niruxi0401/article/details/119592868