Introduction: Programming a HTTP Server on ESP-8266-12E

Picture of Programming a HTTP Server on ESP-8266-12E

In this Instructable, together we will undertake the journey of programming the ESP8266-12E WIFI Development Board as an HTTP server. Using a web browser we will send instructions to the ESP8266-E12 to change it's behavior. Throughout the process, at each step we will also look under the hood to see what is going on inside. While doing this we will control the on board LED to turn ON and OFF with commands issued via a web browser.

In my previous Instructable Programming the ESP8266-12E using Arduino software/IDE I have described how to add the ESP8266-E12 board to the Arduino software/IDE and write your first sketch to blink the on board LED. The code is hardwired, hence on power up the ESP-8266-12E does what it is suppose to do - blink the LEDs. One cannot change the behavior of the board without reprogramming it.

In an ideal world of IoT the ESP8266-E12 should communicate with us over WiFi and over the the internet. We should be able to control the ESP-8266-E12 over Wifi using protocols specific to the internet. We should be able to instruct the ESP-8266-12E to do "Things" without having to reprogram.

Step 1: Opening the "Connect to a Network" Window

Picture of Opening the "Connect to a Network" Window

In your Windows environment open the Network and Sharing Center. You get to the Network and Sharing Center via the Control Panel.

Click on Connect to a network to open theConnect to a networkwindow. Leave it open, we will be referring to this window often. You may shut the Network and Sharing Center.

Step 2: Writing the SimpleWebServer Sketch

Picture of Writing the SimpleWebServer Sketch

Connect your ESP8266-12E to your computer.

Open your Arduino program/IDE and paste the following code:

#include <ESP8266WiFi.h>

WiFiServer server(80); //Initialize the server on Port 80

void setup() {

WiFi.mode(WIFI_AP); //Our ESP8266-12E is an AccessPoint
WiFi.softAP("Hello_IoT", "12345678"); // Provide the (SSID, password); .
server.begin(); // Start the HTTP Server

}

void loop() { }

This boiler plate code will be a part of every ESP8266 sketch we write. This code does the following:

- Includes the ESP8266 library ESP8266WiFi.h.
- Creates the instance "server" of the class "WiFiServer" listening on port 80. Notice "server" is a global instance.
- Set the mode of our ESP8266 to be an Access Point (AP).
- Provide the SSID and password. The password / passphrase has to be at least 8 characters long.

- Fire-up our server by calling the begin() method.

Save as SimpleWebServer sketch. Compile and upload the sketch to your ESP8266-12E.

Step 3: Checking Our Server

Picture of Checking Our Server

Open the "Connect to network" window. You should see our server with SSID "Hello_IoT" in the list. Select the Hello_IoT network, provide the password/passphrase and save it.

Hurrah our ESP8266-12E is operating as a HTTP server listening on port 80.

Step 4: Looking Under the Hood

Picture of Looking Under the Hood

Launch the Serial MonitorTools | Serial Monitor or with the shortcut keys Crtl-Shift-M.

Step 5: Get HTTP Server Information From the ESP8266-12E

Picture of Get HTTP Server Information From the ESP8266-12E

Add the following piece of code in the end of the setup() function:

//Looking under the hood
Serial.begin(115200); //Start communication between the ESP8266-12E and the monitor window
IPAddress
HTTPS_ServerIP= WiFi.softAPIP(); // Obtain the IP of the Server
Serial.print("Server IP is: "); // Print the IP to the monitor window
Serial.println(HTTPS_ServerIP);

Compile and load the sketch and watch the Monitor Window. You should see the default IP address of the ESP8266-12E as 192.168.4.1.

Step 6: Web Browser Connects/Talks to Server

Picture of Web Browser Connects/Talks to Server

It is time for a web browser to connect to our HTTP server.

Enter the following code within the loop() function:

WiFiClient client = server.available();
if (!client) {
return;
}
//Looking under the hood
Serial.println("Somebody has connected :)");

Compile and load to the ESP8266-E12.

Open a browser window and enter http://192.168.4.1 and and hit enter.

Observe your Monitor window to check for a connection.

Step 7: Listen to What the Browser Is Sending to the HTTP Server

Picture of Listen to What the Browser Is Sending to the HTTP Server

The web browser connects to the HTTP server and sends the request. The server receives the request and does something with it. Rather it can do a lot of different things.

Enter the following code in the loop() function.

//Read what the browser has sent into a String class and print the request to the monitor
String request = client.readString();
//Looking under the hood
Serial.println(request);

Compile and upload to the ESP8266-E12. Enter the following in the address field of your browser http://192.168.4.1/PARAM.

The browser sends a GET request to the server. Notice "/PARAM" following the GET request. Off all the text sent we are only interested in the first line of the request. Thus we replace the code
String request = client.readString();
with
String request = client.readStringUntil('\r');

Step 8: Turning the LED ON/OFF Through the Web Browser

Picture of Turning the LED ON/OFF Through the Web Browser

We are ready to turn the LED on GPIO16 ON/OFF through commands given via the web browser.

Firstly initialize the digital port GPIO16 as an output port and keep the initial state of the LED ON.
At the bottom of setup() function add the following lines of code:

pinMode(LED_PIN, OUTPUT); //GPIO16 is an OUTPUT pin;
digitalWrite(LED_PIN, LOW); //Initial state is ON

At the bottom of loop() function add the following lines of code:

// Handle the Request

if (request.indexOf("/OFF") != -1){
digitalWrite(LED_PIN, HIGH); }
else if (request.indexOf("/ON") != -1){
digitalWrite(LED_PIN, LOW);
}

In the address bar of your browse type the following URL:
http://192.168.4.1/OFF

The LED on the ESP8266-E12 will turn OFF.

Then type the following URL:
http://192.168.4.1/ON

The LED on the ESP8266-E12 will turn ON.

Step 9: Let Us Get a Little Fancy

Picture of Let Us Get a Little Fancy

It is cumbersome to change the URL each time we need to turn the LED ON or OFF. Let us add some HTML code and some buttons.

Copy this code and add it at the bottom of the Loop() function:

// Prepare the HTML document to respond and add buttons:

INSTRUCTABLES MANGLES THE HTML CODE

//Serve the HTML document to the browser.

client.flush(); //clear previous info in the stream
client.print(s); // Send the response to the client
delay(1);
Serial.println("Client disonnected"); //Looking under the hood

Compile and load.

HAPPY IoTing!!!

Step 10: ​List of Other Instructables I Have Written

Comments

hon20002000 (author)2017-08-23

thank for a great but i get some problem.

the function is okay but no words show on the button.

GustavG3 (author)2017-06-27

Thanks for a great and well written tutorial! #madeit

Dee741 (author)2017-06-21

Hi,

Great tutorial!! I have the ESP8266-12E onboard LED switching ON/OFF using the URL ON/OFF method.....BUT.... the HTML buttons don't work at all on the webpage from my phone. The code is exactly as you have written it. An ideas as to what I am doing wrong??

Thanks

Darren

Dee741 (author)Dee7412017-06-21

Hi,

Got it sorted. The problem was ME!!! I had written a + instead of a = in the HTML code for button "onclick". I can now start IOTing.

Thanks for the great tutorial.

PetitBiscuit (author)2017-05-19

Hey ! I'm new and I would like to know if it's possible to turn my nodemcu esp8266-12e as an acces point to internet ? Or juste to grap internet with it. My computer didn't have a wifi chip, i need an ethernet cable and I want to use the wifi chip of my nodemcu to get acces to internet with the wifi of my router on my computer. Possible ?

jainrk (author)PetitBiscuit2017-05-20

I don't know how :(

ItsGraGra (author)2017-05-17

Great tutorial, thanks.

I just had to change the LED pin numbers, int LED_PIN = 15; and swap HIGH for LOW and vice-versa.

Worked first time as AP, all I need now is learn how to connect it to my router instead and get out on the internet.

Babar Latif (author)2017-04-24

Hi,

Do you have a tutorial for making ESP8266 connect to the network without adding SSID and Password to the program ??

.

I want to learn to code that can allow giving new SSID and Password without re-programming.

pacav69 (author)Babar Latif2017-05-14

you can use a library called 'wifimanager' that can store the ssid and password on the device.

AjinkyaW1 (author)Babar Latif2017-05-09

Of course it is possible.
add your code in a different methods , hit those methods using HTTP by passing your SSID and Password, your esp will disconnect and start in new desired mode.

AjinkyaW1 (author)2016-10-27

hellow .

i tried the instructions and program you have given. my practical was successful ,

but the thing where i am getting the problem is ,

when i power off the esp8266 device and when the power comes back , it doesnt start the program i have uploaded , i need to reprogram it to make it work again.

my pin connections are :

ESP8266-12E : TTL

while programming the esp8266 via ttl.

gnd - gnd

vcc - vcc (3.3v)

en - (3.3v)

rx - tx

tx -rx

GPIO 0 - GND

GPIO 15 - GND

AFTER PROGRAMMING I REMOVE GPIO 0 AND GPIO 15 FROM the ground.

the program i have uploaded only works once when the upload is complete but not after the power goes and comes again.

please help i have read a lot of things on internet. and have failed solving the issue.

thanks in advance

as-WIN-th (author)AjinkyaW12017-05-08

Were you able to slove this problem. I too have the same issue any insights will be a lot helpful

AjinkyaW1 (author)as-WIN-th2017-05-08

yes. once your upload is finished. put gpio0 to HIGH or 3.3v.

jainrk (author)AjinkyaW12017-05-08

Thanks for answering. That is the solution.

TrucV (author)2017-04-27

this is so helpfu, bro !!
thank you so much !!!

JonnyF4 (author)2016-12-17

I have other scripting exp but an absolute Noob here. All went well till i tried connect to device with Chrome via http://192.168.4.1/ and got no response via Serial Monitor. Got "Server IP is: 192.168.4.1" tried to connect and nothing ? Nor did the next step work with http://192.168.4.1/PARAM...

Please help...

pomeloteaNQ (author)JonnyF42017-04-17

neither can I connect this IP through chrome! how do you solve this problem?

jainrk (author)pomeloteaNQ2017-04-19

Did you connect your computer wifi to the ESP8266?

JonnyF4 (author)pomeloteaNQ2017-04-18

pomeloteaNQ yes i did sort it out... was ages ago and i was just trying this out to see what could be done & not done much since... i seem to remember i had a typo or had to delete "hidden" characters in the text that i copied from the page above. DmitryI message below also rings a bell but may have been another project where i had to hard code a pin number rather than the name. Sorry.

But it did work in the end - good luck.

jainrk (author)JonnyF42017-04-19

Did you connect your computer wifi to the ESP8266?

JonnyF4 (author)JonnyF42016-12-18

Not to worry - sorted it out. Probably some cut and paste errors that the others didnt get. Thanks !

DmitryI made it! (author)2017-04-17

It worked rather well, except i had to redefine "LED_PIN" as just "14" and the on board LED lights up. A bit hard to follow the instructables as if code should be there first and than pictures to explain what it does perhaps. Regardless that I thank you for you time writing it.

ColinMarsh (author)2017-04-10

HI. All good now, thanks heaps

ColinMarsh (author)2017-04-07

Hi. I love the sketch and any other of your works that I have seen, well
done. This is exactly what I was looking for to set up a VPN using a
couple of Wemos D1's. Everything compiles/uploads until I get the IDE
error message that 'LED_PIN' was not declared in this scope. I have
followed the tute several times and get the same error. I am a bube,
looking to learn, but it looks like it was previously declared in the
setup loop. Thanks again, great work.


jainrk (author)ColinMarsh2017-04-10

Add the following line above setup()

#define LED_PIN 16

Let me know if it worked. Good luck!

jainrk (author)2017-03-25

I will duplicate it on my board and let you know.

PierreV16 (author)jainrk2017-03-27

Hi,

I think I found what's going wrong.

Hello_IoT takes the IP address of the computer, so that does not work.

We have no DHCP but fixed IP. So somewhere in the ESP8266 set up we need à fixed IP on 192.168.0.150 .

My printer works on 192.168.0.200 and is no problem.

But how to set that on the ESP8266, that I do not know.

In Windows 10 I cant approach "Hello_IoT to adjust.

1ste foto Is the IP from my computer.

2de fot is what Hello_IoT does.

jainrk (author)PierreV162017-03-28

Your esp8266 does not connect to the router. It is an access point. You should connect directly into the ESP8266 just like connecting into a router.

PierreV16 (author)jainrk2017-03-28

I have tray it meny thime, can't connect

PierreV16 (author)jainrk2017-03-28

Here I sit with a problem.

Tried without password.

So try network password does not work, also 12345678 is not work.

If I upload the program with 57600 baud, I get following information:

0x2d

v09f0c112

~ ld Server IP is: 192.168.4.1

Thought so that would be a key v09f0c112.

Nothing helps.

Get in serial monitor also not "Somebody has connected" can also do not reach the page 192.168.4.1

Upload with 11520, give my only the IP

jainrk (author)PierreV162017-03-28

Pierre; This facebook group is very active helping newcomers. If you have facebook account, join the group. https://goo.gl/nb1rVq

PierreV16 (author)2017-03-24

Am a novice, Fleming from Belgium, 72 years young.

Am the ESP5266-12th started under the Boardname: "WeMos-D1R2 & mini" At step 5, here I get 1 line, the Server IP.

Step 6. Data at the void Loop (). Just get the Server Ip, not more.

Did not work with this Board, so chosen other Board "NodeMCU 1.0 (ESP-12th Module)" here I could places the data on the Board , but get back only Server IP.

Have tried to access Hello_IoT by the password of the Wifi connection, but don't get any connection.

Then tried the code from the Board, "VID and PID" behind each other as "1A867523" that do not work.

Can of course be that linking too early.

Can someone help me there. Mail may also, "p.vanovermeire@gmail.com" Skype name "lappierre"

jainrk (author)PierreV162017-03-24

Can you see "Hello_IoT" name to connect to the ESP8266 in your computer or mobile phone?

PierreV16 (author)jainrk2017-03-25

Hi jainrk, yes i can see it on my computer. But can not connect it with my password.

PierreV16 (author)PierreV162017-03-25

What i have is:

https://nl.aliexpress.com/item/ESP8266-ESP-12E-UART-WIFI-Wireless-Shield-Development-Board-for-Arduino-UNO-R3-TE482/32671219535.html?spm=2114.13010608.0.0.32uLPD

FernandoG41 made it! (author)2017-03-05

There are some inconsistencies but the commentaries solved the doubts. Very nice. Thanks a lot

IzzanD made it! (author)2017-03-05

Just made it!

TheerapongSanthaveesuk (author)2017-02-28

Very nice tutorial.

tunaip made it! (author)2017-02-07

Another excellent tutorial of yours. I was facing some problems to establish the network initially, but it was because of the short passkey I chose.

A great introduction to IoT. Thank you once agian.

Damiend43 (author)2017-01-16

When listening on the com port I get very strange/obscurs reading like "len 138L€" or "00, leuÿôºÿLæ".

jainrk (author)Damiend432017-01-16

Maybe you com speed needs changing.

JohnN3 (author)2016-12-31

Didn't work for me so far. I got to step 8 and didn't see where the gpio pin "LED_PIN" was declared. Since I'm using a ESP12E I changed to gpio-4 by adding a declaration prior to setup of "int LED_PIN = 4;". Then added the next part to handle the request. Uploaded that and nothing happened. The serial monitor shows "Somebody has connected" and "Get /off HTTP/1.1" or "Get /on HTTP/1.1" depending on what I put in the address. The browser ( Chrome, on my smart phone) indicated "... the page was not working 192.168.4.1 didn't send any data...ERROR_EMPTY_RESPONSE". The gpio never changed states either. I've built servers using Nodemcu/lua in the past modeling from other examples. I wanted to move to the arduino IDE due to the slow development of the Nodemcu IDE platform. I must admit I'm just learning the intrices of Arduino IDE. It seemed easier using Nodemcu at least for me.

rwittoz (author)2016-12-18

Hello , how to switch off AP module ? Thank

pbaker-1 (author)2016-11-25

oh, wow, BRILLIANT. Worked first time!

flyingsparkie made it! (author)2016-10-25

just a few pics of my setuperish

flyingsparkie (author)2016-10-25

brill one again! Went straight through ok. Only had to change board to wemos and not the nodemcu. Oh and for mine LED_BUILTIN used instead of LED_PIN. Created another line to make the led blink too..

else if (request.indexOf("/BLINK") !=-1){
for(int t=0;t<10;++t){
digitalWrite(LED_BUILTIN, LOW);
delay(1000);
digitalWrite(LED_BUILTIN, HIGH);
delay(500);
}

and the little buttons on the page are really cool for a start. I didn't know you could do that within the arduino sketch!

Thanks agin :-D

Amatthew1 (author)2016-10-10

Nice intro. Where should I look to go further?

The Expert Noob (author)2016-10-05

Hey, your instructable plus another has led me to creating this code.
https://github.com/TheExpertNoob/ESP8266-Wifi-NeoP...
However, using if/else statements, my (neopixel)functions have to complete before it continues (loading page ect) I tried expierimenting using a switch/case statement, but those dont handle strings from index.Of Also, I need a way to loop that function until a different one is called. Anyone have suggestions?

I considered using an int value inside the else/if statements to pass to a switch/case that then executes the neopixel functions, but that seems a bit "extra"

jainrk (author)The Expert Noob2016-10-06

Try this https://github.com/ivanseidel/ArduinoThread

RobDeVoer (author)2016-09-26

Very nicely done! Lots of people will enjoy following this instructable. Keep posting em please.