title: Issue loading files w/SPIFFS (ERR_CONTENT_LENGTH_MISMATCH)
body: <p>Alright so I've been looking into this for the past two days and I still feel like I'm getting nowhere. </p>
  
  <p>I recently started using the <strong>SPIFFS File System</strong> for <strong>Arduino</strong> development on an <strong>HUZZAH ESP8266</strong> like the <strong>FSBrowser.ino</strong> example, and while it's been great in terms of separating code, as my code continues to grow it has not been great in terms of stability. </p>
  
  <p>Ever since I began adding more and more javascript, I began to have errors pop up for various files, whether it's my HTML/CSS/JS, and the primary error I see is <strong>ERR_CONTENT_LENGTH_MISMATCH</strong>.</p>
  
  <p><img src="https://i.imgur.com/t1wPOFI.png" alt="primary error"></p>
  
  <pre><code>//File Read for File System
  bool handleFileRead(String path)
  {
    if(mySerial)  
      mySerial.println("handleFileRead: " + path);
    if(path.endsWith("/")) path += "index.htm";
    String contentType = getContentType(path);
    String pathWithGz = path + ".gz";
    if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path))
    {
  
  
      if(SPIFFS.exists(pathWithGz))
        path += ".gz";
      File file = SPIFFS.open(path, "r");
  
      if(mySerial)
          mySerial.println("TEST: " + path + " FILE OPEN: " + file.size());
  
      size_t sent = server.streamFile(file, contentType);
  
      if(mySerial)
          mySerial.println("TEST: " + path + " SIZE: " + file.size());
  
      file.close();
  
      if(mySerial)
          mySerial.println("TEST: " + path + " FILE CLOSE");
  
      return true;
    } //end if 
    return false;
  } //end function handleFileRead
  </code></pre>
  
  <p>So after that happened I began examining the handleFileRead() function that I copied from the FSBrowser.h example and after testing various print statements it seems the hangup occurs within this line: </p>
  
  <p><strong>size_t sent = server.streamFile(file, contentType);</strong></p>
  
  <pre><code>template&lt;typename T&gt; size_t streamFile(T &amp;file, const String&amp; contentType){
    setContentLength(file.size());
    if (String(file.name()).endsWith(".gz") &amp;&amp;
        contentType != "application/x-gzip" &amp;&amp;
        contentType != "application/octet-stream"){
      sendHeader("Content-Encoding", "gzip");
    }
    send(200, contentType, "");
    return _currentClient.write(file, HTTP_DOWNLOAD_UNIT_SIZE);
  }
  </code></pre>
  
  <p>So from there, I went into <strong>ESP8266WebServer.h</strong> and found the <strong>streamFile()</strong> function. Once inside this function, I discovered this line: </p>
  
  <p><strong>return _currentClient.write(file, HTTP_DOWNLOAD_UNIT_SIZE);</strong></p>
  
  <p>From this I deduced two things: </p>
  
  <ul>
  <li>There is a download limitation capping at HTTP_DOWNLOAD_UNIT_SIZE (which is defined at 1460). </li>
  <li>This function calls another function within the <strong>WiFiClient</strong> class called <strong>write()</strong>. </li>
  </ul>
  
  <p>So I followed the trail to this function: <strong>size_t WiFiClient::write(const uint8_t *buf, size_t size).</strong></p>
  
  <pre><code>size_t WiFiClient::write(const uint8_t *buf, size_t size)
  {
  
      SoftwareSerial mySerial(12,13); 
  
      mySerial.begin(115200);
  
      if(mySerial)
      {
          mySerial.print("Size: ");
          mySerial.println(size);
      }
  
      if (!_client || !size)
      {
          if(mySerial)
              mySerial.println("FAILURE");
  
          return 0;
      }
  
          if(mySerial)
              mySerial.println("SUCCESS");
  
      return _client-&gt;write(reinterpret_cast&lt;const char*&gt;(buf), size);
  }
  </code></pre>
  
  <p>Now this doesn't quite match because the first parameter of the write() function that was called is of type <strong>File</strong>, while the first parameter of this function is uint8_t, but I placed some print statements within here nonetheless and they execute as the files are being loaded so I believe I've found the correct function. </p>
  
  <p>However, now I'm at a loss as to how to continue fixing the problem from here, since there is only a recursive call and the error seems to occur because the culprit file doesn't finish loading (at least according to chrome debugger's network tab)</p>
  
  <p><img src="https://i.imgur.com/DWsNNAe.png" alt="debugger network tab"></p>
  
  <p>As you can see, the style.css file is listed as being <strong>3 kilobytes</strong>, which is of course wrong: my css file is <strong>27 kilobytes</strong>. </p>
  
  <p>So it appears that there's an issue loading files (this is not exclusive to the css file, it has happened with my javascript files as well and appears to be random). I have tried minifying all the files and it hasn't fixed the issue; so I could really use some help determining how to fix this.</p>
  
  <p>Now I received some advice from another source to try using this library, which is a modified version of the <strong>FSBrowser</strong> code: <a href="https://github.com/me-no-dev/ESPAsyncWebServer" rel="nofollow noreferrer">https://github.com/me-no-dev/ESPAsyncWebServer</a> </p>
  
  <p>At first this seemingly had fixed all my problems. The code was running stable with none of the previous issues popping up. But since switching to that library, I've run into a myriad of new issues: </p>
  
  <p><img src="https://i.imgur.com/VPZHLuy.png" alt="new issues"> </p>
  
  <p>And the strangest thing happened, where it appears some of the code was missing?</p>
  
  <p><img src="https://i.imgur.com/IPaFY0N.png" alt="missing code"> </p>
  
  <p>If you look at the red highlighted line in that photo, you can see that in the middle of the removeClass() statement, it stops spelling out the class (which is "deactiveSect") and starts a completely different if statement further down in the code.</p>
  
  <p>And yet here's the same portion of code on the server currently:</p>
  
  <p><img src="https://i.imgur.com/3ifm4js.png" alt="code on server"> </p>
  
  <p>You can see it seemingly merged lines 66 and 70. </p>
  
  <p>So while the version of the FSBrowser code that I was using couldn't handle the level of code I was working with, I'm failing to see how I can afford to use this modified library if this myriad of issues keeps occurring.</p>
  
  <p>Here's the source for the rest of my code (with the original FSBrowser library):</p>
  
  <p><strong>Primary ino file</strong></p>
  
  <pre><code>//Header File
  #include "HHIO_Portal.h"
  
  //Function used to verify incoming information from the teensy to the wifi card via the communication protocol
  void recInfoWifi()
  {
      /*
      ===============================
      COMMUNICATION PROTOCOL - Removed due to post size limit
      ===============================
      */
  
  } //end comProtocolWifi
  
  //Function used to send information to the teensy in order to control the HHIO PTT
  void sendInfoWifi()
  {
      unsigned long currTime = millis();
  
      //SEND
      if(currTime - prevTimeTest &gt; testInterval)   
      {
          prevTimeTest = currTime; 
  
          //Test Message
          messageLength = 3;
          subsys = SUBSYS_DBG;
  
          messageContent = wifiCounter; 
  
          //Teensy Console
          Serial.write(som);
          Serial.write(messageLength);
          Serial.write(subsys);
          Serial.write(messageContent);
          Serial.write(eom);
  
          wifiCounter++;
  
      } //end if (RECEIVE INFO)
  } //end function sendInfoWifi
  
  void setup()
  { 
    //Initiate Serial connection to Teensy
    Serial.begin(115200);
  
    //This is for debugging/housekeeping (And all console messages that use mySerial as opposed to Serial)
    mySerial.begin(115200);
  
    /*
    ===============================
    FILE SYSTEM
    ===============================
    */
    SPIFFS.begin();
    {
      Dir dir = SPIFFS.openDir("/");
      while (dir.next()) {    
        String fileName = dir.fileName();
        size_t fileSize = dir.fileSize();
        if(mySerial)
          mySerial.printf("FS File: %s, size: %s\n", fileName.c_str(), formatBytes(fileSize).c_str()); 
      } //end while
          if(mySerial)
              mySerial.printf("\n"); 
    } //end SPIFFS BEGIN  
  
    /*
    ===============================
    WIFI INIT
    ===============================
    */
    if(mySerial)
      mySerial.printf("Connecting to %s\n", ssid); 
  
    //Make the initial Wifi connection
    if (String(WiFi.SSID()) != String(ssid)) {
      WiFi.begin(ssid, password);
    } //end if
  
   //Wait for the Wifi to finish connecting
    while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      if(mySerial)
        mySerial.print("."); 
    } //end while
  
    //IP Address for webpage
    if(mySerial)
    {
        mySerial.println(""); 
        mySerial.print("Connected! IP address: "); 
        mySerial.println(WiFi.localIP()); 
    } //end if
  
    //Might not need this
    MDNS.begin(host);
  
    //Hostname for webpage
    if(mySerial)
    {
      mySerial.print("Open http://"); 
      mySerial.print(host); 
      mySerial.println(".local/edit to see the file browser"); 
    } //end if
  
  
    /*
    ===============================
    SERVER INIT
    ===============================
    */
    //list directory
    server.on("/list", HTTP_GET, handleFileList);
    //load editor
    server.on("/edit", HTTP_GET, [](){
      if(!handleFileRead("/edit.htm")) 
          server.send(404, "text/plain", "FileNotFound");
    });
    //create file
    server.on("/edit", HTTP_PUT, handleFileCreate);
    //delete file
    server.on("/edit", HTTP_DELETE, handleFileDelete);
    //first callback is called after the request has ended with all parsed arguments
    //second callback handles file uploads at that location
    server.on("/edit", HTTP_POST, [](){ server.send(200, "text/plain", ""); }, handleFileUpload);
  
    //called when the url is not defined here
    //use it to load content from SPIFFS
    server.onNotFound([](){
      if(!handleFileRead(server.uri()))
        server.send(404, "text/plain", "FileNotFound");
    });
  
    //get heap status, analog input value and all GPIO statuses in one json call
    server.on("/all", HTTP_GET, [](){
      String json = "{";
      json += "\"heap\":"+String(ESP.getFreeHeap());
      json += ", \"analog\":"+String(analogRead(A0));
      json += ", \"gpio\":"+String((uint32_t)(((GPI | GPO) &amp; 0xFFFF) | ((GP16I &amp; 0x01) &lt;&lt; 16)));
      json += "}";
      server.send(200, "text/json", json);
      json = String();
    });
  
    //Start the server
    server.begin();
  
    if(mySerial)  
      mySerial.println("HTTP server started"); 
  
    //Open the websocket connection in order to update the status values on the page without refreshing
    webSocket.begin();
    webSocket.onEvent(webSocketEvent);
  } //end Setup
  
  void loop()
  {   
      //SEND INFO TO TEENSY
      sendInfoWifi();
  
      //RECEIVE INFO FROM TEENSY
      recInfoWifi();
  
      //CONTINUE WEBSOCKET CONNECTION
      webSocket.loop();
  
      //SERVE WEBPAGE TO THE USER
      server.handleClient();
  } //end loop
  </code></pre>
  
  <p><strong>Primary ino header file</strong></p>
  
  <pre><code>//Initiate necessary libraries
  #include &lt;SoftwareSerial.h&gt;
  #include &lt;HHIO_Subsystems.h&gt;
  #include &lt;ESP8266WiFi.h&gt;
  //#include &lt;pfodESP8266WiFi.h&gt;
  #include &lt;WebSocketsServer.h&gt;
  //#include &lt;pfodESP8266WebServer.h&gt;
  #include &lt;ESP8266WebServer.h&gt;
  #include &lt;ESP8266mDNS.h&gt;
  #include &lt;FS.h&gt;
  
  //Serial connection for debugging (RX, TX)
  SoftwareSerial mySerial(12,13); 
  
  //SSID/Pass/Host
  const char* ssid = "*****";
  const char* password = "*****";
  const char* host = "esp8266fs";
  
  //Setup File System Connection
  MDNSResponder mdns;
  
  //Web Server
  ESP8266WebServer server(80);
  
  //File System 
  File fsUploadFile;
  
  //Websocket
  WebSocketsServer webSocket = WebSocketsServer(81);
  
  //Invalid Message
  uint8_t invalidMessageFlag = 0;
  
  //Counter for testing serial connection
  uint8_t wifiCounter = 0;
  
  //Com. Protocol Buffer
  uint8_t rxBuff[256];
  
  //Start of Message
  uint8_t som = 0x11;
  
  //End of Message
  uint8_t eom = 0x12;
  
  //Subsystem variables
  uint8_t subsys; 
  uint8_t receivedSubsys;
  
  //Read Byte for Com. Protocol
  uint8_t rx_byte = 0x00;
  
  //Message length variables
  uint8_t messageLength = 0;
  uint8_t receivedMessageLength = 0;
  
  //Message content variable
  uint8_t messageContent;
  
  //Variable to check incoming serial content
  uint8_t serialCurrent; 
  
  //Counter used for verifying the som variable
  int initialCounter = 0;
  
  //Message progression variables
  boolean messageBegun = false; 
  boolean messageInProgress = false;
  
  //Variables currently used to read status info coming from the teensy (CURRENTLY RANDOMIZED INFO)
  int currNumRefresh = 0;
  int currMicroC = 0;
  int currMicroD = 0;
  int currMicroE = 0;
  int currPressureC = 0; 
  int currPressureD = 0; 
  int currPressureE = 0; 
  int currValveStatusNumC = 0; 
  int currValveStatusNumD = 0; 
  int currValveStatusNumE = 0;
  int currFluid = 0;
  
  //Buffer for sending information from Arduino to the webpage
  char statusbuf[256]; 
  
  //Valve 1
  String valveStatusC = "Closed";
  String valveTubePropsC = "175px solid #00ADEF";
  String valveColorC = "red";
  
  //Valve 2
  String valveStatusD = "Closed";
  String valveTubePropsD = "175px solid #00ADEF";
  String valveColorD = "red";
  
  //Valve 3
  String valveStatusE = "Closed";
  String valveTubePropsE = "175px solid #00ADEF";
  String valveColorE = "red";
  
  //Variables for sending test message to teensy
  long prevTimeTest = 0;
  long testInterval = 5000;
  
  //Format Bytes
  String formatBytes(size_t bytes){
  
    if(mySerial)  
      mySerial.println("formatBytes FUNC");
  
    if (bytes &lt; 1024){
      return String(bytes)+"B";
    } //end if 
  
    else if(bytes &lt; (1024 * 1024)){
      return String(bytes/1024.0)+"KB";
    } //end else if
  
    else if(bytes &lt; (1024 * 1024 * 1024)){
      return String(bytes/1024.0/1024.0)+"MB";
    } //end else if
    else {
      return String(bytes/1024.0/1024.0/1024.0)+"GB";
    } //end else
  } //end function formatBytes
  
  //Content Type for File System
  String getContentType(String filename)
  {
    if(server.hasArg("download")) 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";
  
    if(mySerial)  
      mySerial.println("getContentType FUNC");
  
    return "text/plain";
  } //end function getContentType
  
  //File Read for File System
  bool handleFileRead(String path)
  {
    if(mySerial)  
      mySerial.println("handleFileRead: " + path);
    if(path.endsWith("/")) path += "index.htm";
    String contentType = getContentType(path);
    String pathWithGz = path + ".gz";
    if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path))
    {
  
  
      if(SPIFFS.exists(pathWithGz))
        path += ".gz";
      File file = SPIFFS.open(path, "r");
  
      if(mySerial)
          mySerial.println("TEST: " + path + " FILE OPEN: " + file.size());
  
      size_t sent = server.streamFile(file, contentType);
  
      if(mySerial)
          mySerial.println("TEST: " + path + " SIZE: " + file.size());
  
      file.close();
  
      if(mySerial)
          mySerial.println("TEST: " + path + " FILE CLOSE");
  
      return true;
    } //end if 
    return false;
  } //end function handleFileRead
  
  //File Upload for File System
  void handleFileUpload(){
    if(server.uri() != "/edit") return;
    HTTPUpload&amp; upload = server.upload();
    if(upload.status == UPLOAD_FILE_START)
    {
      String filename = upload.filename;
      if(!filename.startsWith("/")) 
          filename = "/"+filename;
      if(mySerial)
      {
          mySerial.print("handleFileUpload Name: "); 
          mySerial.println(filename);
      } //end if
  
      fsUploadFile = SPIFFS.open(filename, "w");
      filename = String();
    } //end if 
    else if(upload.status == UPLOAD_FILE_WRITE)
    {
      if(mySerial)
      {
          mySerial.print("handleFileUpload Data: "); 
          mySerial.println(upload.currentSize);
      } //end if
  
      if(fsUploadFile)
        fsUploadFile.write(upload.buf, upload.currentSize);
    } //end else if
    else if(upload.status == UPLOAD_FILE_END)
    {
      if(fsUploadFile)
        fsUploadFile.close();
      if(mySerial)
      {
          mySerial.print("handleFileUpload Size: "); 
          mySerial.println(upload.totalSize);
      } //end if
    } //end else if
  } //end function handleFileUpload
  
  //File Delete for File System
  void handleFileDelete()
  {
    if(server.args() == 0) return server.send(500, "text/plain", "BAD ARGS");
    String path = server.arg(0);
    if(mySerial)
      mySerial.println("handleFileDelete: " + path);
    if(path == "/")
      return server.send(500, "text/plain", "BAD PATH");
    if(!SPIFFS.exists(path))
      return server.send(404, "text/plain", "FileNotFound");
    SPIFFS.remove(path);
    server.send(200, "text/plain", "");
    path = String();
  } //end function handleFileDelete
  
  //File Create for File System
  void handleFileCreate()
  {
    if(server.args() == 0)
      return server.send(500, "text/plain", "BAD ARGS");
    String path = server.arg(0);
    if(mySerial)
        mySerial.println("handleFileCreate: " + path);
    if(path == "/")
      return server.send(500, "text/plain", "BAD PATH");
    if(SPIFFS.exists(path))
      return server.send(500, "text/plain", "FILE EXISTS");
    File file = SPIFFS.open(path, "w");
    if(file)
      file.close();
    else
      return server.send(500, "text/plain", "CREATE FAILED");
    server.send(200, "text/plain", "");
    path = String();
  } //end function handleFileCreate
  
  void handleFileList() 
  {
    if(!server.hasArg("dir")) 
    {
        server.send(500, "text/plain", "BAD ARGS"); 
        return;
    } //end if
  
    String path = server.arg("dir");
    if(mySerial)
      mySerial.println("handleFileList: " + path);
    Dir dir = SPIFFS.openDir(path);
    path = String();
  
    String output = "[";
    while(dir.next())
    {
      File entry = dir.openFile("r");
      if (output != "[") output += ',';
      bool isDir = false;
      output += "{\"type\":\"";
      output += (isDir)?"dir":"file";
      output += "\",\"name\":\"";
      output += String(entry.name()).substring(1);
      output += "\"}";
      entry.close();
    } //end while
  
    output += "]";
    server.send(200, "text/json", output);
  } //end function handleFileList
  
  //HHIO PTT POWER LED ON
  void switchPOWERon() {
  
      int powerStatusLength = 1;
  
      subsys = SUBSYS_1; 
  
      //Account for the end of message
      messageLength = powerStatusLength + 2;
  
      messageContent = 1;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchPOWERon
  
  //HHIO PTT POWER LED OFF
  void switchPOWERoff() {
  
      int powerStatusLength = 1;
  
      subsys = SUBSYS_1; 
  
      //Account for the end of message
      messageLength = powerStatusLength + 2;
  
      messageContent = 0;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchPOWERoff
  
  //PUMP POWER ON
  void pumpPOWERon() {
  
      int pumpPowerStatusLength = 1;
  
      subsys = SUBSYS_2; 
  
      //Account for the end of message
      messageLength = pumpPowerStatusLength + 2;
  
      messageContent = 1;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchPOWERon
  
  //PUMP POWER OFF
  void pumpPOWERoff() {
  
      int pumpPowerStatusLength = 1;
  
      subsys = SUBSYS_2; 
  
      //Account for the end of message
      messageLength = pumpPowerStatusLength + 2;
  
      messageContent = 0;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchPOWERoff
  
  //LED POWER ON
  void switchLEDon() {
  
      int ledStatusLength = 1;
  
      subsys = SUBSYS_3; 
  
      //Account for the end of message
      messageLength = ledStatusLength + 2;
  
      messageContent = 1;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchLEDon
  
  //LED POWER OFF
  void switchLEDoff() {
  
      int ledStatusLength = 1;
  
      subsys = SUBSYS_3; 
  
      //Account for the end of message
      messageLength = ledStatusLength + 2;
  
      messageContent = 0;
  
      Serial.write(som);
      Serial.write(messageLength);
      Serial.write(subsys);
      Serial.write(messageContent);
      Serial.write(eom);
  } //end switchLEDoff
  
  //Function to send all updated status values from arduino to the webpage
  void statusUpdate(uint8_t num) {
  
      //Valve C
      if(currValveStatusNumC == 0)
      {
          valveColorC = "red";
          valveTubePropsC = "175px solid #00ADEF";
          valveStatusC = "Closed";
      } //end if
      else if(currValveStatusNumC == 1)
      {
          valveColorC = "green";
          valveTubePropsC = "350px solid #00ADEF"; 
          valveStatusC = "Open";
      } //end else if
  
      //Valve D
      if(currValveStatusNumD == 0)
      {
          valveColorD = "red";
          valveTubePropsD = "175px solid #00ADEF";
          valveStatusD = "Closed";
      } //end if
      else if(currValveStatusNumD == 1)
      {
          valveColorD = "green";
          valveTubePropsD = "350px solid #00ADEF"; 
          valveStatusD = "Open";
      } //end else if
  
      //Valve E
      if(currValveStatusNumE == 0)
      {
          valveColorE = "red";
          valveTubePropsE = "175px solid #00ADEF";
          valveStatusE = "Closed";
      } //end if
      else if(currValveStatusNumE == 1)
      {
          valveColorE = "green";
          valveTubePropsE = "350px solid #00ADEF"; 
          valveStatusE = "Open";
      } //end else if
  
      String test = ""; 
      test += currNumRefresh;
      test += ",";
      test += currMicroC;
      test += ",";
      test += currMicroD;
      test += ",";
      test += currMicroE;
      test += ",";
      test += currPressureC;
      test += ","; 
      test += currPressureD;
      test += ",";
      test += currPressureE;
      test += ","; 
      test += valveColorC;
      test += ",";
      test += valveTubePropsC;
      test += ",";
      test += valveStatusC;
      test += ","; 
      test += valveColorD;
      test += ",";
      test += valveTubePropsD;
      test += ",";
      test += valveStatusD;
      test += ","; 
      test += valveColorE;
      test += ",";
      test += valveTubePropsE;
      test += ",";
      test += valveStatusE;
      test += ",";
      test += currFluid;
  
      test.toCharArray(statusbuf, 256);
      webSocket.sendTXT(num, statusbuf, strlen(statusbuf));
  } //end function statusUpdate
  
  // Current POWER status
  bool POWERStatus;
  
  // Current LED status
  bool LEDStatus;
  
  // Commands sent through Web Socket
  const char LEDON[] = "ledon";
  const char LEDOFF[] = "ledoff";
  
  const char teensyPOWERON[] = "teensyPOWERon";
  const char teensyPOWEROFF[] = "teensyPOWERoff";
  
  const char pumpPOWERON[] = "pumpPOWERon";
  const char pumpPOWEROFF[] = "pumpPOWERoff";
  
  const char teensyLEDON[] = "teensyLEDon";
  const char teensyLEDOFF[] = "teensyLEDoff";
  
  const char statusIdentifier[] = "Update Status";
  
  
  //Websocket Event Function
  void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)
  {
    //if(mySerial)
     //mySerial.printf("webSocketEvent(%d, %d, ...)\r\n", num, type);
    switch(type) {
      case WStype_DISCONNECTED:
        //if(mySerial)
            //mySerial.printf("[%u] Disconnected!\r\n", num);
        break;
      case WStype_CONNECTED:
        {
          IPAddress ip = webSocket.remoteIP(num);
          //if(mySerial)
            //mySerial.printf("[%u] Connected from %d.%d.%d.%d url: %s\r\n", num, ip[0], ip[1], ip[2], ip[3], payload);
  
        } //end case CONNECTED
        break;
      case WStype_TEXT:
        //if(mySerial)
          //mySerial.printf("[%u] get Text: %s\r\n", num, payload);
  
        if(strcmp(teensyPOWERON,  (const char *)payload) == 0) {
            switchPOWERon();
        } //end if
  
        else if(strcmp(teensyPOWEROFF,  (const char *)payload) == 0) {
            switchPOWERoff();
        } //end else if
  
        else if(strcmp(pumpPOWERON,  (const char *)payload) == 0) {
            pumpPOWERon();
        } //end else if
  
        else if(strcmp(pumpPOWEROFF,  (const char *)payload) == 0) {
            pumpPOWERoff();
        } //end else if
  
        else if(strcmp(teensyLEDON,  (const char *)payload) == 0) {
            switchLEDon();
        } //end else if
  
        else if(strcmp(teensyLEDOFF,  (const char *)payload) == 0) {
            switchLEDoff();
        } //end else if
  
        else if(strcmp(statusIdentifier, (const char *)payload) == 0) {
            statusUpdate(num);
        } //end else if
        else 
        {
          if(mySerial)
              mySerial.println("Unknown command");
        } //end else
  
        // send data to all connected clients
        webSocket.broadcastTXT(payload, length);
        break;
      case WStype_BIN:
        if(mySerial)
          mySerial.printf("[%u] get binary length: %u\r\n", num, length);
        hexdump(payload, length);
  
        // echo data back to browser
        webSocket.sendBIN(num, payload, length);
        break;
      default:
        if(mySerial)
          mySerial.printf("Invalid WStype [%d]\r\n", type);
        break;
    } //end switch
  } //end function webSocketEvent
  </code></pre>
  
  <p>I also have included jQuery and this gauge library: <a href="https://github.com/Mikhus/canv-gauge" rel="nofollow noreferrer">https://github.com/Mikhus/canv-gauge</a>.</p>
  
  <p>Here's the complete list of files on the SPIFFS server currently:</p>
  
  <p><img src="https://i.imgur.com/YBip8Jz.png" alt="list of files"> </p>
  
  <p><strong>I have not included the HTML/CSS/JS due to post size limit; if this would be helpful please let me know and I will post that code in a reply.</strong></p>