Hello,
I've been struggling with an issue for the past few weeks, and I haven't been able to solve it.
I'm working with the ESP8266 and using the WiFiManager library for my project; I just modified the main page along with the other sub-pages to suit my needs. Initially everything was working great, connecting to the ESP (while an access point) was quick, pages loaded quick, no issues loading/displaying page content.
Eventually I started to really develop the web pages, the actual page content started to grow in length, along with including a fair amount of CSS to make things look nice. But then I started running into a peculiar problem where the pages would start to not transmit properly. I would start to see odd characters at the start of the page, the page layout would break/not fully load, the CSS would not be intact, and various issues of the sort without any noticeable pattern.
I started to research the issue, and came across some topics which discuss how the ESP will not be able to transmit strings larger than 7000 bytes or so due to the limited amount of heap. My pages range from 8000 to 12000 bytes, so I was pretty confident this would be the answer. This is the topic I was referencing server.send() fails to send STRINGS/HTML greater than 6600~ byte long · Issue #3205 · esp8266/Arduino · GitHub .
I followed the advice in the second post, which suggested doing the following for large HTML pages:
String HTML_PART_1(){
html = "<SOME HTML>";
html += "much much more HTML";
return html;
}
String HTML_PART_2(){
html = "<SOME HTML>";
html += "much much more HTML";
return html;
}
server.setContentLength(HTML_PART_1().length() + HTML_PART_2().length()); (or hardcode the length)
server.send(200,"text/html",HTML_PART_1()); <---Initial send includes the header
server.sendContent((HTML_PART_2()); <--- Any subsequent sends use this function
This solved the issue I was experiencing related to pages seeming "corrupted" and displaying unexpected characters.
However I'm now experiencing other, just as frustrating issues.
After I connect to the ESP while in access point mode, I get occasional to very frequent instances where my mobile phone browser (chrome) will indicate there was an issue loading the page.
I get responses such as:
- empty response
- content length mismatch
On the chance that I don't received these error messages the pages will tend to appear to have loaded (confirmed by the displayed URL), however the page content can be empty, incomplete, or even display the previous page's content as if it never was replaced with new HTML.
Here's a topic I found on GitHub which describes a very similar, if not the exact same issue, see third post. Multiple problems with WiFiManager · Issue #170 · tzapu/WiFiManager · GitHub
Has anyone experience similar issues, or have any advice regarding how to handle sending large html pages successfully and consistently? I'd really appreciate any guidance to point me in the right direction.
Here's a bit of the code if anyone could take a look.
void AVV::HandleDiagnostics()
{
String page = FPSTR(HTTP_HEAD);
page.replace("{v}", "Diagnostics");
page += "<script language='javascript'> first = 0; canset = 1; containerWidth = 0; intervalDuration = 250; drawBar=0;";
page += "function progressBar(duration, at) { resetStart(at == 0 ? duration : at); containerWidth = document.getElementById('container').offsetWidth; increment = intervalDuration*containerWidth/duration; barWidth = (at == 0 ? (containerWidth * 0.98) : (interval*increment)); drawBar = setInterval('progress('+duration%intervalDuration+')', intervalDuration); } ";
page += "function progress(lastms) { document.getElementById('bar').style.width=barWidth; if(interval <= 0) { clearInterval(drawBar); document.getElementById('bar').style.width=0; } else { barWidth = interval*increment; } interval--; } ";
page += "function resetStart(duration) { if(drawBar) clearInterval(drawBar); interval = duration / 250 * 0.98; }";
page += "function pbclear() { interval = 0;} </script> ";
page += FPSTR(STYLE_DIAG);
int length = DiagnosticsAJAX().length();
int lengthb = DiagnosticsContent().length();
int lengthc = DiagnosticsContentB().length();
debug("page: " + String(page.length()) + ", " + String(length) + ", " + String(lengthb) + ", " + String(lengthc));
server->setContentLength(page.length() + length + lengthb + lengthc);
server->send(200, "text/html", page);
server->sendContent(DiagnosticsAJAX());
server->sendContent(DiagnosticsContent());
server->sendContent(DiagnosticsContentB());
}
String AVV::Diagnostics...()
{
String page = "";
page += ...
return page;
}