Webserver JSON ESP8266 no working

Projects Programming
1

Why can't my web server run?

// Import required libraries
#include <Arduino.h>
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <ArduinoJson.h>

//Timer to run Arduino code every 5 seconds
unsigned long previousMillis = 0;
unsigned long interval = 500;

int temp, pressure, range;
float lux;

String temp1 = "";
String pressure1 = "";
String range1 = "";
String lux1 = "";

// Timer variables
unsigned long lastTime = 0;  
unsigned long timerDelay = 500;

/* Put your SSID & Password */
const char* ssid = "Weather Station";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

void setup() {
  // Initialize Serial port
  Serial.begin(9600);
  while (!Serial) continue;

  if(SPIFFS.begin()==true) {
    Serial.println("SPIFFS initialised OK");
  }

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
}

void loop() {

  if(millis() - previousMillis >= interval) {
    previousMillis = millis();

    const size_t capacity = JSON_OBJECT_SIZE(128);
    DynamicJsonDocument doc(capacity);
    
    DeserializationError error = deserializeJson(doc, Serial);
    if (error) {
      Serial.print(F("deserializeJson() failed: "));
      Serial.println(error.c_str());
      return;
    }
    
    //serializeJson(doc, Serial);

    temp1 = doc["temperature"].as<String>();
    pressure1 = doc["pressure"].as<String>();
    range1 = doc["range"].as<String>();
    lux1 = doc["lux"].as<String>();

    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(SPIFFS, "/index.html", "text/html");
    });
  
    server.on("/assets/css/foundation.css", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(SPIFFS, "/assets/css/foundation.css", "text/css");
    });
  
    server.on("/assets/js/vendor.js", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(SPIFFS, "/assets/js/vendor.js", "text/js");
    });
  
    server.on("/assets/js/foundation.js", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(SPIFFS, "/assets/js/foundation.js", "text/js");
    });
    
    server.on("/temp", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send_P(200, "text/plain", temp1.c_str());
    });
    server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send_P(200, "text/plain", pressure1.c_str());
    });
    server.on("/lux", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send_P(200, "text/plain", lux1.c_str());
    });
    
    Serial.print("Recieved Temperature:  ");
    temp = doc["temperature"];
    Serial.println(temp);
    
    Serial.print("Recieved Pressure:  ");
    pressure = doc["pressure"];
    Serial.println(pressure);

    Serial.print("Recieved Range:  ");
    range = doc["range"];
    Serial.println(range);

    Serial.print("Recieved Lux:  ");
    lux = doc["lux"];
    Serial.println(lux);
    Serial.println("-----------------------------------------");

    server.begin();
    //end
  }
}

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to ESP Server</title>
    <link rel="stylesheet" href="assets/css/foundation.css">
  </head>
<body>

    <div class="grid-container text-center">
      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
          <h1>Welcome to ESP Server</h1>
        </div>
      </div>

      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
          <div class="grid-x grid-padding-x">
            <div class="large-12 medium-12 small-12 cell">
              <div class="callout">
                <h3>TEMPERATURE</h3>
                <div class="grid-x grid-padding-x">
                  <div class="large-12 medium-12 small-12 cell">
                    <p>SUHU UDARA<br />
                      <span id="temp">
                        %TEMP%
                      </span>
                        &deg;C
                    </p>
                  </div>
                  <div class="large-12 medium-12 small-12 cell">
                    <p>TEKANAN UDARA<br />
                      <span id="pressure">
                        %PRESSURE%
                      </span>
                        hPa
                    </p>
                  </div>
                  <div class="large-12 medium-12 small-12 cell">
                    <p>KECERAHAN<br />
                      <span id="lux">
                        %LUX%
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


<script>
  setInterval(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("temp").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/temp", true);
    xhttp.send();
  }, 500) ;
  setInterval(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("pressure").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/pressure", true);
    xhttp.send();
  }, 500) ;
  setInterval(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("lux").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/lux", true);
    xhttp.send();
  }, 500) ;
</script>
<script src="assets/js/vendor.js"></script>
<script src="assets/js/foundation.js"></script>
</body>
</html>
2

Place this in setup()

In setup() too.

In loop()

server.handleClient();

TIP: make this with websocket. No need to use an interval on the webpage. The moment the values change, the server push the new value over the websocket. You have accurate values with less data stream and a smoother webpage.

3

I have tried it and it works, now the problem is User exception (panic/abort/assert)

// Import required libraries
#include <Arduino.h>
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <ArduinoJson.h>

int temp, pressure, range;
float lux;

String temp1 = "";
String pressure1 = "";
int range1;
String rain = "";
float lux1;
String light = "";

// Timer variables
unsigned long lastTime = 0;  
unsigned long timerDelay = 20;

/* Put your SSID & Password */
const char* ssid = "Weather Station";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

void setup() {
  // Initialize Serial port
  Serial.begin(9600);
  while (!Serial) continue;

  if(SPIFFS.begin()==true) {
    Serial.println("SPIFFS initialised OK");
  }

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
}

void loop() {
  const size_t capacity = JSON_OBJECT_SIZE(128);
  DynamicJsonDocument doc(capacity);
  
  DeserializationError error = deserializeJson(doc, Serial);
  if (error) {
    Serial.print(F("deserializeJson() failed: "));
    Serial.println(error.c_str());
    return;
  }
  
  //serializeJson(doc, Serial);

  temp1 = doc["temperature"].as<String>();
  pressure1 = doc["pressure"].as<String>();
  range1 = doc["range"];
  switch (range1){
    case 0:
      rain = "HUJAN";
    break;
    case 1:
      rain = "PERINGATAN HUJAN";
    break;
    case 2:
      rain = "TIDAK HUJAN";
    break;
  }
  
  lux1 = doc["lux"];
  if(lux1 < 100){
    light = "GELAP";
  }
  else if(lux1 > 100){
    light = "TERANG";
  }

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.on("/assets/css/foundation.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/assets/css/foundation.css", "text/css");
  });

  server.on("/assets/js/vendor.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/assets/js/vendor.js", "text/js");
  });

  server.on("/assets/js/foundation.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/assets/js/foundation.js", "text/js");
  });
  
  server.on("/temp1", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", temp1.c_str());
  });
  server.on("/pressure1", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", pressure1.c_str());
  });
  server.on("/rain", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", rain.c_str());
  });
  server.on("/light", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", light.c_str());
  });
  
  Serial.print("Recieved Temperature:  ");
  temp = doc["temperature"];
  Serial.println(temp);
  
  Serial.print("Recieved Pressure:  ");
  pressure = doc["pressure"];
  Serial.println(pressure);

  Serial.print("Recieved Range:  ");
  range = doc["range"];
  Serial.println(range);

  Serial.print("Recieved Lux:  ");
  lux = doc["lux"];
  Serial.println(lux);
  Serial.println("-----------------------------------------");

  server.begin();
  //end
}