WebSockets + ESP8266 | a Tutorial for Beginners + Code

What are WebSockets? and when do you use the? Typically, in a client server architecture,  data can be pulled or pushed. So web browsers   can update data by pulling it or wait for  updates to be pushed. In the polling scenario.   the browser initiates the request for the  information and if we need an update we   do a second request or a refresh. and if we  only need to update a small part of the page   we are kind of forced to refresh the whole  page. and this can be a little inefficient.   luckily ajax was introduced over 20  years ago. this allows browsers to   only request update data from the server  and refresh a smaller part of the page.   this was great however as you might have guessed  the browser needs to keep pulling the server   for data whether there was new data or not. you  could be pulling for a very long period of time   without any updates. depending on the pulling  interval we can just miss an update and have to   wait the full update window to get the latest  data. this is why a push mechanism was needed   and this is where websockets were introduced in  2008. the communication can be initiated either   by the browser or the server. the browser  doesn't need to keep pulling for data.   as soon as the server has an update it  can push it immediately to the browser. Let's walk through a demo on an esp8266  microcontroller. in this example I am going to use   a wemos d1 mini board but any module or board will  do. watch my esp8266 video if you are not familiar   with these terms. for sockets to work they need  to be initiated on both the server and the client.   but before we jump into this exercise, let me  first show you what we are trying to build.   on the left, you see the wemas d1 mini connected  to a potentiometer. on the right hand side is the   web page with the socket installed showing the  values as they are coming in. now let's program   it and see what's needed first we need to install  a websocket library. there are many out there   but I picked one called websockets by marcus  sattler because it looks very active on git. Now let's open the wopsocket  server example that came with it. in this basic example, it starts  by including the libraries,   then it moves on to create an instance of the  wapsocket server and make it listen to port 81.   further down, the wi-fi credentials are  located and they need to be updated. then at the bottom it listens to requests once  a request is received an event is triggered. some examples of these events are: the disconnect,  connect and text received. in this example,   we will not be using any of these events since  we will be focusing on data flow from the server.   but if you want to handle data going into the  server this is where you do it. now that we have   the socket server, added we need to also  include a web server that will host our   code. there are plenty of examples that come  with the esp library. but basically what we   need is to include the web server library at  the top then initiate the server on port 80. then start the server and add events to  handle the client requests. in this example,   I added two handlers: one for the home page and  one to handle the not found errors. then in the   loop function, we listen to the new requests  the main page is handled by the code inside the   html template block. this block includes the  entire html code that is sent to the client. inside the javascript block of that file,  it contains the socket setup for the client.   it starts by creating a socket object and makes  it connect to our socket server on port 81,   if you remember from earlier. this socket object  can respond to multiple events. the one that is   important for us is called onmessage. this event  triggers when the socket receive data from the   server and you can do whatever you want with it.  for example here, I made it print the message and   assign the value to a paragraph block called  mrdiy_value. this block is located right below   it here in the html code. so now that we have  the socket setup on the server and the client,   we can start sending data from the server  and this is done here. so in our example,   I attach the potentiometer and I will be sending  its value over to the socket. so first, I started   by reading the analog pin value and then push the  value over the socket. any changes to the analog   pin value should be reflected immediately on the  client. and as we have seen from before this is   exactly what happened. the values are communicated  instantly. and this is the power of sockets.   If you have been following me, you might have  noticed my noise level indicator project.   in it, I have used websockets. I used it to  update the visual indicator for the audio levels. One last thing I want to flag is web sockets don't  dictate how we format our data. so we can send   simple strings or more complex structures like  xml or even pure binary data it really comes down   to the application and what kind of data is sent  websockets are very powerful once you understand   how they work the websocket library examples and  documentation are a great place to get started   I will also share the source code from this  video if you want to use it as a starting point   I hope that clarified websockets for you  and made you understand their benefits Thank you for watching and  see you in the next one!  Peace.

Channel: MrDIY

Views: 2,050

Keywords: DIY, MrDIY, esp8266 websocket, wemos d1 mini project using websocket, how to use websockets with esp8266, ESP8266 weboscket tutorial, websocket sample code, websocket explained, web socket, javascript websocket, wesockets esp8266, web sockets esp8266, wemos1 d1 mini websocket code, websocket using arduin ide

Id: fREqfdCphRA

Length: 6min 57sec (417 seconds)

Published: Wed Jul 14 2021