(r3) AWEBServer < IoT_Course

Tags: view all tags
---+ A WEB Server and the HTTP Protocol
---++ Exercise 1: Write a Hello World WEB Server
---++++++ Version 1:

Let's start simple and produce a WEB server that simply 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 />

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

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

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

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

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

_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 creatd with ampy) 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.
---++++++ 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.
---++ Exercise 2: Provide Measurement Data on the WEB Page

Modify the WEB server to provide temperature and humidity measured with the SHT30. The easiest way to accomplish this is static text like in the Hello World HTML page into which the measurements can be inserted. This can be done with _[[https://github.com/pfalcon/utemplate][utemplates]]_, which are provided by _[[https://github.com/pfalcon/picoweb][picoweb]]_. Have a look in the _utemplates_ README.MD and in the examples directory of picoweb to understand how this is implemented.

This is how your WEB site for SHT30 measurements might look like (screen dump of the solution script):

<img alt="sht30WebSite.png" height="254" src="%ATTACHURL%/sht30WebSite.png" title="sht30WebSite.png" width="587" />
---++ Exercise 3: Ajax

The above exercise has a major flaw: For each measurement you must reload the entire page. It would be much nicer it the WEB page could be updated whenever a new measurement comes in.

-- %USERSIG{UliRaich - 2020-05-27}%

---++ Comments

%COMMENT%
Attachments
Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
png	sht30WebSite.png	r1	manage	15.5 K	2020-05-27 - 19:53	UliRaich
Topic revision: r3 - 2020-05-27 - UliRaich