Run a WebServer & mDNS server to host a webpage on your ESP32 or NodeMCU boards

so in this video we'll be learning about how we didn't run the ESP acing web server on the ESP to success and espn3 to board and after that we'll also learn about how to run the EM DNS server on both the boards let's get started so if you're new to my channel let me tell you that I'm running a series whose aim is to make a local area network based home automation system in which we can control the planes' from the webpage and we can also go into the census data on that FET page I will be using the ESP two sixes and SBHC two board running a web server on it so we don't require an external an outdoor on an external server for that so during this journey will be learning about WebSocket server web servers em DNS server then HTML Javascript and many more such things okay so I divided each and every topic with different episodes so if you are interested in making this project or if you are interested in any of the topics which I discussed us now make sure you subscribe the channel so that you don't miss any of the episode so that being said let's start with the first episode we'll be learning about the acing web server am DNS server let's jump onto the computer so this is a code for the first episode and I'll be going through each and every line and explaining you the purpose of that line in the code starting with these all lines then these are lines in the code are written just to make this Court comfortable with both ESP 2 6 6 and ESP 3 2 board see what happens is there are some of the libraries which are dedicatedly made for ESP 2 6 6 mode and there are some libraries which are dedicatedly made for ESP 3 2 ports so what I did here is I just mentioned when if condition that if esp8266 mode is declared use the libraries made for ESP 2 6 6 and if the es potato board is declare use the library made for ESP say to port so as you can see here is the if condition then if esp8266 use this libraries and if ESP 3 tube or use this library so these lines will make the code more dynamic and more flexible ok after that we are using the library called ESP ASIC webserver now this library may not be included in your board package in my previous video I said that it is included in the boards packages but it is not included the esp8266 web server libraries is included with the esp8266 poor packages now this is different than the webserver now how it is different for that you can just go to their website and here they have mentioned some of the benefits of async web servers compared to the web server out of that the key feature is the key benefit is it can handle more than one connections at the same time and there are several more benefits of using async webserver okay so if you want to read out this ayat as a link for this page in the description so I'm gonna reading the benefit you can just download this library from here and install it on your ID no ID okay so after enjoying the library this move ahead with the cool so after that I have declared the server and initialize the server at port eight zero okay so now some of you must be knowing that port 80 is made for HTTP protocol okay so using this port we can you know communicate between the server and the client using the HTTP protocol so there are some of the ports which are dedicated Lea made for different protocols so if I show you this page then this page will tell you that which protocol uses which port so if I go ahead with the port 80 then as you can see this port is utilized by the HTTP protocol and the HTTP protocol is assigned to 4 4 3 port number if I'm not wrong so yeah here it is so for 4 3 port number is assigned to HTTP protocol so there are different ports dedicatedly made for different protocols but not all the ports are engaged there are some protocols would have not a not utilized which we can use it for our projects ok so let us come back to the core so here we are using the HTTP protocol hence I am initializing the server and port 80 ok after that I am using the function call why did not found now I like into the use case of this function later in this video okay so when you do this setup part of the code so first of all I mean slicing the serial monitor or the serial communication at the baud rate 1 1 phi2 double 0 okay after that I'm using this vy phi dot soft AP function now let me tell you something you must have made the web server based projects using esp plus 6 is RESP 3-2 board in which you must have connected the ESP boards with your router and the router will assign a local IP address to the ESP board and using that local IP address we can communicate with the web server running on the ESP ports but in this project or rather in this whole series we won't be using that matter rather than will be making an ESP board acting as a hotspot or may be acting as an access point on which will be connecting our clients maybe a laptop or smartphone ok so with that we don't need an external router for this we can just directly connect our smartphone with the access point credentials provided by the ESP server so for that you have to use this Wi-Fi road sauce AP function so inside that function you to provide two parameters one is the side in name and second is the password so for that I say D name I provided techie SML and for the password I just put it blank because I want to make it as an open network but if you want to make it more secure you can just write down the password for your ESP acting as a host hot squad or access point okay after they I'm this printing soft ap on the serial minder and after then I will be printing the IP address of the soft ap so generally this IP address is common 192.168.0.1 okay so that IP address will be shown on the serial monitor and by just typing that IP address on a smart phone we can access the web server running on the esp8266 bogie so after this I have commented some of the line this is used for M DNS server which we'll be discussing in the second part of the video key so let's just skip it for now so I'm going to that we have three more functions which are server dot on server dot on not found and server dot bacon okay so whatever let's discuss the server dot begin and after that we'll be discussing this to of functions practically or with the web browsers okay so what sort of begin function we'll do it we'll just start the web server okay as we use the serial dot begin to initialize the CL communication in the same manner I will be using server dot begin to initialize the web server on the ESP based pool okay so this will start the web server on it now what I will do I will straight away upload this code and after that we'll see that what's the use of this this and this function inside the code okay so let us select the right board and port so currently I'm using this sp3 two board so board is already selected and the port is also selected what I will do L straight away upload this code onto my ESP to board but this port will work on no times your board as well Zoe how is the code is successfully uploaded that is open the serial monitor and light middle-ages reset this would okay okay so as you can see here it is printed as soft baby and the IP address is printed on the board so first of all what we'll do is we need to connect our laptop or mobile phone to the access point created by the ESP t2 board so for that I will go to my Wi-Fi settings and yeah here is one network with the named Peggy SMS - I will connect my laptop to it so yes we are successfully connected with the ESP board acting as a access point now we'll go to this IP address so father will open this rouser and here I will request one link 192.168.1.1 okay okay so as it ends here hello world is printed on the skin now let us understand the code okay so what happens is whenever you request the IP address it is basically the home page of that web server okay which is defined by a backslash so if I write IP address max less it will land on the same page okay so this is basically the home page so here on the server dot on function we have defined the home page by writing the backslash so what this function says that whenever I receive this backslash from the client from any of the client I need to send hello world to that client okay so when you are requesting the IP address are basically whenever we are requesting the home page this function will be called and inside this function I have first of all declare a string with the name Messel inside that message I have written as hello world and that string is sent by this request.send function provided three parameters the first is the status code so 200 status code is for a successful communication then we will be providing that by which method we are sending the data so basically we are sending the plain text message text less HTML may also work but text slash plain makes much more sense okay so I'll just write text plain I'm going to provide the payload so here in our case the payload is the message okay so this is a string okay so whenever a client is requesting a home base it will just print hello world on the screen which we have already seen inside the web browser okay so i refresh this page as you can see I'm getting the hello world response so this is the importance of this server dawn function after that let us see the importance of server dot nod form now what if I request the link slash page one okay if I click on the enter button let's see what happens so it says not found okay so let us see why it is brain-dead has not found so as you can see in the code we have only one function that is responding to the clients okay now this function will return the data to the clients only if the client is requesting the home page now if a client requests any other page first of all we need to define the page inside the web server then the ESP board conserved webpage to the client okay but right now in this case we don't have any other page except the home page and that's why what this code did is as it as it didn't find that page inside the web server it just straightaway called this function called on not function so this function will be called whenever a page requested by the client is not present inside your web server okay so in this condition the client requested a page one which was not at all defined in the web server hence this program the jump into the or not found and inside the or not found function we have defined a one more function called not found and if we go inside this not found function we are sending the response to the client as first of all we'll send the 4:04 status code which is responsible for page not found okay after that we are just sending the text slash plain which we have discussed here as well and after that we are just sending the payload as not found which is printed here okay okay if I just write here as page not found then this particular string will be printed inside the web page okay so this was all about the basic web server code running on our system now let us take in one more step let us define that page one here okay for that I will just copy this much line of code well paste it here we'll write page one inside the URI okay now wherever we are defining any you are a other than the home page we need to define the HTTP or request method okay so the client will be requesting with the HTTP GET method so we need to define here the method through which the client will be requesting the data okay so I returned the actually began method so whenever any client is requesting this page what I will do is I will just print welcome to pH one okay so this will be the response which will be sent to the server by the text/plain method okay so this will be returned to the server with the status code 200 okay so we do have one more page inside the web server okay so if I upload this code I should get the response on the page one as well okay okay so the code is successfully uploaded okay the soft ap started my computer is already connected like a SMS and now if I just enter this URL now as you can see we have got the response as welcome to page one because the page one already exists inside the ESP webserver okay now if I write any page - that won't be detected by the server hence it will print as page not found okay as you can see the page not found is printed so this was all about the explanation of the code now one more thing is remaining with this episode is the EM DNS server now what happens is so here as you see we have to define the IP address whenever we want to communicate with the ESP web server but what happens is and human brains can remember the name much more easily as compared to the numbers while this computers and the machines can remember the numbers better than the name okay so make so to make the communication between the human and the Machine easier mdns comes in the picture what empty and so what DNS will do DNS stands for domain name server okay so what DNS will do DNS will assign a name to IP address okay for example you write google.com but google.com is not directly given to that machine them the google.com will be given to the domain name server and domain names are always see that which IP address is assigned for google.com after that it will give the IP address and through the IP address the machine will communicate between each other okay so that's the importance of DNS so mdns makes our task way more easier because we don't need to remember the IP address at all we can just remember the name of that server or the computer ok so here this let us type the mdns code so I will just uncomment this much line of code so here we have to define the name which we want to assign to this IP address so in my case I are written s e SP okay so if I just upload this much line of code let's see what's the difference okay okay so the code is successfully uploaded if I want to see them all done as you can see the soft API is started and after that mdns responder is also started let us jump onto the web browser before that let me just confirm that a computer is connected to ESP access point yeah it is connected to the deck a service access point only okay so what happens is if I request the IP address that this project will work as before okay so as you can see the hello world is printed which is as expected but now if I type ESP dot local and if I request this much line of code okay so as you can see by request in the ESP don't local back slash we are getting the same response now if I write ESP dot locals last page one yeah I got the same response as welcome to page one so do you notice the difference so using the EM DNS server now we don't need to remember the IP address we can just write ESP dot local and we can just write our webpage on which we need to land like page 1 page 2 any of the page which you have created and we are good to go to that page so no need to remember the IP address anymore thanks for mdns ok so this was all about the tasks of the first episode we learned about the ESP async webserver we learned about them in the mdns web server as well so ending this episode here so in the next episode we'll learning about the basic of HTML and we'll be creating an HTML page and we'll sending that page to that to the client okay so yeah ending this video here this was all about the first episode I hope you like it I hope you enjoyed it I hope you load it so just wait for mine I should in the like snow then share with me take a SMS

Channel: techiesms

Views: 31,549

Keywords: espasyncwebserver, webserver, softap, mdns, esp32, nodemcu, webpage, websockets, javascript

Id: cWZP7Y8qP6E

Length: 14min 14sec (854 seconds)

Published: Sat Apr 25 2020