Option 1:
最简单的方法是通过将其添加到来要求页面每 5 秒刷新一次<head>
:
sHTML +="<meta http-equiv=\"refresh\" content=\"5\">";
然后改变你的sHTML
字符串来连接全局变量的值。每次页面刷新时,它都会(应该)重建 html 并返回最新值。
Option 2:
您可以使用 ajax 检索最新值,然后经常更新显示数据的网页的一小部分。
这里发生的情况是,您将 ESP32 设置为提供第二个 URL,该 URL 仅以 json 对象的形式返回最新值。然后这些值被注入到页面中,覆盖旧的。
首先在中添加 jQuery 的链接<head>
:
sHTML +="<script src=\"https://code.jquery.com/jquery-3.2.1.min.js\"></script>";
In the <body>
add spans
用 ids 来保存要更新的值。就像是:
sHTML+= "<h5>Messwerte</h5>";
sHTML+="<p>Analoger Pin 36</p> <span id='pin36'></span>";
sHTML+="<p>Analoger Pin 39</p> <span id='pin39'></span>";
sHTML+="<p>Analoger Pin 5</p> <span id='pin5'></span>";
创建sHTML
对于以下 javascript,每 5 秒发出一次 ajax 请求,并更新浏览器中的最新值:
<script>
$(function() {
// request data every 5 seconds
setInterval(requestData, 5000);
function requestData() {
// ajax request for latest sensor data
$.get("/sensors")
.done(function(data) {
console.log(data); // debugging - remove when satisfied
if (data) { // if the returned data is not null, update the values
$("#pin36").text(data.pin36);
$("#pin39").text(data.pin39);
$("#pin5").text(data.pin5);
} else { // a problem occurred
$("#pin36").text("?");
$("#pin39").text("?");
$("#pin5").text("?");
}
}).fail(function() {
console.log("The was a problem retrieving the data.");
});
}
});
</script>
当你检测到字符串时/sensors
in sHTMLRequest
您想要返回以下 json 格式:
{"pin36": 5.2, "pin39": 0.322, "pin5": 1}
目前,我对您的设置还不够了解,无法提供更多建议,但这些链接有望对 C 代码有所帮助:http://www.iotsharing.com/2017/05/how-to-turn-esp32-into-web-server.html http://www.iotsharing.com/2017/05/how-to-turn-esp32-into-web-server.html & http://randomnerdtutorials.com/esp32-web-server-arduino-ide/ http://randomnerdtutorials.com/esp32-web-server-arduino-ide/
如果你使用ESP32WebServer.h
from https://github.com/nhatuan84/esp32-webserver https://github.com/nhatuan84/esp32-webserver(见后半部分http://www.iotsharing.com/2017/05/how-to-turn-esp32-into-web-server.html http://www.iotsharing.com/2017/05/how-to-turn-esp32-into-web-server.html有关更多详细信息),您可以使用以下内容:
server.on("/sensors", handleSensorData);
with
/* this callback will be invoked when user request "/sensors" */
void handleSensorData() {
/* server responds 200 with a json payload */
/* although preferably concatenate your real sensor data here */
server.send(200, "application/json", "{\"pin36\": 5.2, \"pin39\": 0.322, \"pin5\": 1}");
}