javascript - ESP32 上的 Web 服务器 : How to update and display sensor values from the server automatically?-6ren

javascript - ESP32 上的 Web 服务器 : How to update and display sensor values from the server automatically?

转载作者：太空狗更新时间：2023-10-29 15:03:01

我在 ESP32 上有一个网络服务器，在该服务器上有一个主页。我想每隔 x 秒自动更新一次主页上的传感器值(无需用户输入)。我无法访问文件系统。

传感器直接连接到 ESP32。传感器值在我的 C 程序中，存储在变量中并定期更新。变量是全局的，以便于使用。

我想到了 Ajax(我没有经验)，但我能找到的所有示例和方法都使用文件从(在 XMLHttpRequest().open(...url.. ..))。我没有文件，只有生成 HTML 和 Javascript 代码并发送给客户端的字符串。

我不知道如何更新我的值(value)观，希望得到一些帮助。

我想尝试类似 w3schools 中的示例，但我不知道如何获取其中的值:

另一个页面的示例(我不使用此代码 - 我不能使用文件!)

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:

最简单的方法是通过将此添加到 <head> 来要求页面每 5 秒刷新一次:

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>添加 spans使用 id 来保存要更新的值。像这样的东西:

sHTML+= "<h5>Messwerte</h5>";
sHTML+="<p>Analoger Pin 36</p>&nbsp;<span id='pin36'></span>";
sHTML+="<p>Analoger Pin 39</p>&nbsp;<span id='pin39'></span>";
sHTML+="<p>Analoger Pin 5</p>&nbsp;<span id='pin5'></span>";

创建 sHTML对于以下每 5 秒发出一次 ajax 请求并在浏览器中更新最新值的 javascript:

<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/

如果您使用 ESP32WebServer.h来自 https://github.com/nhatuan84/esp32-webserver (有关更多详细信息，请参阅 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}"); 
}

关于javascript - ESP32 上的 Web 服务器 : How to update and display sensor values from the server automatically?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44809589/

文章推荐： javascript - 在嵌套的 ul 结构中查找每个父 ul 的叶数

文章推荐： c - 指向链表指针数组的指针

文章推荐： c - 如何修改 C 中的 time_t 时间戳？

文章推荐： Android UIAutomator 如何检查手机或平板电脑

asp.net - 服务器.MapPath (".")，服务器.MapPath ("~")，服务器.MapPath(@"\")，服务器.MapPath ("/")。有什么不同？
谁能解释一下 Server.MapPath(".")、Server.MapPath("~")、Server.MapPath(@"之间的区别\") 和 Server.MapPath("/")？最佳答案
c# - 服务器.UrlEncode & 服务器.UrlDecode
我不知道，为什么我们要使用 Server.UrlEncode() & Server.UrlDecode()？!在 QueryString 中我们看到 URL 中的任何内容，那么为什么我们要对它们进行编
ssl - 服务器 SSL 不完整链(Inmotion 服务器)
我已经通过 WHM 在我的一个域上安装了 ssl 证书。网站正在使用 https://xyz.com . 但是它不适用于 https://www.xyz.com .我已经检查了证书，它也适用于 www
c++ - 如何在 C++ 中使用 WMI 或其他 WMI 检测安装在 Windows 2003 服务器和 2008 服务器 2003 服务器 R2 和 2008 服务器 R2 上的防病毒软件
我已经使用 WMI 检测操作系统上是否存在防病毒软件，itz 正常工作并通过使用命名空间向我显示防病毒信息，例如 win xp 和 window7 上的名称和实例 ID:\root\SecurityC
Hive 服务器 1 与 Hive 服务器 2
我们有 hive 0.10 版本，我们想知道是否应该使用 Hive Server 1 或 Hive Server2。另一个问题是连接到在端口 10000 上运行的 Hive 服务器，使用 3rd 方工
c++ - Windows Http 服务器 API HTTPS 服务器
我想在 C++ 中使用 Windows Server API 设置一个 HTTPS 服务器，我使用了示例代码，它在 HTTP 上工作正常，但我就是不能让它在 HTTPS 上工作。 (我不想要客户端 S
c# - smtpclient 不适用于 Exchange 服务器，但适用于 smtp 服务器
我写了一个非常基本的类来发送电子邮件。我用 smtp 服务器对其进行了测试，它工作正常，但是当我尝试使用我公司的交换服务器时，它给出了这个异常: SMTP 服务器需要安全连接或客户端未通过身份验证。服
delphi - DataSnap 服务器 - 将 HTTP 请求重定向到另一个 DataSnap 服务器
我的应用程序包含一个“网关”DataSnap REST 服务器，它是所有客户端的第一个访问点。根据客户端在请求中传递的用户名(基本身份验证)，请求需要重定向到另一个 DataSnap 服务器。我的问题
java - Servlet 适用于我的 Tomcat 服务器，但不适用于我的 Glassfish4 服务器
我有一个 Tomcat 服务器和一个 Glassfish4 服务器。我的 Servlet 在 Tomcat 服务器上启动得很好，但在 Glassfish4 服务器上给我一个“HTTP Status 4
linux - 无法从托管虚拟机(即我的 ubuntu 服务器)的计算机以外的其他计算机访问 ubuntu 服务器
我在 vmware 上创建了一个 ubuntu 服务器。我用它作为文件服务器。如果我通过托管虚拟机的计算机进行连接，则可以访问它。我无法从同一网络上的其他计算机执行此操作。提前致谢! 最佳答案首先确
ruby-on-rails - 重新启动 rails 服务器，分离 rails 服务器
如何重启 Rails 服务器？我从开始 rails server -d 所以服务器是分离的我知道的唯一方法就是去做ps 辅助 | grep rails 并 kill -9关于过程#但是像这样杀死进
XMPP 服务器 Vysper 与 OpenFire/Tigase(如何创建简单的 XMPP 服务器)
我实际上正在尝试找到编写一个简单的 XMPP 服务器的最佳方法，或者找到一个占用空间非常小的服务器。我只关心XMPP的核心功能(状态、消息传递、群组消息传递)。目前还在学习 XMPP 协议(proto
XMPP 服务器 Vysper 与 OpenFire/Tigase(如何创建简单的 XMPP 服务器)
我实际上正在尝试找到编写简单 XMPP 服务器的最佳方法，或者找到一个占用空间非常小的方法。我只关心 XMPP 的核心功能(统计、消息、组消息)。目前也在学习 XMPP 协议(protocol)，所以
java - 在 MobileFirst 服务器(Liberty 服务器)中使用 jax-ws
我们正在尝试从 Java JAX-RS 适配器访问 SOAP 1.1 Web 服务。我们正在使用从 WSDL 生成的 SOAP 客户端。但是当解码 SOAP 故障时，我们得到以下异常: ... C
Python 在代码中启动 HTTP 服务器(创建 .py 以启动 HTTP 服务器)
目前，我和许多其他人正在多个平台(Windows、OS X 和可能的 Linux)上使用 Python HTTP 服务器。我们正在使用 Python HTTP 服务器来测试 JavaScript 游戏
c# - C# 服务器(不是 Web 服务器)和 PHP 之间的数据交换
我有一个连续运行的服务器程序(C#/.NET 2.0 on Linux with mono)，我想从 PHP 脚本连接到它以在网站上显示状态信息。目的是创建一个(某种)实时浏览器游戏(无 Flash
facebook-graph-api - 应用 > OAuth2 服务器 > Facebook > OAuth2 服务器 > 应用
所以我有一个单页客户端应用程序。正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序我们有自己的 OAuth2 服务器，因此人们可以登录应用程序并获取与用户实体关联的 access_t
msbuild - 升级 Web 服务器(服务器 2012 R2)后，Web 部署现在失败
我们刚刚将测试 Web 服务器从 Server 2008 升级到 Server 2012 R2。我们有一个部署我们网站的批处理脚本。当它将站点推送到服务器时，它现在失败了。奇怪的是，我可以使用相同的发
apache - 无法启动 SpagoBI 服务器(多合一 spagobi 服务器)版本 5.2
建议一些加载SpagoBI服务器的方法，我尝试了所有方法来解析spagobi服务器。在 Catalina 中，错误是 - * SEVERE: Unable to process Jar entry [
node.js - nodejs 服务器与 apache tomcat 服务器(App 服务器)有何不同？
当我们点击应用程序服务器(apache tomcat)时，它会创建一个线程来处理我们的请求并与 tomcat 连接，建立连接，tomcat 创建另一个线程来处理请求并将其传递给连接，连接线程将其传递给

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - ESP32 上的 Web 服务器 : How to update and display sensor values from the server automatically?