ESP8266 Web Server Step-By-Step Using Arduino IDE (Mac OSX and Windows)
Articles,  Blog

ESP8266 Web Server Step-By-Step Using Arduino IDE (Mac OSX and Windows)


[Intro Music] CISCO: Hi! It’s Cisco with ACROBOTIC and today I’m gonna be showing you another tip for working with the ESP8266 micro-controller. One of the most popular uses for the ESP8266 is building a Web Server. In simple terms a Web Server is a computer device that’s connected to a network and is able to respond to traffic on that network. For today’s video we’re going to be using the ESP8266 on our development board and we are gonna use it to run firmware, written in the Arduino IDE that will allow the ESP8266 to listen to traffic on our local Wi-Fi network. To get things started, I’ll go ahead and open my Arduino IDE. And the very first thing I’d like to do is going through my preferences to make sure that the option for using an external editor is selected. I hit OK, and the second thing I do is open up a Terminal window and I’m going to maximize that for just clarity. Then I’m going to navigate to the desktop which is where I’ll be creating a directory and the code file that I’ll be using in this video. I’m gonna name the directory simple_webserver. and I’m going to change into that directory. Then I’m going to write a file that’ll contain the code that I’ll be writing. Remember that in the Arduino IDE, the file containing your code needs to have the same name as the directory it’s contained in. So my file will be also named simple_webserver with the extension .ino Inside my code file, the first thing that I’ll do is include the library ESP 8266 Wi-Fi. Which is what we’ll be using to first connect the ESP8266 to our local Wi-Fi network. Then I’m just going to add the typical two functions that every firmware file written in the Arduino IDE needs to have. And that’s the ‘setup’ function and the ‘loop’ function. I’m going to go ahead and save that and within the same terminal window I’ll open a new tab that I’ll use to open the file by simply using the command open. As the file has the extention .ino then the operating system knows to use the Arduino IDE to open up the file. And just to make sure that everything is working correctly I’m gonna go ahead and compile that file. And I should note, that I’ve been working with this board quite a bit so it’s already selected in my Arduino IDE options but in case you haven’t, make sure that before compiling you go to ‘Tools’ and select from the different boards the one that you’ll be using. In our case is this NodeMCU 1.0 version. And if you have any doubts for how to do that, please check out our previous video on getting started with the ESP8266 Development Board. As you see everything is compiled correctly and we can go back to our terminal and add the code to our firmware file that will allow us to connect to the Wi-Fi network. The first thing we’ll need is to use a couple of variables to contain the network ID and the password needed for the ESP8266 to connect to our local Wi-Fi network. And I am going to use char pointer variables one called SSID to contain our network ID here at the office. And a second one to contain the password. Then I can use the Wi-Fi object that comes from the ESP8266 library to connect to the network. By using the ‘begin’ method, it takes in the two parameters the SSID and the password. We’re gonna use the variables that we’ve created. Note that this is an asynchronous method which means that your code will continue to execute, even though that connection may or may not be established. We don’t want that so we are gonna add a delay using a while loop that checks the status of that connection. And we use the ‘status’ method of the Wi-Fi object and we are going to use a constant called WL_Connected. Both of those obviously come from this library, the ESP8266 Wi-Fi library. And that’s gonna evaluate to ‘true’ while that connection is being established, so we wanna print a debug message something like dots is a standard practice. And we also don’t wanna bog down that connection process so we are gonna add a 500 millisecond delay to the process. If you wanna print out debug messages, we of course need to initialize the USB connection between the board and the computer. We call the ‘begin’ method of the serial object. And we are gonna chose a baud rate of 115200. Finally, once that connection is established we want to know at least the IP address that was assigned to the ESP8266 from the Wi-Fi router we’re using. And you’ll see why that’s important when we get to the Web Server part of this video To do that, we are going to first I like to print a new line so that it doesn’t print on the line where all the dots are shown. And then we can go ahead and maybe print a message something like IP address. And the actual IP address will print by calling the method ‘local IP’ of the Wi-Fi object. So if I haven’t fat-fingered anything in, we are ready to test the connectivity of the ESP8266 to our local Wi-Fi network. I’m gonna go back to our Arduino IDE. Make sure that code compiles. Again double checking that the board that we are using it’s the correct one so the code compile correctly. And now we can connect the actual board to the USB port of our computer. And ensure, going through the ‘Tools’ menu that the correct board is selected, which in our case with this board is this cu. Silicon Lab, SLAB for short USB to UART. I’m gonna go ahead and upload the code to the board. And that should take a few seconds. Once the code is uploaded, I can go ahead and open my serial monitor to look at the debug messages. If you don’t see anything happening, you can go ahead and reset your board. You might see some gibberish and that’s due to a different baud rate that is used by the ESP8266 during its boot-up process so you can go ahead and ignore it. Make sure that 115200 is the one that’s selected. If everything goes correctly you should see an IP address just like mine The numbers of course will be different. And that’s what we’ll be using later on. Now that the ESP8266 is connected to our Wi-Fi network we can include the Web Server functionality so that it responds to traffic, specific traffic on that network. To do that we’re going to go back to our file and we are going to include a second library which is the ESP8266 Web Server library. And we are going to use the class defined inside that library ESP8266 Web Server class. to instantiate an object that we’ll name server. With that object we’ll be adding first a route to our Web Server. We use the method ‘on’ for adding the route. We’ll be adding the default route which is the top level of the path represented here by the forward slash. When a device on the network sends a request to that route then we want to just send out a simple string. This is the quickest way of testing it out. So I’ll use the ‘server.send’ method which needs three parameters. First the response code, then the type of response that it’ll be. I’ll just send a text/plain response and an actual string like ‘Hello World’ for example. That’s the response that the clients on the network should get when they send that request to that specific path and I’ll show how to do that in just a second. The next thing we’ll do it’s just starting up our Web Server using the ‘begin’ method. And lastly, we’ll need in our ‘loop’ function to monitor those requests by using the ‘handleClient’ method. And if I haven’t forgotten anything this should be sufficient for at least testing out the Web Server side of things. Of course before doing that I’m gonna go ahead and correct some of my syntax errors. Semicolon here. And now we should be OK to test things out. If we go back to our serial monitor then we can copy that IP address that’s been assigned by our local Wi-Fi router. And we can go ahead and open our browser window. I’ll use Google Chrome. Put in the IP address and navigate to it. You’ll see that whatever string you put inside that response will be shown on the browser. Now, we can do things like interact with actual hardware and for this demonstration I can quickly show you how to turn on and off one of the onboard LEDs on the development board. To do that we go back to our terminal window and we can simply add a new route that we’ll call ‘toggle’. Then we can add a function that will handle everything to both turn on the LED and send a response to the client making that request to that route. In my case I’m gonna use a user defined function that I’ll call ‘toggleLED’ And then I’m going to define that function at the end of my code. It won’t return anything and it doesn’t take any parameters. And what it’ll do is just send a High or Low volume which I’ll use the digitalWrite function to a pin that I’ll define in just a second. And to avoid doing an ‘if – else’ statement, I’ll just use a digitalRead on the same pin and of course I’ll just invert it. So if a digitalRead gets a High value, then the digitalWrite will send a Low value and vice versa. The last thing we’ll need is for the server to actually send a response. Perhaps we’ll try instead of a 200 code, a 204 and it’ll just be empty. What that 204 represents is that it’s an empty response where as a 200 code represents that it’s an OK response. And you are probably are more familiar with the 404 for example when you visit a URL that doesn’t exist. That 404 response is an actual code that represents ‘Hey, this particular path wasn’t found’. So that’s everything that we need for that function to do its thing, but we need to go back to the beginning of the code and do a couple of things. The first one being declaring that variable. I’ll use an unsigned 8-bit integer. that we’ve already named pin_led. And for the development board you can use either pin sixteen or pin two. Those are the two onboard LEDs you can control. I’ll chose sixteen for this demo. And we of course need to call the ‘pinMode’ function on that same pin to make sure that it’s configured as an output. And after doing that we can go back to the Arduino IDE and upload the code. And once it’s uploaded we can tests things out by going back to our browser. And Voila! We have a Web Server running. So this was just a quick tip for you to get started and take things further. If you like our videos you can click the support button on our channel page. Don’t forget to subscribe, like, or leave us a comment! Until next time!

100 Comments

  • Ravi Shankar

    Awesome video. Can you do a video on WifiManager and Captive portal, Please? Maybe explain DNSServer library and uses. Thanks.

  • Steve Tripoli

    Hello, thanks for the great tutorial. Can you leave the code on the screen longer, even when I pause the video I can get all of the code correctly, or even better post the code below the video.

  • Steve Tripoli

    Hello, how should this line read?
    server.on("/",[](){server.send(200,"text/plain","Hello World!");)};
    I know the syntex is wrong, but I just can't figure it out.

  • dev ubhare

    Hi Cisco… Your tutorals are best and on point. Easy to understand.
    I want to know if we can send an empty response in this method" server.send(200, “text/plain”, “Other URL”); "
    I do not want to take client to anyother page but to keep on the same.
    Your help will be really appreciated.

  • Synapse

    I have a dumb question….What is the purpose on line #22 of your code for the empty brackets, and empty parentheses? Can't wrap my head around it.

  • Ansr N

    I am a great Fan of your videos, especially 8266. Would you please, do some videos on interfacing CCTV cams with 8266, so it can stream videos.

    One more project would be play from 8266 12E, internal 4M memory mp3 or wav files without using external active components. (No TF cards, and serial players)

    Any help would be welcome..

    Please do some video on Range testing inside buildings…

    Regards

  • Xavier B

    Great tutorial! Just annoying how when you're typing code, the camera keeps cutting to you… hard to stop at the right moment and copy your code. When you're typing code, keep the camera on the screen! 😀

  • francesco fabbro

    Hi, first of all congratulations for the videos, very complete.
    I have only one question… I cannot make it to install the library ESP8266Wifi…

  • Steve Taylor

    Hello friends new at this coding terminal. the teacher says the words "I will save" this coding . I am a newby at this.How do you save?

  • Steve Taylor

    Well I must say I am stuck on writing simple_webserver.ino to simple_webserver file and saving it. Don't know how to save and the file I have created says its ineligible when I open the file on my Desktop. So looks like I will abandon this tutorial.

  • Pravini Ghadage

    Error opening serial port 'COM4'. (Port busy)
    error: failed reading byte

    what is solution for this error ,i fallow your video completely

  • Lionel Tellem

    That's a very good tutorial tho' but i think it woulld have been much more better if we had a toggle button instead which when pressed executes the toggle function

  • Josef Pepa

    Hi, very nice tutorial. You mentioned that we can connect an other hardware and I wonder if there is a chance to connect USB laser printer, so I can use it as a network printer? If so, what is need it, how exactly it can communicate? Thank you very much for your tutorials and looking forward to see more.

  • Jake Sanchez

    Thank you for this tutorial! Its like you read my mind and told me only what i needed to know lol, the wifes oven is going to be wifi controlled now, the control board went bad, way cheaper to use one of these than a new board.

  • sultan m almodarra

    Thanks! it is well presented, but I have a question;  we can't upload the code itself through WiFi? I mean, make ESP as an access point and upload the code to it after that ?!

  • MrYellowBoss

    WiFi.status() != WL_CONNECTED means that there is no connection right? why print something and use Serial.begin then?

    Nevermind I misunderstood!

  • CyberCookieMonster

    Thanks for the videos. They are very helpful. The use of 204 response code instead of 200 was very useful. The logic in your script is by far the easiest to understand. What I need now, though, is a way to have a html link or button trigger the toggleLED function instead. I want the page to offer the same functionality, but without typing into the URL or having to build a client side phone app. I only need about 10 buttons and it seems I can reuse whatever logic is needed. Thanks!

  • sekmani med amine

    Hi #ACROBOTIC thanks for this tutorial please i have a question
    in my project i have this type of ESP8266 you can see this photo link :http://www.jayconsystems.com/media/catalog/product/cache/1/image/x960/9df78eab33525d08d6e5fb8d27136e95/j/s/js-8266.jpg
    I can do the same thing with this chip ? or i need the nodeMcu

  • Sayedur R Chowdhury

    As instructional videos, yours are great! While a lot of other videos assume that the viewer already knows the basics, you took a different and the correct approach of explaning every single necessary detail. I cannot thank you enough!

  • sekmani med amine

    just one thing i don't understand it
    how can use use a web server and access the esp from anywere without forward and make a static ip ?

  • er raj kumar

    Hello! I am using your code from Github. I am getting my IP every time but nothing on the browser. Every time browser shows an error msg. That "MY IP" did not send any data, ERR_EMPTY_RESPONSE.
    What should I do? I have used chrome and internet explorer as well.

  • vu tran

    When i access to the IP: 192.168.1.100/hi, my browser can not read this page but the serial monitor appear: GET /hi HTTP/1.1. My computer and esp8266 are same network.Can you help me? This is my program:

    #include <ESP8266WiFi.h>
    #include<ESP8266WebServer.h>
    WiFiServer server(80);
    const char *ssid="Hanes 1";
    const char *pass="vmtspk899124";
    void setup()
    {
    Serial.begin(9600);
    WiFi.disconnect();
    delay(3000);
    Serial.println("Start");
    WiFi.begin(ssid,pass);
    while (WiFi.status() != WL_CONNECTED){
    delay(300);
    Serial.print(".");
    }
    Serial.println("Connected. My IP address :");
    Serial.println(WiFi.localIP());
    server.begin();
    }
    void loop()
    {

    WiFiClient client = server.available();
    if (!client) { return; }
    while(!client.available()){ delay(1); }
    Serial.println((client.readStringUntil('r')));
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("");
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    client.println("Welcome!");
    client.println("</html>");
    client.stop();
    delay(1);
    }

  • Larry Poorman

    Excellent tutorial but because I am a greenhorn you caught me up on one thing and it took me a day of searching to find my mistake. The mistake was that in order to get the "toggle" to work one has to enter the ip address/toggle on the browser and not just the ip address alone. Nonetheless keep up the great tutorials!

  • Wilfredo Perez

    When I try to open "simple_webserver.ino" it tells me the file does not exist even though I can find it as ".simple_webserver.ino.swp" in Finder.

  • Si

    Great tutorial, thank you so much for your videos. You really explain all of the functions and jargon in the code and make it much easier to learn. I like your esp8266 OTA video very much also. In that video you referred to your next video being able to send code via OTA at any time without needing to reset. I'm struggling to figure out how to update code.

    For example I'd like to add new firmware to update my led controllers to change virtual pin settings etc.

  • Felipe Andrés González Velásquez

    'vi' is not recognized as an internal or external command,

    operable program or batch file. I got this error how can i solved ?

  • Time Central

    Very nice video!!! Works with an ESP32 (specifically, I have the ESP-WROOM-32 ESP-32s board) with the only changes being the library names. I had to change ESP8266WiFi.h to WiFi.h and ESP8266WebServer.h to WebServer.h. Thank you so much for the time you take to share this information! The audio is very crisp and clear in this, which makes following along easy. As a bonus, now that I have it working, the family is impressed and excited for it's applications (remote control custom lights / remote cat treat dispenser). Thanks once again!

  • Technical Crush

    My nodemcu is not able to connect with wifi router but with mobile hotspot it is connecting…I searched on the internet but not getting a good answer…..can u tell me where could be the problem?

  • allersvp

    after many other YouTube videos i though i have to ready full books myself to understand .. till i got to your videos (calm and step by step) … now i understand everything…. you are the EVER BEST … thanks bro

  • shantanu mohile

    if i type xx.yy.ww.zz/toggle from my phone which is connected to a different network(not to the one which nodemcu is connected) will the led turn on in this case ?

  • Emily Huang

    If we are in a building where they have a network name and each individual has their own username and password to log in to the network, what would be the ssid? Would there be another variable?

  • sergio pena

    Good video , well explained.
    I have a problem, I can control the esp8266 only if my phone or pc is connected to the same wifi network .How can i control the esp8266 out of the wifi network. please advise.

  • Mian Faizan

    Excellent video!
    It really helped me in my project. thumbs up!!!
    I have a question. I want to display data sent from my client to "esp8266 server". How can I do it? or How can I extract parameters form the esp8266 server link?
    Thanks 🙂

  • Nabadweep Chamuah

    Hi Cisco, first of all thank you for making very informative videos. I am trying to connect my NodeMCU 0.9 to my mobile hotspot but not able to connect, I am following all the steps and used the same code that you have used for your case. Please help me in this regard.

  • Gary Green

    WOW, I have tried other tutorials and had no success, but this has been explained clearly, now it WORKS and i understand it. Fantastic well done. Thank you

  • Denis G.

    Will be beautifol to use this webserver in order to have some debug messages… can you make a video with this please ? thanks in advance

  • John Adams

    This video is so helpful, Thank you! But your usage of vi as if it only has insert mode triggers the nerd in me 😉

  • Andrej Cupac

    Best video ever…thank you so much. 1million times better than any other wifi module type tutorial video. Clear, simple, and easy to follow along with. Definitely subscribing to you.

  • Noah Saxenian

    Good tutorial but I have a problem. It connects to the wifi and prints an IP address, but when I plug it into my browser it never loads. Do you know why this is happening?

Leave a Reply

Your email address will not be published. Required fields are marked *