Arduino-esp32: FSBrowser problem

[pipi61]

Hardware:

Board: ESP32 wroom32
Core Installation/update date: 11/11/2019
IDE name: Arduino IDE 188
Flash Frequency: 80Mhz
PSRAM enabled: no
Upload Speed: 115200
Computer OS: Windows 81

Description:

Original example librariesWebServerexamplesFSBrowser not working properly in the chrome and the maxthon browser, the left filelist window empty,
but correct in firefox
http://192.168.0.110/edit
in browser development console error message:
Failed to load resource: net::ERR_CONNECTION_RESET list?dir=/:1

attach screenshot

Thank You!
Istvan

[stickbreaker]

@pipi61 post the console output of the ESP32, the FSBrower sketch will output error messages through the Serial connection.

[pipi61]

In fsbrowser serial out not contain error message, only information text
I download today the arduino-esp32

from github the result is the same
attach screenshot
Thank

[pipi61]

I made a simple program for presentation
`//esp32 webserver test

ifdef ESP32

include

include

endif

ifdef ESP8266

include

include

endif

//#include

const char PAGE_index[] PROGMEM = R"=====(

none1

none2

none3

)=====";

const char PAGE_demojs1[] PROGMEM = R"=====(
function setd1()
{ document.getElementById("demo1").innerHTML = "Hello JavaScript 1"; }
)=====";

const char PAGE_demojs2[] PROGMEM = R"=====(
function setd2()
{ document.getElementById("demo2").innerHTML = "Hello JavaScript 2"; }
)=====";

const char PAGE_demojs3[] PROGMEM = R"=====(
function setd3()
{ document.getElementById("demo3").innerHTML = "Hello JavaScript 3"; }
)=====";

ifdef ESP32

WebServer server(80); // The Webserver

endif

ifdef ESP8266

ESP8266WebServer server(80); // The Webserver

endif

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

void setup(void)
{
byte ii;
Serial.begin(115200);
for (ii = 3; ii; ii--)
{
Serial.println(ii);
delay(1000);
}

//WIFI INIT
Serial.printf("Connecting to %sn", ssid);
// if (String(WiFi.SSID()) != String(ssid))
// {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
// }

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

Serial.print("nConnected! IP address: ");
Serial.println(WiFi.localIP());

Serial.println("SETUPWebserver");
server.on("/demoscript1.js",
{
Serial.println("demoscript1.js");
//server.send(200, "application/javascript", PAGE_demojs1);
//server.send_P(200, "application/javascript", PAGE_demojs1);
server.send_P(200, "application/javascript", PAGE_demojs1, sizeof(PAGE_demojs1) - 1);
} );

server.on("/demoscript2.js",
{
Serial.println("demoscript2.js");
//server.send(200, "application/javascript", PAGE_demojs2);
//server.send_P(200, "application/javascript", PAGE_demojs2);
server.send_P(200, "application/javascript", PAGE_demojs2, sizeof(PAGE_demojs2) - 1);
} );

server.on("/demoscript3.js",
{
Serial.println("demoscript3.js");
//server.send(200, "application/javascript", PAGE_demojs3);
//server.send_P(200, "application/javascript", PAGE_demojs3);
server.send_P(200, "application/javascript", PAGE_demojs3, sizeof(PAGE_demojs3) - 1);
} );

server.on("/",
{
Serial.println("/");
server.send_P(200, "text/html", PAGE_index);
} );

server.on("/index.html",
{
Serial.println("/index.html");
server.send_P(200, "text/html", PAGE_index);
} );

server.onNotFound(
{
Serial.print("Page Not Found ");Serial.println(server.uri());
server.send(400, "text/html", "Page not Found");
} );

server.begin();
Serial.println("HTTP server started");

Serial.printf("FreeMem:%drn", ESP.getFreeHeap());
Serial.println("* SETUP() END **");

}//setup

void loop(void)
{
server.handleClient();
}//loop end
`
This run on esp8266 and esp32.
On esp8266 works correctly.
On esp32, the (chrome and maxthon) browser only gets the first demoscript1.js and executes it, but another js does not load.
The following error message appears in the browser development console:
Failed to load resource: net::ERR_CONNECTION_RESET demoscript2.js:1
Failed to load resource: net::ERR_CONNECTION_RESET demoscript3.js:1

[a-c-sreedhar-reddy]

Hi @pipi61. your code has some compilation issue.

[pipi61]

Yes, I'm sorry. I used the insert code tag, copy-paste, then bad results. I attached the test.ino file to the ZIP file
test.zip
Thank You

[stale[bot]]

[STALE_SET] This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs. Thank you for your contributions.

[stale[bot]]

[STALE_DEL] This stale issue has been automatically closed. Thank you for your contributions.

[marion91]

I am also having this issue in Chrome with just the original script out of the box. The don't show, though when inspected in chrome, the files themselves look complete. Chrome reads " Failed to load resource: net::ERR_CONNECTION_RESET list?dir=/:1 "

The file received as "list?dir=/:1":

[{"type":"file","name":"Background_1080.jpg"},{"type":"file","name":"Background_320x240.bmp"},{"type":"file","name":"Background_320x240.jpg"},{"type":"file","name":"Button_Rect.bmp"},{"type":"file","name":"Button_rect.jpg"},{"type":"file","name":"Button_Rect_Highlight.bmp"},{"type":"file","name":"edit.htm.gz"},{"type":"file","name":"favicon.ico"},{"type":"file","name":"graphs.js.gz"},{"type":"file","name":"index.htm"},{"type":"file","name":"MyFont.h"},{"type":"file","name":"NotoSansBold15.vlw"},{"type":"file","name":"NotoSansBold36.vlw"},{"type":"file","name":"TouchCalData3"},{"type":"file","name":"wifi.txt"},{"type":"file","name":"Calibri-12.vlw"},{"type":"file","name":"Rust.bmp"},{"type":"file","name":"RUST_Button.bmp"},{"type":"file","name":"RUST_Button_Highlight.bmp"},{"type":"file","name":"PORTAL_Button.bmp"},{"type":"file","name":"PORTAL_Button_Highlight.bmp"},{"type":"file","name":"GameProfiles.txt"}]

[pipi61]

      if (_currentClient.available()) {
        if (_parseRequest(_currentClient)) {
          // because HTTP_MAX_SEND_WAIT is expressed in milliseconds,
          // it must be divided by 1000
          _currentClient.setTimeout(HTTP_MAX_SEND_WAIT / 1000);
          _contentLength = CONTENT_LENGTH_NOT_SET;
          _handleRequest();

          /* this comment out for chrome/maxthon browsers
          if (_currentClient.connected()) {
            _currentStatus = HC_WAIT_CLOSE;
            _statusChange = millis();
            keepCurrentClient = true;
          } */
        }

Try this comment out in webserver.cpp

[marion91]

It works every time now! Thank you!!

Fixed file attached:
WebServer.zip

[Chasx]

This issue has bugged me for a couple of days! I tried to serve a Vue.js application from SPIFFS on the ESP32. It works flawlessly on Firefox but on Chrome it only loads a couple of the files and the rest fails with 'connection reset'. Tried all kinds of stuff like using FFAT instead (horrible broken image generators) and trying WebServer-Async (but that one regularly restarts my ESP because it seems it cannot deal with SoftwareSerial running at the same time).

Eventually Google brought me here and I tried to comment out the lines as suggested above, and boom, all is OK!

But _why_ does commenting out _help_ Chrome to function properly? Aren't the lines important after all? Why doesn't it affect Firefox?

[me-no-dev]

this is some legacy code from 8266. I wonder what was the purpose of that code?

[mrWheel]

Is this fix going to make it to the master branch??

[srochapimenta]

November 05 2020 - This bug takes me a lot of time, same problem here ( works ok with ESP8266, fails with ESP32 using same sketch with a little diferente as #if defined ESP32/8266 ), after comment lines, works fine! why not fixed at this moment?

[cotestatnt]

Please fix the master branch! I've lost so much time (like a lot of other people) with this issue.

[me-no-dev]

done. https://github.com/espressif/arduino-esp32/commit/378b6ac0326008577bc13342f9cd093b5d62f388

[resolvethis]

How do I get this on my ESP32? Can I update the Webserver package in Arduino IDE somehow?

[lbernstone]

Fixed in development release
https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md

[resolvethis]

It seems I already have this version... When I look at the source in C:UsersmvrmAppDataLocalArduino15packagesesp32hardwareespressifesp32librariesWebServersrcWebServer.cpp then I see this, with the commented part at line 316:

case HC_WAIT_READ:
  // Wait for data from client to become available
  if (_currentClient.available()) {
    if (_parseRequest(_currentClient)) {
      // because HTTP_MAX_SEND_WAIT is expressed in milliseconds,
      // it must be divided by 1000
      _currentClient.setTimeout(HTTP_MAX_SEND_WAIT / 1000);
      _contentLength = CONTENT_LENGTH_NOT_SET;
      _handleRequest();

  // Fix for issue with Chrome based browsers: https://github.com/espressif/arduino-esp32/issues/3652
  //           if (_currentClient.connected()) {
  //             _currentStatus = HC_WAIT_CLOSE;
  //             _statusChange = millis();
  //             keepCurrentClient = true;
  //           }
          }
        } else { // !_currentClient.available()
          if (millis() - _statusChange <= HTTP_MAX_DATA_WAIT) {
            keepCurrentClient = true;
          }
          callYield = true;
        }

Though I still have the issue when serving multiple large files (Angular app) from an SD card.
It does not seem to be fixed for me...

Here are some parts of the code I wrote in Arduino IDE 1.8.9.
My esp board has an esp-wroom-32 module.

 ...
 #include <WebServer.h>
 WebServer server(80); 
 ...

 void setup(void) {
    ...
    server.on("/", handle_root);
    server.onNotFound(handleNotFound);
    ...
 }

other:

void handle_root() {
   sdCard.serve("/index.html", &server);
}

void handleNotFound() {
    if (!sdCard.serve(server.uri(), &server)) {
       Serial.println("File not found");
       Serial.println(server.uri());
       server.send(404, "text/plain", "not found");
    }
 }

sdCard.serve method:

 #include "FS.h"           //To access the file system 
 #include "SD.h"          //To access the SD Card

 bool serve(String path, WebServer* server) {
      if (SD.exists(path)) {
         Serial.print("Serving: ");
         Serial.print(path);
         File file = SD.open(path, FILE_READ);
         int fsizeDisk = file.size();
         server->sendHeader("Content-Length", (String)(fsizeDisk));
         server->streamFile(file, this->getContentType(path, server));
         file.close();
         Serial.print(" Done.");
         return true;
      } else {
         Serial.print("Not found: ");
         Serial.println(path);
         return false;
      }
 }

This is my complete sd-card.cpp file which is used to serve static files:

#include "FS.h"              //To access the file system 
#include "SD.h"          //To access the SD Card
#include <WebServer.h>  // To stream files to the client

class SDCard {
    public:
        bool begin() {
        if (!SD.begin(22)) { //initialize SD Card
            Serial.println("SD Card Mount Failed!!");
            return false;
        }
        uint8_t cardType = SD.cardType();  //get sd card type
        if (cardType == CARD_NONE) { //check if the sd card presence
          Serial.println("No SD Card attached");
          return false;
        }
        Serial.println("SD Card Ready!!");
        return true;
      }

      File read(const char* path) {
        File file = SD.open(path, FILE_READ);
        while (file.available()) {
          Serial.write(file.read());
        }
        Serial.println();
        return file;
      }

      bool serve(String path, WebServer* server) {
        if (SD.exists(path)) {
          Serial.print("Serving: ");
          Serial.print(path);
          File file = SD.open(path, FILE_READ);
          int fsizeDisk = file.size();
          server->sendHeader("Content-Length", (String)(fsizeDisk));
          server->streamFile(file, this->getContentType(path, server));
          file.close();
          Serial.print(" Done.");
          return true;
        } else {
          Serial.print("Not found: ");
          Serial.println(path);
          return false;
        }
      }

    private:

      //This functions returns a String of content type
      String getContentType(String filename, WebServer* server) {
        if (server->hasArg("download")) { // check if the parameter "download" exists
          return "application/octet-stream";
        } else if (filename.endsWith(".htm")) {
          return "text/html";
        } else if (filename.endsWith(".html")) {
          return "text/html";
        } else if (filename.endsWith(".css")) {
          return "text/css";
        } else if (filename.endsWith(".js")) {
          return "application/javascript";
        } else if (filename.endsWith(".png")) {
          return "image/png";
        } else if (filename.endsWith(".gif")) {
          return "image/gif";
        } else if (filename.endsWith(".jpg")) {
          return "image/jpeg";
        } else if (filename.endsWith(".ico")) {
          return "image/x-icon";
        } else if (filename.endsWith(".xml")) {
          return "text/xml";
        } else if (filename.endsWith(".pdf")) {
          return "application/x-pdf";
        } else if (filename.endsWith(".zip")) {
          return "application/x-zip";
        } else if (filename.endsWith(".gz")) {
          return "application/x-gzip";
        }
        return "text/plain";
      }
};

What can I do to prevent these ERR_CONNECTION_RESET failures?