我在ESP32上有一个Web服务器,在该服务器上有一个主页。我想每隔x秒自动更新一次主页上的传感器值(无需用户输入)。我无法访问文件系统。
传感器直接连接到ESP32。传感器值在我的C程序中,存储在变量中并定期更新。变量是全局变量,以便于使用。
我考虑过Ajax(我没有经验),但是我可以找到的所有示例和方法都使用文件从中加载数据(在XMLHttpRequest()。open(... url ....)的“url”部分中)。 )。我没有文件,只有字符串,可以在其中生成HTML和Javascript代码并将其发送给客户端。
我不知道如何更新自己的值(value)观,并希望有所帮助。
我曾考虑过尝试使用w3schools中的示例,但我不知道如何在其中获得值(value):
其他页面的示例(我不使用此代码-我无法使用文件!)
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
这是我在ESP上的C程序的一些代码:
HTML字符串:
String html_document() {
String sHTML;
sHTML = "<!doctype html>";
sHTML +="<html>";
sHTML +="<html lang=\"de\">";
/***************** head ****************/
sHTML +="<head>";
/****** avoid favicon requests ** ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
//Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
sHTML +="<title>LetsgoING IoT</title>";
sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>h1{ color: green;}</style>";
sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>h2{ color: blue;}</style>";
sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
sHTML +="</head>";
/***************** body ****************/
sHTML+= "<body>"; //onload=\"window.setInterval(updateDiv, 15000);\"
sHTML+= "<h1>LetsgoING</h1>";
sHTML+= "<h2>Internet der Dinge</h2>";
sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\" >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";
sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
sHTML+= "<form><p2>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a> <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
sHTML+= "</p2>";
sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> </a> <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
sHTML+= "</form>";
sHTML+= "<h5>analoger Schwellwert</h5>";
sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> <input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"> </a> <a style=\"width:15%;\"><input type=\"submit\" value=\"senden\"></a><a style=\"width:27%;\"> </a></p2>";
//sHTML+= "<p><a style=\"width:28%;\"></a> <a style=\"width:30%;\"> </a> <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
sHTML+= "</form>";
sHTML+= "<h5>PWM-Wert</h5>";
sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> <input name=\"pwm\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"0\"> </a> <a style=\"width:15%;\"><input type=\"submit\" value=\"senden\"></a><a style=\"width:27%;\"> </a></p2>";
sHTML+= "</form>";
sHTML+= "<h5>Messwerte</h5>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"an1\"; style=\"width:20%;\" href=\"anlg1\">#-Wert-#</p3><a style=\"width:22%;\">Analoger Pin 36 </a><a style=\"width:20%;\"></a></p>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"an2\"; style=\"width:20%;\">#-Wert-#</p3><a style=\"width:22%;\">Analoger Pin 39 </a><a style=\"width:20%;\"></a></p>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"dig\"; style=\"width:20%;\">#-Wert-#</p3><a style=\"width:22%;\">Digitaler Pin 5 </a><a style=\"width:20%;\"></a></p>";
sHTML+= "</body>";
sHTML+= "</html>";
return sHTML;
}
循环:
void loop() {
if (millis() - startTime >= 2000) {
startTime = millis();
/* Check if a client has connected */
client = server.available();
if (!client){
return;
}
/*Wait for the client to send data */
Serial.println("neuer Client verbunden------------------------------");
/*Count requests: */
request_counter ++;
unsigned long clTimeout = millis()+250;
while(!client.available() && (millis()<clTimeout) ) {
delay(1);
}
/*** publish Homepage ***/
client.print(html_document());
/* Read the first line of the clients request string "sHTML" until carriage return \r */
sHTMLRequest = client.readStringUntil('\r');
#ifdef DEBUGMODE
Serial.println("Antwort: ");
Serial.println(sHTMLRequest);
#endif
client.flush();
/* stop client, if request is empty */
if(sHTMLRequest=="") {
Serial.println("Leere Anfrage! - client gestoppt");
client.stop();
return;
}
#ifdef DEBUGMODE
Serial.println("Antwort2: ");
Serial.println(sHTMLRequest);
Serial.println ("---------");
Serial.print("DEBUG: Remote IP - Address : ");
for (int i = 0; i < 3; i++) {
Serial.print( client.remoteIP()[i]);
Serial.print(".");
}
Serial.println(client.remoteIP()[3]);
Serial.print("Seitenaufrufe: ");
Serial.println(request_counter);
Serial.println ("---------");
#endif
/**** call event handler **********/
eventHandler();
#ifdef DEBUGMODE
Serial.println("Zugewiesene PWM-Werte");
Serial.print("rot: ");
Serial.println(rot);
Serial.print("gruen: ");
Serial.println(gruen);
Serial.print("blau: ");
Serial.println(blau);
#endif
/* write PWM values for colors to channels*/
ledcWrite(1, rot);
ledcWrite(2, gruen);
ledcWrite(3, blau);
#ifdef DEBUGMODE
Serial.println(analog1);
#endif
}
UpdateValues();
}
/**** reads pin values **/
void UpdateValues() {
analog1 = analogRead(pinAnalog1);
analog2 = analogRead(pinAnalog2);
DigiOut = digitalRead(LEDpin);
}
这是更新值并创建JSON字符串的函数:
void UpdateValues() {
analog1 = analogRead(pinAnalog1);
analog2 = analogRead(pinAnalog2);
DigiOut = digitalRead(LEDpin);
String strJson;
strJson = "(200,\"application/json\",\"{\"pin36\": ";
strJson+=analog1;
strJson+=", \"pin39\":";
strJson+= analog2;
strJson+=", \"pin5\": ";
strJson+=DigiOut;
strJson+="}\")";
server.print(strJson);
}
最佳答案
选项1 :
最简单的方法是要求页面每5秒刷新一次,方法是将其添加到<head>
中:
sHTML +="<meta http-equiv=\"refresh\" content=\"5\">";
然后更改您的
sHTML
字符串以连接全局变量的值。每次页面刷新时,它将(应该)重建html并返回最新值。选项2 :
您可以使用ajax来获取最新值,然后经常更新显示数据的网页的一小部分。
这里发生的是您将ESP32设置为提供第二个URL,该URL仅作为json对象返回最新值。然后将这些值注入(inject)页面,覆盖旧的页面。
首先在
<head>
中添加指向jQuery的链接:sHTML +="<script src=\"https://code.jquery.com/jquery-3.2.1.min.js\"></script>";
在
<body>
中添加带有ID的spans
,以保存要更新的值。就像是: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>";
为以下每5秒发出ajax请求的javascript创建
sHTML
,并在浏览器中更新最新值:<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
中检测到字符串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://randomnerdtutorials.com/esp32-web-server-arduino-ide/
如果您使用https://github.com/nhatuan84/esp32-webserver中的
ESP32WebServer.h
(有关更多详细信息,请参见http://www.iotsharing.com/2017/05/how-to-turn-esp32-into-web-server.html的后半部分),则可以使用以下方法:server.on("/sensors", handleSensorData);
与
/* 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}");
}