Автообновление страницы esp32
- Войдите на сайт для отправки комментариев
Ср, 10/02/2021 - 21:30
Добрый день.
Подскажите пожалуйста как сделать автообновление страницы при использовании web server esp32(AP) ?
Например есть вывод значения с АЦП,но чтобы знать текущее значение нужно обновить страницу.
Была идея написать программу для андроида с браузером и постоянным автообновлением.но это костыли.
Есть ли более лучшие решения?
Благодарю за ответы
#include <WiFi.h>
const int potPin = 34;
int potValue = 0;
const char* ssid = "ESP32-Access-Point";
const char* password = "123456789";
WiFiServer server(80);
String header;
void setup() {
Serial.begin(115200);
Serial.print("Setting AP (Access Point)…");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}
void loop(){
potValue = analogRead(potPin);
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
client.println("<body><h5>V= ");
client.println(potValue);
client.println("</h5>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Всё гораздо проще. Всего лишь надо прочитать про HTML. И тогда очень скоро наткнётесь на простейший вариант решения задачи. В заголовке добавить тэг "Refresh" с указанием периода обновления и дело в шляпе ;)
Совет agnec2001 - хорош и правилен. Но, он обновляет страницу целиком. Если не устраивает и хочется обновлять только одно поле, можно поставить microAjax
Ох, а помните времена чатов? Вот это время было! Когда первые ADSL с лимитируемым трафиком пошли чаты столько трафика жрали - капец))) Но было весело! ) Правда и работали даже на диал-апе без тормозов. А там сами помните какие скоростя были - у меня максимум 32, но чаще всего 24. ((
Не жрали они трафик. chat.ru, krovatka и чат-волчат, все они использовали вот как раз meta refresh обновляемый ифрейм для отображения сообщений чата, ну сколько там текста было, килобайт-два, для курьера-шпротстера это было ни о чём. ббски на 2400 всё ещё работали в то время, а www был прямо аж вершиной прогресса.
А массовый adsl - это уже времена расцвета udaff.com, там уже странички воспряли и стали пожирнее.
можно добавить тег мета с автообновлением с нужным периодом времени, можно добавить скрипт в тело страницы, будет обновлять только переменные, мне больше понравилось со скриптом, так как на странице обновляются только выводимые переменные
на AJAX так:
// AJAX ADDED ptr += "<script>\n"; ptr += "setInterval(loadDoc,1000);\n"; ptr += "function loadDoc() {\n"; ptr += "var xhttp = new XMLHttpRequest();\n"; ptr += "xhttp.onreadystatechange = function() {\n"; ptr += "if (this.readyState == 4 && this.status == 200) {\n"; ptr += "document.getElementById(\"webpage\").innerHTML =this.responseText}\n"; ptr += "};\n"; ptr += "xhttp.open(\"GET\", \"/\", true);\n"; ptr += "xhttp.send();\n"; ptr += "}\n"; ptr += "</script>\n"; // END AJAXс использованием Мета тега:
Совет agnec2001 - хорош и правилен. Но, он обновляет страницу целиком. Если не устраивает и хочется обновлять только одно поле, можно поставить microAjax
Спасибо большое,получилось
Всё гораздо проще. Всего лишь надо прочитать про HTML. И тогда очень скоро наткнётесь на простейший вариант решения задачи. В заголовке добавить тэг "Refresh" с указанием периода обновления и дело в шляпе ;)
спасибо