ESP8266 WebServer sends empty or not completed responses

Question

My web server running on ESP8266, does not work properly.

If I request for some page server returns empty or not completed response. HTML page will not load, it stays loading with white screen. I tried to check page using inspect element function in my browser and I found out that in my page is only head and body is missing. Sometimes HTML loads correctly but without CSS or JS and in console is error Failed to load resource: net::ERR_EMPTY_RESPONSE.

Sometimes server is not responding at all. Browser shows error Cannot reach host.

I have to mention that this is happends after some time when I reset my ESP and For example this is happening for me but for someone else from other network its working properly. Or if I connect to proxy server throught VPN(Some random Chrome Estension I am using Touch VPN) it works good.

I am trying to fix this problem several days but I have not found any working solution. I have stored resources in included *.h files.

Here is code:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <ESP8266mDNS.h>

#include "console.h"
/*#include "mines.h"*/
#include "tictactoe.h"
#include "protools.h"
#include "main.h"
#include "translator.h"

#define L_GREEN 2
#define L_YELLOW 0
#define L_ORANGE 4
#define L_RED 5

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

int requests = 0;
String IPs = "[";

IPAddress staticIP86_10(192,168,0,115);
IPAddress gateway86_10(192,168,0,1);
IPAddress subnet86_10(255,255,255,0);

ESP8266WebServer server(80); //Server on port 80

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "1.sk.pool.ntp.org", 60*60, 60*1000);

//===============================================================
// Game Data
//===============================================================

/*String ticPlayer1 = "";
String ticPlayer2 = "";
String ticClick = "-1";
int ticReset = 0;*/

//===============================================================
// LEDs
//===============================================================
void LEDblink(int pin) {
  requests++;
  digitalWrite(pin, HIGH);
  delay(10);
  digitalWrite(pin, LOW);
}
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleNotFound(){
  if(server.uri().indexOf(".php")>-1) {
    Serial.print("404 "+server.uri()+": "+server.client().remoteIP().toString()+" (Blocked)\n");
    return;
  }
  Serial.print("404 "+server.uri()+": "+server.client().remoteIP().toString()+"\n");
  String s = HTML_Pro_notFound;
  server.send(404, "text/html", s);

  //String c = "{\"uptime\":"+String(millis(),DEC)+",\"req\":"+String(requests)+",\"ips\":"+IPs+"]}";
  //server.send(200, "text/plane", c);
  LEDblink(L_YELLOW);
}
void proMainCSS(){
  String s = CSS_Pro_main;
  server.send(200, "text/css", s);
  LEDblink(L_ORANGE);
}
void handleRoot(){
  Serial.print("Root: "+server.client().remoteIP().toString()+"\n");
  String s = HTML_Pro_page;
  server.send(200, "text/html", s);
  LEDblink(L_YELLOW);
}
void proPageCSS(){
  String s = CSS_Pro_page;
  server.send(200, "text/css", s);
  LEDblink(L_ORANGE);
}
void proPageJS(){
  String ip = server.client().remoteIP().toString();
  if(IPs=="["){
    IPs+="{\"time\":"+String(timeClient.getEpochTime(),DEC)+",\"ip\":\""+ip+"\"}";
  }else{
    IPs+=",{\"time\":"+String(timeClient.getEpochTime(),DEC)+",\"ip\":\""+ip+"\"}";
  }
  String s = JS_Pro_page;
  server.send(200, "text/javascript", s);
  LEDblink(L_ORANGE);
}
//---
void proTranslatorHTML() {
  Serial.print("Translator: "+server.client().remoteIP().toString()+"\n");
  String s = HTML_Pro_translator;
  server.send(200, "text/html", s);
  LEDblink(L_YELLOW);
}
void proTranslatorCSS() {
  String s = CSS_Pro_translator;
  server.send(200, "text/css", s);
  LEDblink(L_ORANGE);
}
void proTranslatorJS() {
  String s = JS_Pro_translator;
  server.send(200, "text/javascript", s);
  LEDblink(L_ORANGE);
}
//---
//===============================================================
void reboot() {
 server.send(200, "text/plane", "true");
 LEDblink(L_RED);
 digitalWrite(15, LOW);
 digitalWrite(0, HIGH);
 digitalWrite(2, HIGH);
 ESP.restart();
}
void proLoginHTML() {
 Serial.print("Login: "+server.client().remoteIP().toString()+"\n");
 String c = HTML_Pro_login;
 server.send(200, "text/html", c);
 LEDblink(L_YELLOW);
}
void proLoginCSS() {
 String c = CSS_Pro_login;
 server.send(200, "text/css", c);
 LEDblink(L_ORANGE);
}
void admin() {
 if(!server.hasArg("user") || !server.hasArg("pass") || server.arg("user") == NULL || server.arg("pass") == NULL || server.arg("request")=="login") {
    String expire = "";
    if(server.arg("remember")=="on"){expire="30";}else{expire="0";}
    server.send(200, "text/html", "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>ProTools.tk | Please Wait</title><link rel='stylesheet' type='text/css' href='/main.css'><script src='/cookies.js'></script></head><body style='background:#2d2d2d'><form class='center' action='/admin' method='post' style='display:none;'><input class='a' type='text' name='user'><input class='a' type='password' name='pass'><input class='a' type='text' name='request' value='panel'><button class='a' type='submit'></button></form><div class='loading center' style='margin-top:150px'></div><script type='text/javascript'>var u = '"+server.arg("user")+"';var p = '"+server.arg("pass")+"';if(u.length > 7 && p.length > 7) {delCookie('user');delCookie('pass');setCookie('user', u, "+expire+");setCookie('pass', p, "+expire+");}if(getCookie('user') && getCookie('user')) {var a=document.getElementsByClassName('a');a[0].value=getCookie('user');a[1].value=getCookie('pass');a[3].click();}else{location.replace('/login');}</script></body></html>");
    //server.sendHeader("Location","/login");
    //server.send(303);
 }
 if((server.arg("user")=="***")&&(server.arg("pass")=="***")) {
   if(server.arg("request")=="data") {
     String c = "{\"uptime\":"+String(millis(),DEC)+",\"req\":"+String(requests)+",\"ips\":"+IPs+"]}";
     server.send(200, "text/json", c);
   }
   else if(server.arg("request")=="panel") {
     server.send(200, "text/plane", "Admin panel here");
   }
   else {
    server.send(400, "text/plane", "400 Bad Request");
   }
 }
 else{
   server.sendHeader("Location","/login");
   server.send(303);
 }
 LEDblink(L_RED);
}
void proCookieJS() {
 String s = JS_Pro_cookie;
 server.send(200, "text/javascript", s);
 LEDblink(L_ORANGE);
}
void console() {
 Serial.print("Console :"+server.client().remoteIP().toString()+"\n");
 String s = HTML_console;
 server.send(200, "text/html", s);
 LEDblink(L_ORANGE);
}
void buspage() {
 String s = HTML_buspage;
 server.send(200, "text/html", s);
 LEDblink(L_ORANGE);
}
//===============================================================
/*void minesPage() {
 String s = HTML_mines;
 server.send(200, "text/html", s);
 LEDblink(L_YELLOW);
}
void minesScript() {
 String s = JS_mines;
 server.send(200, "text/javascript", s);
 LEDblink(L_YELLOW);
}
void minesStyle() {
 String s = CSS_mines;
 server.send(200, "text/css", s);
 LEDblink(L_YELLOW);
}*/

//===============================================================

/*void ticPage() {
 String s = HTML_tictactoe;
 server.send(200, "text/html", s);
 LEDblink(L_YELLOW);
}
void ticScript() {
 String s = JS_tictactoe;
 server.send(200, "text/javascript", s);
 LEDblink(L_YELLOW);
}
void ticStyle() {
 String s = CSS_tictactoe;
 server.send(200, "text/css", s);
 LEDblink(L_YELLOW);
}

void ticData() {
 Serial.print("TicTacToe: "+server.client().remoteIP().toString()+"\n");
 String user = server.arg("user");
 String clicked = server.arg("click");
 String request = server.arg("request");
 String leave = server.arg("leave");
 if(user != "") {
  if(user == "get") {
   server.send(200, "text/plane", "{\"Player1\":\""+ticPlayer1+"\", \"Player2\":\""+ticPlayer2+"\"}");
  }
  else if(ticPlayer1 == "") {
   ticPlayer1 = user;
   server.send(200, "text/plane", "player1");
  }
  else if(ticPlayer2 == "") {
   ticPlayer2 = user;
   server.send(200, "text/plane", "player2");
  }
  else {
   server.send(200, "text/plane", "Full");
  }
  if(ticPlayer1 != "" && ticPlayer2 != "") {
   ticClick = "0";
  }
  digitalWrite(L_ORANGE,HIGH);
  delay(500);
  digitalWrite(L_ORANGE,LOW);
 }
 else if(leave != "") {
  if(leave == ticPlayer1) {
   ticPlayer1 = "";
  }
  else if(leave == ticPlayer2) {
   ticPlayer2 = "";
  }
  ticClick = "-1";
  server.send(200, "text/plane", leave+" left");
 }
 else if(clicked != "") {
  ticClick = clicked;
  server.send(200, "text/plane", "OK: "+ticClick);
 }
 else if(request != "") {
  if(request == "checkClicked") {
   server.send(200, "text/plane", ticClick);
  }
  if(request == "reset") {
   ticReset++;
   if(ticReset == 2) {
    ticPlayer1 = "";
    ticPlayer2 = "";
    ticClick = "-1";
    ticReset = 0;
    server.send(200, "text/plane", "Reseted");
   }
   else {
    server.send(200, "text/plane", "Verification required");
   }
  }
 }
 LEDblink(L_YELLOW);
}*/
//==============================================================
//                  SETUP
//==============================================================
void setup(void){
  Serial.begin(9600);

  pinMode(L_GREEN,OUTPUT);
  pinMode(L_YELLOW,OUTPUT);
  pinMode(L_ORANGE,OUTPUT);
  pinMode(L_RED,OUTPUT);

  digitalWrite(L_RED, HIGH);

  WiFi.hostname("ESP8266");

  WiFi.begin(ssid, password); 

  MDNS.begin("ESP8266");
  MDNS.addService("http", "tcp", 80);

  digitalWrite(L_RED, LOW);

  digitalWrite(L_ORANGE, HIGH);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  digitalWrite(L_ORANGE, LOW);
  digitalWrite(L_YELLOW, HIGH);

  WiFi.config(staticIP86_10, gateway86_10, subnet86_10);

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/main.css", proMainCSS);
  server.on("/page.css", proPageCSS);
  server.on("/page.js", proPageJS);
  server.on("/login/style.css", proLoginCSS);
  server.on("/cookies.js", proCookieJS);

  server.on("/translator", proTranslatorHTML);
  server.on("/translator/style.css", proTranslatorCSS);
  server.on("/translator/script.js", proTranslatorJS);

  server.on("/login", proLoginHTML);
  server.on("/admin", admin);
  server.on("/reboot", reboot);
  server.on("/console", console);
  server.on("/buspage", buspage);

  /*server.on("/minesweeper", minesPage);
  server.on("/minesweeper/script.js", minesScript);
  server.on("/minesweeper/style.css", minesStyle);

  server.on("/tictactoe", ticPage);
  server.on("/tictactoe/script.js", ticScript);
  server.on("/tictactoe/style.css", ticStyle);
  server.on("/tictactoe/data", ticData);*/

  server.onNotFound(handleNotFound);


  server.begin();
  timeClient.begin();
  Serial.println("HTTP server started");
  digitalWrite(L_YELLOW, LOW);
  digitalWrite(L_GREEN, HIGH);
}
//==============================================================
//                     LOOP
//==============================================================
void loop(void){
  timeClient.update();
  server.handleClient();
}

I have there webpage and some "games" which I made as school project.

Inluded files are in this fromat:

const char Some_Name[] PROGMEM = R"=====(
some(code);
)=====";

May it be caused by large source code? Or large included files? I also split it to several files(main.h, console.h, ...) but it did not help.

How to fix that problem? I have no clue what I should do or what I am doing wrong.

Answer 1

It is better to use the SPIFFS file system for static files of the web site. You can have the files in data subfolder of your project folder and upload SPIFFS file system with the SPIFFS upload IDE plugin.