0

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:

expected outcome

However, I am getting a page that looks like this:

outcome

His serial monitor is giving this response:

his serial monitor

My serial monitor is giving me this response:

my serial monitor

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!

Improve this question
5
  • clearly you're adding the content-type incorrectly in the code you haven't shared, because if you added it correctly, it would be sent as a response header, as it is, your code that you haven't shared is putting content-type:...etc in the response body - but as the code you haven't shared is not visible, I could be wrong (but I'm not)
    – Jaromanda X
    Mar 6, 2019 at 7:31
  • I've tried putting client.println("Content-type:text/html"); how about keeping it where the tutorial has it?
    – Jaromanda X
    Mar 6, 2019 at 7:35
  • The program didn't display the page correctly as-is, that's why I tried that, I have zero experience with code until now so I figured I'd give it a shot. What's the best way to show you the code?
    – Caleb Carroll
    Mar 7, 2019 at 3:01
  • Oh. So the original code is broken?
    – Jaromanda X
    Mar 7, 2019 at 3:08
  • It's possible that there's a compatibility issue between the code and my esp8266 or my OS but nothing I can pinpoint. There have been a lot of issues in the comments of that article but also lots of success stories, no issues reflect this problem though
    – Caleb Carroll
    Mar 7, 2019 at 7:51

2 Answers 2

Reset to default
1

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

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.