So I just got my two ESP8266/ESP-12E WiFi development boards in the mail as I am trying to set up a few home automation devices in my house. I've gotten much further than I thought I would today, considering this is my first foray into working with circuits that involve microprocessors/WiFi, but I've run into a problem that I can't find a solution to myself. Forgive me if there is another question similar to this, but I could not find it and this seems like the best place to ask.
I am using a tutorial/template program that Rui Santos from Random Nerd Tutorials was kind enough to create ( https://randomnerdtutorials.com/esp8266-web-server/ ), and although we have (as far as I can tell) identical boards, operating systems and Arduino code, I keep getting an HTML page that is text only, with none of the CSS or HTML elements showing. It should look like this:
However, I am getting a page that looks like this:
His serial monitor is giving this response:
My serial monitor is giving me this response:
I've tried putting client.println("Content-type:text/html"); in a few places to see if it would help display the page, but to no avail. Any help with getting this little program/website running would be greatly appreciated.
Thanks for your time!
2 Answers 2
Don't use the low-level tools to handle http, use the built-in http tools. They make creating http responses trivial. No more concatenating headers or worrying about client status; it provides a nice clean function ex:server.send(404, "text/plain", message); and nice subscription method: server.on().
Checkout its usage on one of the Arduino ESP8266's built-in examples: https://github.com/esp8266/ESPWebServer/blob/master/examples/HelloServer/HelloServer.ino
The use of HTTP here is fairly straight forward so I think printing out your own HTTP headers is OK, you just need to be very specific with the order and send exactly what the browser expects. Without seeing your code, my guess is that you're sending out a blank line to the client somewhere prior to the 'Content-type: text/html' line being sent or that you're not printing an empty blank line somewhere after the Content-type line is being sent. If your browser (the client) doesn't receive the HTTP protocol commands that it expects in the order that it expects, then it will default to displaying EVERYTHING you send it as either plain text or an HTML document. To illustrate exactly what is supposed to be sent to the browser in this example:
HTTP/1.1 200 OK
Content-type:text/html
Connection: close
<HTML>....
Note that there should be a empty line printed out after the Connection: close line and before you send any HTML. There should be nothing else sent to the client prior to the HTTP/1.1 200 OK line being sent and before your HTML code starts. If you don't follow the protocol, your browser will probably default to displaying everything plain text as you're seeing.
Something else I noticed in the example code, there is no space between Content-type: and text/html. This is unusual, but I guess it doesn't break the protocol and Firefox and Chrome handle it ok in my testing. Still, it could cause issues if a browser doesn't handle that properly so you might just try adding a space between the header and it's value.
content-type:...etcin the response body - but as the code you haven't shared is not visible, I could be wrong (but I'm not)I've tried putting client.println("Content-type:text/html");how about keeping it where the tutorial has it?