-->

ESP8266 Community Forum

Open Community Forum for ESP8266, Come share Arduino and IoT (Internet of Things)
https://www.esp8266.com/

Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATCH"

https://www.esp8266.com/viewtopic.php?f=8&t=5632

Page 1 of 3

Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATCH"

PostPosted: Mon Sep 21, 2015 12:41 pm
by awwende
I'm not really sure what to make of this error. Here's my code:

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>


ESP8266WebServer webserver(80);

String buildJavascript(){
  String javaScript;
  javaScript = "";
  javaScript += "<script type='text/javascript'>\n"; 
 

  javaScript += "function getDate()\n";
  javaScript += "{\n";
  javaScript += "var d= new Date();\n";
  javaScript += "var month = d.getMonth()+1;\n";
  javaScript += "var day = d.getDate();\n";
  javaScript += "var year = d.getFullYear().toString().substr(2,2);\n";
  javaScript += "document.getElementById(\"inputFileNameToSaveAs\").value=month+\"-\"+day+\"-\"+year;\n";
  javaScript += "}\n";

  javaScript += "function saveTextAsFile()\n";
  javaScript += "{\n";
  javaScript += "var textToWrite=\"Test\";\n";
  javaScript += "var textFileAsBlob = new Blob([textToWrite], {type:'text/plain', endings:'native'});\n";
  javaScript += "var fileNameToSaveAs = document.getElementById(\"inputFileNameToSaveAs\").value;\n";
  javaScript += "var downloadLink = document.createElement(\"a\");\n";
  javaScript += "downloadLink.download = fileNameToSaveAs;\n";
  javaScript += "downloadLink.innerHTML = \"Download File\";\n";
  javaScript += "if (window.webkitURL != null){\n";
  javaScript += "downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);\n";
  javaScript += "}\n";
  javaScript += "else{\n";
  javaScript += "downloadLink.href = window.URL.createObjectURL(textFileAsBlob);\n";
  javaScript += "downloadLink.onclick = destroyClickedElement;\n";
  javaScript += "downloadLink.style.display = \"none\";\n";
  javaScript += "document.body.appendChild(downloadLink);\n";
  javaScript += "}\n";
  javaScript += "downloadLink.click()\n";
  javaScript += "}\n";
  javaScript += "function destroyClickedElement(event){\n";
  javaScript += "document.body.removeChild(event.target);\n";
  javaScript += "}\n";

  javaScript+="function loadRelRef(){\n";
  javaScript+="var xmlhttp;\n";
  javaScript+="var txt,x,i;\n";
  javaScript+="if(window.XMLHttpRequest){\n";
  javaScript+="xmlhttp=new XMLHttpRequest();\n";
  javaScript+="}\n";
  javaScript+="else{\n";
  javaScript+="xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.onreadystatechange=function(){\n";
  javaScript+="if(xmlhttp.readyState==4 && xmlhttp.status==200){\n";
  javaScript+="xmlDoc=xmlhttp.responseXML;\n";
  javaScript+="txt=\"\";\n";
  javaScript+="x=xmlDoc.getElementsByTagName(\"R_VALUE\");\n";
  javaScript+="console.log(x)\n";
  javaScript+="document.getElementById(\"rr2\").value = Number(x[0].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos2\").value = Number(x[1].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg2\").value = Number(x[2].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"rr3\").value = Number(x[3].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos3\").value = Number(x[4].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg3\").value = Number(x[5].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"rr4\").value = Number(x[6].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos4\").value = Number(x[7].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg4\").value = Number(x[8].childNodes[0].nodeValue);\n";
  javaScript+="}\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.open(\"GET\",\"xml\",true);\n";
  javaScript+="xmlhttp.send();\n";
  javaScript+="}\n";

  javaScript+="function loadTargets(){\n";
  javaScript+="var xmlhttp;\n";
  javaScript+="var txt,x,i;\n";
  javaScript+="if(window.XMLHttpRequest){\n";
  javaScript+="xmlhttp=new XMLHttpRequest();\n";
  javaScript+="}\n";
  javaScript+="else{\n";
  javaScript+="xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.onreadystatechange=function(){\n";
  javaScript+="if(xmlhttp.readyState==4 && xmlhttp.status==200){\n";
  javaScript+="xmlDoc=xmlhttp.responseXML;\n";
  javaScript+="txt=\"\";\n";
  javaScript+="x=xmlDoc.getElementsByTagName(\"T_VALUE\");\n";
  javaScript+="console.log(x)\n";
  javaScript+="document.getElementById(\"tar1\").value = Number(x[0].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar2\").value = Number(x[1].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar3\").value = Number(x[2].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar4\").value = Number(x[3].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar5\").value = Number(x[4].childNodes[0].nodeValue);\n";
  javaScript+="}\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.open(\"GET\",\"xml\",true);\n";
  javaScript+="xmlhttp.send();\n";
  javaScript+="}\n";

 
  javaScript += "</script>\n";
  return javaScript;
}

void handleWebsite(){
  String htmlDoc;
  htmlDoc = "<!DOCTYPE html>\n";
  htmlDoc += "<html>\n";
  htmlDoc += "<head><title>My Sensor Configuration</title>" + buildJavascript() + "</head>\n";
  htmlDoc += "<body><h3>My Sensor Settings and Data Download</h3>\n";

  htmlDoc += "<style type=\"text/css\">.fieldset-auto-width{display:inline-block;}</style><div><fieldset class=\"fieldset-auto-width\"><style type=\"text/css\">\n";
  htmlDoc += ".tg  {border-collapse:collapse;border-spacing:0;}\n";
  htmlDoc += ".tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}\n";
  htmlDoc += ".tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}\n";
  htmlDoc += ".tg .tg-0ord{text-align:right}\n";
  htmlDoc += ".tg .tg-s6z2{text-align:center}\n";
  htmlDoc += "</style>\n";
  htmlDoc += "<table class=\"tg\">\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"4\">Relative Reflectance<br>Values</th>\n";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"2\">Target Servo<br>Positions</th>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-031e\" colspan=\"2\" rowspan=\"2\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\">Tolerances</td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\">+</td>\n";
  htmlDoc += "<td class=\"tg-s6z2\">-</td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR2:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 1:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar1\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR3:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 2:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar2\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR4</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 3:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar3\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 4:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar4\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 5:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar5\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button value=\"Default Values\" onclick=\"loadRelRef()\" style=\"width:100%\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button value=\"Default Values\" onclick=\"loadTargets()\" style=\"width:100%\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button value=\"Read From Test Box\" style=\"width:100%\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button value=\"Read From Test Box\" style=\"width:100%\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "</table></fieldset></div>\n";

  htmlDoc += "<h4>Download Data</h4>";
  htmlDoc += "<p>To save data:<ul><li>Keep the name as today's date, or<br>";
  htmlDoc += "enter a name for the file in the spot below.</li>";
  htmlDoc += "<li>Press \"Download Data\" to download and save test data.</li></ul></p>";
  htmlDoc += "<p>Save As:<input id=\"inputFileNameToSaveAs\"></input>";
  htmlDoc += "<button onclick=\"saveTextAsFile()\">Download Data</button></p>";
 
  htmlDoc += "</body>\n</html>\n";
  webserver.send(200,"text/html",htmlDoc);
}

void handleXML(){
  String XML;
  XML="<?xml version='1.0' encoding=\"UTF-8\"?>";
  XML+="<SETTINGS>";
  XML+="<REL_REFLECTANCE number=\"0\">";
  XML+="<R_VALUE>0.943</R_VALUE>";
  XML+="<R_VALUE>0.02</R_VALUE>";
  XML+="<R_VALUE>0.02</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<REL_REFLECTANCE number=\"1\">";
  XML+="<R_VALUE>0.493</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<REL_REFLECTANCE number=\"2\">";
  XML+="<R_VALUE>0.100</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="<R_VALUE>0.01</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<TARGET number=\"0\">";
  XML+="<T_VALUE>180</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"1\">";
  XML+="<T_VALUE>130</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"2\">";
  XML+="<T_VALUE>87</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"3\">";
  XML+="<T_VALUE>48</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"4\">";
  XML+="<T_VALUE>5</T_VALUE>";
  XML+="</TARGET>";
  XML+="</SETTINGS>";
  webserver.send(200,"text/xml",XML);
}

void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

void setup(){
  WiFi.mode(WIFI_AP);
 
  uint8_t mac[WL_MAC_ADDR_LENGTH];
  WiFi.softAPmacAddress(mac);
  String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
                 String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
  macID.toUpperCase();
  String AP_NameString = "ESP8266 " + macID;

  char AP_NameChar[AP_NameString.length() + 1];
  memset(AP_NameChar, 0, AP_NameString.length() + 1);

  for (int i=0; i<AP_NameString.length(); i++)
    AP_NameChar[i] = AP_NameString.charAt(i);
  WiFi.softAP(AP_NameChar, "admin207");
  webserver.on("/", handleWebsite);
  webserver.on("/xml", handleXML);
  webserver.onNotFound(handleNotFound);
  webserver.begin();
}

void loop(){
  webserver.handleClient();
}


When I run that, I get the "ERR_CONTENT_LENGTH_MISMATCH" in Chrome. Trying it on Firefox and IE also didn't work. I built up the HTML first and then started adding the JS, so I thought maybe that was the problem. However when I change handleWebsite() to the following, it works without a problem. All I did was remove the table, and styling, and just kept the input and button tags.

Code: Select allvoid handleWebsite(){
  String htmlDoc;
  htmlDoc = "<!DOCTYPE html>\n";
  htmlDoc += "<html>\n";
  htmlDoc += "<head><title>My Sensor Configuration</title>" + buildJavascript() + "</head>\n";
  htmlDoc += "<body><h3>My Sensor Settings and Data Download</h3>\n";

  htmlDoc += "RR2:<input type=\"number\" step=0.001 id=\"rr2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol2:<input type=\"number\" step=0.001 id=\"tol_pos2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol2:<input type=\"number\" step=0.001 id=\"tol_neg2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "RR3:<input type=\"number\" step=0.001 id=\"rr3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol3:<input type=\"number\" step=0.001 id=\"tol_pos3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol3:<input type=\"number\" step=0.001 id=\"tol_neg3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "RR4:<input type=\"number\" step=0.001 id=\"rr4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol4:<input type=\"number\" step=0.001 id=\"tol_pos4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol4:<input type=\"number\" step=0.001 id=\"tol_neg4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "<input type=button value=\"Load RRs\" onclick=\"loadRelRef()\"><br><br>\n";
  htmlDoc += "Target 1:<input type=\"number\" step=1 id=\"tar1\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 2:<input type=\"number\" step=1 id=\"tar2\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 3:<input type=\"number\" step=1 id=\"tar3\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 4:<input type=\"number\" step=1 id=\"tar4\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 5:<input type=\"number\" step=1 id=\"tar5\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "<input type=button value=\"Load Targets\" onclick=\"loadTargets()\"><br><br>\n";

  htmlDoc += "<h4>Download Data</h4>";
  htmlDoc += "<p>To save data:<ul><li>Keep the name as today's date, or<br>";
  htmlDoc += "enter a name for the file in the spot below.</li>";
  htmlDoc += "<li>Press \"Download Data\" to download and save test data.</li></ul></p>";
  htmlDoc += "<p>Save As:<input id=\"inputFileNameToSaveAs\"></input>";
  htmlDoc += "<button onclick=\"saveTextAsFile()\">Download Data</button></p>";
 
  htmlDoc += "</body>\n</html>\n";
  webserver.send(200,"text/html",htmlDoc);
}


Can anyone help me figure out what's going on here? It feels like a memory issue, but when I print the heap, it tells me I still have about 10k free.

Re: Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATC

PostPosted: Thu Sep 24, 2015 12:05 pm
by awwende
I think I see what the problem is. My HTML/CSS/JS code is too long and I'm overfilling the buffer to webserver.send().

Is there an easy way to break the webpage down in smaller, manageable chunks?

Re: Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATC

PostPosted: Thu Sep 24, 2015 3:47 pm
by eduperez
You can always put CSS and JS into separate files and serve them from the ESP, then leave links in the HTML code.

Re: Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATC

PostPosted: Thu Sep 24, 2015 7:14 pm
by awwende
That was the avenue I was thinking I needed to head down. How do I go about implementing that? In my setup I added :
Code: Select allwebserver.on("/myscripts.js", handleJavascript);

Then I changed the buildJavascript string function to this:

Code: Select allvoid handleJavascript(){
  String javaScript;
  javaScript += ......javascript fuctions
 webserver.send(200,"text/javascript",javaScript);
}


In my html file I replace "html += "buildJavascript();" with:

Code: Select allhtmlDoc += "<script scr=\"/myscripts.js\"></script>";


I can go to the IP/myscripts.js and it just shows up as text, which kinda(?) makes sense, the data is at least there. However none of my functions work. Not sure what I'm doing wrong.
All times are UTC - 5 hours
Page 1 of 3
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/