ESP8266 同时请求多个 HTTP GET

ESP8266 request multiple HTTP GET simultaneously

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

这是一个显示网络服务器上数据的温度监视器。

因为我不想手动刷新页面来获取新数据,所以我使用 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 更新数据?

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

任何 Web 服务器都可以采用这种方式,更不用说 运行 在像 ESP8266 这样极其有限的处理器上了。

您可以使用如下代码同时 return 所有三个值:

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

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

这构成了一个 JSON 对象,其中包含所有三个值。 JSON 是 "JavaScript Object Notation" 并且 Javascript 很容易组合和拆开。

您还需要更新您的 ESP8266 网络服务器代码以添加

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

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

并且您需要更新 Javascript。您只需要在 Javascript 中进行一次调用,将 returned 文本转换为 Javascript 对象并从中读取三个值中的每一个以设置 [=] 中的元素34=]。这是 jQuery 对您来说非常简单的事情。

而且,它是 'text/plain',而不是 'text/plane'

您也可以查看 jQuery - 它会大大简化您的 Javascript 代码。

简单地说:你不能同时更新数据,因为只有一个 CPU 核心。此外,您应该在设计时考虑到经济性,您希望通过三个交易来获得一些数字......最简单的数据库形式之一是 CSV,或 "Comma-Separated Values";本质上:用逗号分隔的值。

知道你的温度在列表中的顺序(低、当前、高),你可以简单地创建一个新变量,或者在输出数据的语句中连接你的变量,即低“,”当前的 "," 高,那会 return 你像 -1.23455,23.53556,37.23432 这样的东西,你可以通过查找逗号并使用字符串运算符轻松地将其分成三个。

现在您可以从低规格设备的单笔交易中获取您的三个值!

祝你好运! :)