一、写在前头

        本文着重于ESP32与网页的交互,并没有针对网页进行UI优化,也不会对HTM5的组件进行详细介绍,只讲解一些关键的JS函数。

        代码以Arduino框架进行开发,使用ESPAsyncWebServer库实现WebServer,通过JS代码配合库文件的回调函数进行使用,只讲交互部分,文章内容不关注数据的来源以及控制。

二、如何对ESP32进行配置

(1)基础配置

        ESPAsyncTCP库下载

        ESPAsyncWebServer库下载

        首先需要一些基础框架,对库文件的引用,并设置好端口号和网站的首页

#include <ESPAsyncWebServer.h>    // 包含异步Web服务器库文件

AsyncWebServer server(80);        // 创建WebServer对象, 端口号80
// 使用端口号80可以直接输入IP访问,使用其它端口需要输入IP:端口号访问
// 一个储存网页的数组
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
     <h2>ESP32 网页</h2>
</body>
<script>
    
</script>)rawliteral";
void setup()
{
  // 你需要再此处添加WiFi操作代码,开启热点或者连接到热点
  // 添加HTTP主页,当访问的时候会把网页推送给访问者
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/html", index_html); });
  server.begin();  // 初始化HTTP服务器
}


void loop()
{
}

        当你添加上WiFi操作代码,把这个程序烧录入ESP32,并通过浏览器访问ESP32的IP地址时,浏览器会显示这个画面:

三、 如何在网页上显示数据

(1)打包你需要显示的数据

        以显示温度和湿度为例,需要将温湿度打包为HTML代码块

String Merge_Data(void)
{
  int Humidity = 50;// 此处应为获取温度代码
  int Temperature = 26;// 此处应为获取湿度代码
  // 将温湿度打包为一个HTML显示代码
  String dataBuffer = "<p>";
  dataBuffer += "<h1>传感器数据 </h1>";
  dataBuffer += "<b>温度: </b>";
  dataBuffer += String(Temperature);
  dataBuffer += "<br/>";
  dataBuffer += "<b>湿度: </b>";
  dataBuffer += String(Humidity );
  dataBuffer += "<br /></p>";
  // 最后要将数组返回出去
  return dataBuffer;
}

(2)添加对应的响应

        然后在setup中,server初始化前添加响应代码,把数据返回出去。

void setup()
{
  // 你需要再此处添加WiFi操作代码,开启热点或者连接到热点
  // 添加HTTP主页,当访问的时候会把网页推送给访问者
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/html", index_html); });
  // 设置反馈的信息,在HTML请求这个Ip/dht这个链接时,返回打包好的传感器数据
  server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  server.begin();  // 初始化HTTP服务器
}

(3)修改HTML定时请求数据

        数据打包好了,也返回给HTML了,这个时候我们就需要HTML定时去请求数据,所以我们要在HTML中使用JS代码的定时器,来定时采集数据。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
     <h2>ESP32 网页</h2>
     <!-- 创建一个ID位dht的盒子用于显示获取到的数据 -->
     <div id="dht">
     </div>
</body>
<script>
     // 设置一个定时任务, 1000ms执行一次
     setInterval(function () {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // 此代码会搜索ID为dht的组件,然后使用返回内容替换组件内容
                document.getElementById("dht").innerHTML = this.responseText;
            }
        };
        // 使用GET的方式请求 /dht
        xhttp.open("GET", "/dht", true);
        xhttp.send();
    }, 1000)
</script>

        当代码请求到结果的时候,就会使用结果替换ID为dht的组件内容(此处为DIV盒子)。所以,我们在打包数据的时候就要提前对数据加上HTML代码进行美化,如果不加以美化,返回的就只会是单纯的一串字符串,可读性极差。烧录代码后,显示效果如下:

        

温湿度显示效果

 四、如何下发数据

(1)修改HTML添加必要的组件

        以按钮为例,我们需要在HTML中添加一个按钮

<button onclick="set()"> 发送数据 </button>

        按钮需要绑定onclick运行JS函数

// 按下按钮会运行这个JS函数
	function set() {
		var payload = "ESP32"; // 需要发送的内容
		// 通过get请求给 /set
		var xhr = new XMLHttpRequest();
		xhr.open("GET", "/set?value=" + payload, true);
		xhr.send();
	}

        当我们按下按钮的时候,触发onclick事件,进而运行JS中的函数 set。

        运行JS函数后,会将payload已GET的方式提交到/set。

        

                                                                 

(2)在ESP32添加对应的响应

        上面的HTML发送过来的数据,通用需要添加对应的响应来获取内容z

// 下发处理回调函数
void Config_Callback(AsyncWebServerRequest *request)
{
  if (request->hasParam("value")) // 如果有值下发
  {
    String HTTP_Payload = request->getParam("value")->value();    // 获取下发的数据
    Serial.printf("[%lu]%s\r\n", millis(), HTTP_Payload.c_str()); // 打印调试信息
  }
  request->send(200, "text/plain", "OK"); // 发送接收成功标志符
}
  
void setup()
{
  // 你需要再此处添加WiFi操作代码,开启热点或者连接到热点
  // 添加HTTP主页,当访问的时候会把网页推送给访问者
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/html", index_html); });
  // 设置反馈的信息,在HTML请求这个Ip/dht这个链接时,返回打包好的传感器数据
  server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  server.on("/set", HTTP_GET, Config_Callback);   // 绑定配置下发的处理函数
  server.begin();  // 初始化HTTP服务器
}

        这样,数据就从HTML到了ESP32,接下来就是对HTTP_Payload 字符串内的数据进行处理即可,在此不再赘述。

五、最终的代码


#include <ESPAsyncWebServer.h>    // 包含异步Web服务器库文件

AsyncWebServer server(80);        // 创建WebServer对象, 端口号80
// 使用端口号80可以直接输入IP访问,使用其它端口需要输入IP:端口号访问
// 一个储存网页的数组
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
</head>

<body>
	<h2>ESP32 网页</h2>
	<!-- 创建一个ID位dht的盒子用于显示获取到的数据 -->
	<div id="dht">
	</div>
	<button onclick="set()"> 发送数据 </button>
</body>

<script>
	// 按下按钮会运行这个JS函数
	function set() {
		var payload = "ESP32"; // 需要发送的内容
		// 通过get请求给 /set
		var xhr = new XMLHttpRequest();
		xhr.open("GET", "/set?value=" + payload, true);
		xhr.send();
	}
	// 设置一个定时任务, 1000ms执行一次
	setInterval(function () {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function () {
			if (this.readyState == 4 && this.status == 200) {
				// 此代码会搜索ID为dht的组件,然后使用返回内容替换组件内容
				document.getElementById("dht").innerHTML = this.responseText;
			}
		};
		// 使用GET的方式请求 /dht
		xhttp.open("GET", "/dht", true);
		xhttp.send();
	}, 1000)

</script>)rawliteral";
String Merge_Data(void)
{
  int Humidity = 50;// 此处应为获取温度代码
  int Temperature = 26;// 此处应为获取湿度代码
  // 将温湿度打包为一个HTML显示代码
  String dataBuffer = "<p>";
  dataBuffer += "<h1>传感器数据 </h1>";
  dataBuffer += "<b>温度: </b>";
  dataBuffer += String(Temperature);
  dataBuffer += "<br/>";
  dataBuffer += "<b>湿度: </b>";
  dataBuffer += String(Humidity );
  dataBuffer += "<br /></p>";
  // 最后要将数组返回出去
  return dataBuffer;
}

// 下发处理回调函数
void Config_Callback(AsyncWebServerRequest *request)
{
  if (request->hasParam("value")) // 如果有值下发
  {
    String HTTP_Payload = request->getParam("value")->value();    // 获取下发的数据
    Serial.printf("[%lu]%s\r\n", millis(), HTTP_Payload.c_str()); // 打印调试信息
  }
  request->send(200, "text/plain", "OK"); // 发送接收成功标志符
}
  
void setup()
{
  // 你需要再此处添加WiFi操作代码,开启热点或者连接到热点
  // 添加HTTP主页,当访问的时候会把网页推送给访问者
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/html", index_html); });
  // 设置反馈的信息,在HTML请求这个Ip/dht这个链接时,返回打包好的传感器数据
  server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  server.on("/set", HTTP_GET, Config_Callback);   // 绑定配置下发的处理函数
  server.begin();  // 初始化HTTP服务器
}

更多推荐

ESP32网页控制显示数据原来如此简单