Question

我从ESP8266开始了我的第一个项目。

这是一个温度监视器，用于显示Web服务器上的数据。

由于我不想手动刷新页面以获取新数据，因此我正在使用HTTP请求来显示它。

我正在发送3个不同的请求，一个是当前温度，一个是最高温度，另一个是最低温度。

我面临的问题是，即使我同时发送所有这些数据，数据也不会同时刷新。

这是发送请求的代码：

<script>
    function getCurrent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("current").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readCurrent", true);
    xhttp.send();
    }

    function getHigh() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("high").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readHigh", true);
    xhttp.send();
    }

    function getLow() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("low").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readLow", true);
    xhttp.send();
    }

    setInterval(function() {
      getHigh();
      getLow();
      getCurrent();
    }, 2000);
</script>

这就是处理它们的代码：

float temp;
float hoechst;
float tiefst;

void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
}

void handleCurrent() {
  float t = temp;
  server.send(200, "text/plane", String(t));
}

void handleHigh() {
  float high = hoechst;
  server.send(200, "text/plane", String(high));
}

void handleLow() {
  float low = tiefst;
  server.send(200, "text/plane", String(low));
}

void setup() {
  [...]
  server.on("/", handleRoot);
  server.on("/readCurrent", handleCurrent);
  server.on("/readHigh", handleHigh);
  server.on("/readLow", handleLow);
  [...]
}

循环仅通过以下功能更新温度：

void updateTemperatures() {
  sensor.requestTemperatures();
  yield();
  float low = tiefst;
  float high = hoechst;
  float t = sensor.getTempCByIndex(0);
   if(t < low) {
    low = t;
    } else if(t > high) {
      high = t;
      }
   yield();
   temp = t;
   tiefst = low;
   hoechst = high;
  }

处理客户端（server.handleClient（））

所以我的问题是：如何同时更新数据，或者甚至可以使用ESP8266？

Answer 1

您可以通过在一个请求中返回所有三个值来同时更新数据。

这将是使用任何Web服务器的方法，更不用说在像ESP8266这样极其有限的处理器上运行的服务器了。

您可以使用如下所示的代码一次返回所有三个值：

void handleAll() {
  String results_json = "{ \"temperature\": " + String(temp) + ",", +
                           "\"high\": " + String(hoechst) + "," +
                           "\"low\": " + String(tiefst) + " }";

  server.send(200, "application/json", results_json);
}

这将组成一个包含所有三个值的JSON对象。 JSON是“ JavaScript对象表示法”，很容易将Javascript放在一起拆开。

您还需要更新ESP8266 Web服务器代码以添加

server.on("/readAll", handleAll);

通过此更改，您可以消除其他三个/ read处理程序。

您需要更新Javascript。您只需要用Javascript进行一次调用，将返回的文本转换为Javascript对象，并从中读取三个值中的每一个即可设置DOM中的元素。 jQuery可以为您带来如此轻松的体验。

而且，它是'text/plain'，而不是'text/plane'。

您还可以签出jQuery-这将大大简化您的Javascript代码。

Answer 2

简而言之：您不能同时更新数据，因为只有一个CPU内核。另外，您应该在设计时考虑到经济性，您希望进行三笔交易来获得一些数字。数据库的最简单形式之一是CSV，即“逗号分隔值”。本质上：用逗号分隔的值。

知道温度在列表中的顺序（低，当前，高温），您可以简单地创建一个新变量，或在输出数据的语句中连接变量，即“低”，“当前” ”，则返回的值类似于-1.23455,23.53556,37.23432，您可以通过查找逗号并使用字符串运算符轻松地将其分成三部分。

现在，您可以通过低规格设备通过一次交易获得三个值！

祝你好运！：）

ESP8266同时请求多个HTTP GET

2 个答案: