如何在由Arduino服务的ESP8266 HTML网页上使用ajax和setInterval

Question

I have been recently learning how to program in Arduino to host a HTML/CSS/Javascript webpage on an Adafruit HUZZAH ESP8266 breakout chip, so please forgive me if my methods here are completely off. 我最近一直在学习如何在Arduino上编程，以便在Adafruit HUZZAH ESP8266突破芯片上托管HTML / CSS / Javascript网页，因此，如果我的方法完全不可用 ，请原谅我。

I'm currently trying to get a value to automatically update via ajax with a javascript function that is using setInterval to run every five seconds. 我目前正在尝试获取一个值，该值通过使用setInterval每五秒钟运行一次的javascript函数通过ajax自动更新。 And while it does update the value at least one time, it takes far longer than five seconds to do so, and then it never updates the value again. 尽管它确实至少一次更新了该值，但它花费的时间远远超过了五秒钟，然后再也不会更新该值。

Please let me know what you think of the way I'm currently trying to implement this, and if I'm way off the mark? 请让我知道您对我目前正在尝试实现此方法的看法，如果我做不到这一点？ To help you navigate the key functions are loadNum() and sendNum() ; 为了帮助您导航，关键功能是loadNum（）和sendNum（） ； and the variable that's incrementing is testNumPart2 (there's also more code on here as well that uses a button to turn an LED on/off). 并且递增的变量是testNumPart2 （这里还有更多代码，也使用按钮打开/关闭LED）。

Thanks! 谢谢！

#include <ESP8266WiFi.h>

#define LED_PIN  15  // This example assumes you have a LED connected to pin 13

const char* ssid = "REDACTED";
const char* password = "REDACTED";

// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);

void setup() {
  Serial.begin(115200);
  delay(10);

  // prepare GPIO2
  pinMode(LED_PIN, OUTPUT);
  //digitalWrite(2, 0);

  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
}

void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
boolean currentLineIsBlank = true;
String currentLine = "";
String LEDstatus = "off";

String testNumPart1 = "document.getElementById('demo').innerHTML = ";
int testNumPart2 = 23; 

String testNum = testNumPart1 + testNumPart2; 

//Serial.print("TEST: ");
//Serial.println(testNum);

while (client.connected()) {
  if (client.available()) {
    char c = client.read();
    Serial.write(c);

    testNumPart2++;

    testNum = testNumPart1 + testNumPart2; 

    // if you've gotten to the end of the line (received a newline
    // character) and the line is blank, the http request has ended,
    // so you can send a reply
    if (c == '\n' && currentLineIsBlank) {
      // send a standard http response header
      client.println("HTTP/1.1 200 OK");
      client.println("Content-Type: text/html");
      client.println("Connection: close");  // the connection will be closed after completion of the response
      //client.println("Refresh: 5");  // refresh the page automatically every 5 sec
      client.println();
      client.println("<!DOCTYPE HTML>");
      client.println("<html>");
        client.println("<head>");
            client.println("<title>Adafruit HUZZAH ESP8266</title>");
            client.println("<style type='text/css'>");

                //Styles for on/off switch
                client.println(".onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }");
                client.println(".onoffswitch-checkbox { display: none; }");
                client.println(".onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; }");
                client.println(".onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}");
                client.println(".onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }");
                client.println(".onoffswitch-inner:before { content: 'ON'; padding-left: 10px; background-color: #34A7C1; color: #FFFFFF; }");
                client.println(".onoffswitch-inner:after { content: 'OFF'; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; }");
                client.println(".onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; }");
                client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }");
                client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }");
            client.println("</style>");

            //Javascript Function
            client.println("<script>");
                client.println("function LEDswitch(){");
                    client.println("var LEDswitchCheck = document.getElementById('myonoffswitch').checked;");

                    client.println("if(LEDswitchCheck){");
                        client.println("window.location.href = '/H';");
                    client.println("}");
                    client.println("else {");
                        client.println("window.location.href = '/L';");
                    client.println("}");
                client.println("}");
                client.println("function loadNum() {");
                    client.println("setInterval(sendNum, 5000);");
                client.println("}");
                client.println("function sendNum() {");
                    client.println("var request = new XMLHttpRequest();");
                    client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                            client.println("if (this.status == 200) {");
                                client.println(testNum);
                            client.println("}");
                        client.println("}");
                    client.println("};");
                    client.println("request.open('GET', '', true);");
                    client.println("request.send();");
                client.println("}");
            client.println("</script>");

        client.println("</head>");
        client.println("<body style='background-color:#558C89;' onload=\"loadNum()\">");
            client.println("<div style='background-color:#74AFAD;'>");
                client.println("<h1 style='text-decoration: underline;'>Adafruit HUZZAH ESP8266</h1>");
            client.println("</div>");

    }
    if (c == '\n') {
      // you're starting a new line
      currentLineIsBlank = true;

      // if the current line is blank, you got two newline characters in a row.
      // that's the end of the client HTTP request, so send a response:
      if (currentLine.length() == 0) {
        client.println("<div style='background-color:#74AFAD;'>");
            client.println("<h2 style='color: red;'>LED Controls</h2>");

        // The HTTP response ends with another blank line:
        client.println();

                        client.println("<div class='onoffswitch'>");

                            if (LEDstatus == "on") 
                            {
                                client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' checked='checked' onclick='LEDswitch()'>");


                            } //end if
                            else if(LEDstatus == "off")
                            {
                                client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' onclick='LEDswitch()'>");
                            } //end else

                            client.println("<label class='onoffswitch-label' for='myonoffswitch'>");
                                client.println("<span class='onoffswitch-inner'></span>");
                                client.println("<span class='onoffswitch-switch'></span>");
                            client.println("</label>");
                        client.println("</div>");
                    client.println("</div>"); 
                    client.println("<div style='background-color:#74AFAD;'>");
                        client.println("<h2 style='color: green;'>Num Refresh Test</h2>");
                        client.println("<div id='demo'><h2>Let AJAX change this text</h2></div>");
                        //client.println("<button type='button' onclick='loadNum()'>Change Content</button>");
                    client.println("</div>");
                client.println("</div>");
            client.println("</body>");
        client.println("</html>");
        break;
      } //end if

      else
      {
          currentLine = ""; 
      } //end else
    }
    else if (c != '\r') {
      // you've gotten a character on the current line
      currentLineIsBlank = false;

      currentLine += c;
    }

    // Check to see if the client request was "GET /H" or "GET /L":
    if (currentLine.endsWith("GET /H")) {
      digitalWrite(LED_PIN, HIGH);               // GET /H turns the LED on
      LEDstatus = "on";
    } //end if (/H)

    if (currentLine.endsWith("GET /L")) {
      digitalWrite(LED_PIN, LOW);                // GET /L turns the LED off
      LEDstatus = "off";
    } //end if (/L)

  } //end if (client available)
} //end while
// give the web browser time to receive the data
delay(1);

// close the connection:
client.stop();
Serial.println("client disconnected");
} //end if (client)
} //end void loop

Answer 1

好吧，我最终以此为基础，并得出了结论： http : //www.esp8266.com/viewtopic.php? f=29&t=7059

如何在由Arduino服务的ESP8266 HTML网页上使用ajax和setInterval

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-19 13:18:14

如何在由Arduino服务的ESP8266 HTML网页上使用ajax和setInterval

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-19 13:18:14

解决方案1
0 已采纳 2016-04-19 13:18:14