{"id":13141,"date":"2017-02-03T21:02:44","date_gmt":"2017-02-04T02:02:44","guid":{"rendered":"http:\/\/embedded-lab.com\/blog\/?p=13141"},"modified":"2023-04-11T22:17:32","modified_gmt":"2023-04-12T02:17:32","slug":"tutorial-5-setting-esp8266-web-server","status":"publish","type":"post","link":"https:\/\/embedded-lab.com\/blog\/tutorial-5-setting-esp8266-web-server\/","title":{"rendered":"Tutorial 5: Setting up an ESP8266 Web Server"},"content":{"rendered":"

In this tutorial, we will explore how to setup an ESP8266 web server to\u00a0serve an webpage that can be displayed\u00a0on a client’s browser. The client can be any other computer, smartphone, or tablet connected to the same WiFi network. The webpage will also provide an user interface to allow you to toggle an I\/O pin of the ESP8266 hardware.<\/p>\n

\"ESP8266<\/a>

ESP8266 Webserver setup tutorial<\/p><\/div>\n

Hardware Setup<\/h3>\n

There is nothing much to do in the hardware setup of this experiment. In your EasyESP-1 board, all you need to do is to connect the LD1 pin to D1 pin using a jumper cable. This will connect the LD1 LED on board\u00a0to the D1 I\/O pin of the ESP8266.<\/p>\n

\"Setup\"<\/a>

Hardware Setup<\/p><\/div>\n

Software<\/h3>\n

As mentioned above, this tutorial illustrates how to\u00a0create a standalone local web server using EasyESP-1. The web server will respond to a client’s request with a web page that will allow the user to toggle the LED connected to the D1 I\/O pin. The first step to do that is to\u00a0create a server object, which is done with the following statement.<\/p>\n

\n
WiFiServer server<\/span>(80<\/span>);<\/pre>\n<\/div>\n
The server will respond to clients on port 80. You need to provide the credentials (network SSID and password) to connect to the chosen WiFi network. You can initiate the connection using WiFi.begin(ssid, password)<\/strong> function. Once connected to the network, you can find out the local IP address assigned to your ESP8266 using WiFi.localIP()<\/strong>. The complete code for this tutorial is posted below. The content of the webpage is defined in the string variable HTMLpage<\/strong>.<\/p>\n\n
#include <\/span>\n#include <\/span>\n#include <\/span>\n#include <\/span>\n \nESP8266WebServer Webserver(<\/span>80<\/span>)<\/span>;<\/span>\n \n\/\/ Replace with your network credentials<\/span>\nconst<\/span> char<\/span>*<\/span> ssid =<\/span> "your network ssid"<\/span>;<\/span>\nconst<\/span> char<\/span>*<\/span> password =<\/span> "password"<\/span>;<\/span>\n \nString HTMLpage =<\/span> ""<\/span>;<\/span>\nint<\/span> LED =<\/span> D1;<\/span>\n \nvoid<\/span> setup(<\/span>void<\/span>)<\/span>{<\/span>\n  HTMLpage +=<\/span> "<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ESP8266 Webserver Demo (Toggle LED)<\/h3>\n
LED