(r4) WEBServerPicoweb < IoT_Course

Tags: view all tags

---+ A WEB Server on the ESP32
---++ A "Hello World!" WEB server

Writing a WEB server from scratch is not a trivial task but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On !MicroPython you find several WEB servers ready for deployment. I have selected [[https://github.com/pfalcon/picoweb][picoweb]] because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in !MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the !MicroPython binary making it available for immediate use.

As examples we provide 3 different versions of the Hello World WEB server:
   * Version1 does not use picoweb at all but opens a socket and listens to requests. Once it sees a request it sends some HTML text, stored in the !MicroPython source code
   * Version 2 exports the HTML code to a separate HTML file. It uses picoweb and answers if either serverHost/ or serverHost/index.html is requested. The HTML file is read and its text returned to the caller
   * Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well. space in its flash, it is interesting to compress the HTML file to save space.
---+++++ Version 1

Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. In the first version we will create a TCP server creating a stream socket and binding to port 80. <br /><br />

s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)<br />s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:<br />   s.bind(('',80))<br />except OSError as exception:<br />   if exception.args[0] == uerrno.EADDRINUSE:<br />       print("Socket is already bound, please reset the machine")<br />       sys.exit()

The server then starts listening for an incoming connection request and establishes a connection by accepting it. <br /><br />

s.listen(5)<br />print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")<br />while True: <br />   conn,addr=s.accept()    print("GOT a connection from %s" % str(addr))

Finally it reads an http request from the connection and answers with its Hello World page: <br /><br />

   request=conn.recv(1024)<br />   print("Content %s" % str(request))<br />   request=str(request)   response=html    conn.send(response)    conn.close()

_html_ is the http string to be sent.

Please check [[https://docs.micropython.org/en/latest/library/usocket.html][https://docs.micropython.org/en/latest/library/usocket.html ]]for more details.
---++++++ Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: _ampy mkdir /html)_ on the ESP32. Now we can use a ready made Web server for !MicroPython, _[[https://github.com/pfalcon/picoweb][picoweb]]_ to serve the page. _picoweb_ and _utemplates_ (see exercise 2) are already included in the !MicroPython binary.

Studying <i>example_webapp.py </i>in the base directory of <i>picoweb </i>will show you how to do this.
---++++++ Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.
---++ 

and finally a screen dump of the WEB pages as seen by the browser

<img alt="helloWorldWEBServerV1.png" height="430" src="%ATTACHURL%/helloWorldWEBServerV1.png" title="helloWorldWEBServerV1.png" width="934" />
---++ Making the WEB page interactive

The WEB server above has one major flaw: for each measurement the complete page must be reloaded. Wouldn't it be nice if we could keep the table and only replace the measurement results and time stamp?

Such types of actions can be accomplished with javascript. javascript is a full programming language for WEB programming running on the client side, in the browser. Teaching also javascript would largely exceed the scope of this course. However, if you don't know javascript well enough (as was the case for me!) here is a nice tutorial which will put you on track quickly:

https://www.w3schools.com/js/DEFAULT.asp
---++ Controlling the ESP32 User Led

Before looking at how to display the SHT30 measurements on our WEB server let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off.

We will start off with the light bulb example from the [[https://www.w3schools.com/js/js_intro.asp][introduction]] in this tutorial, replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.

<img alt="dummyLED.png" height="295" src="%ATTACHURL%/dummyLED.png" title="dummyLED.png" width="871" />

Communication between the WEB client, on which javascript is running, and the WEB server on the ESP 32 can be accomplished with <b>A</b>synchronous <b>J</b>avaScript<b> A</b>nd <b>X</b>ML (AJAX). To understand this you will have to go through yet another tutorial: [[https://www.w3schools.com/xml/ajax_intro.asp][the AJAX tutorial]].

Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript.

-- %USERSIG{UliRaich - 2020-04-28}%

---++ Comments

%COMMENT%

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who
png	dummyLED.png	r1	manage	44.4 K	2020-06-04 - 09:03	UliRaich
png	helloWorldWEBServerV1.png	r1	manage	65.8 K	2020-04-28 - 12:55	UliRaich
png	helloWorldWEBServerV1Log.png	r2 r1	manage	74.5 K	2020-04-28 - 13:11	UliRaich
txt	helloWorldWebServerV1.py.txt	r1	manage	1.6 K	2020-04-28 - 13:14	UliRaich
txt	helloWorldWebServerV2.py.txt	r1	manage	0.7 K	2020-04-28 - 12:56	UliRaich
png	led-blue-off.png	r1	manage	48.6 K	2020-06-04 - 09:05	UliRaich
png	led-blue-on.png	r1	manage	58.4 K	2020-06-04 - 09:05	UliRaich
gif	pic_bulboff.gif	r1	manage	2.4 K	2020-06-04 - 09:05	UliRaich
gif	pic_bulbon.gif	r1	manage	2.5 K	2020-06-04 - 09:05	UliRaich
png	wifi_connect.png	r1	manage	194.5 K	2020-04-28 - 08:02	UliRaich
txt	wifi_connect_anonymous.py.txt	r1	manage	0.4 K	2020-04-28 - 08:02	UliRaich

Topic revision: r4 - 2020-06-04 - UliRaich