Difference: AWEBServer (1 vs. 11)

Revision 112022-11-16 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 54 to 54
 

Exercise 5: Server Side Events

Changed:
<
<
In case of AJAX it is the client (browser) who repeatedly asks for new measurement, and it is therefore the browser who determines the timing. Often however, the server should send its data as soon as they are ready. This can be achieved with "server side events". Please see this tutorial for more details: https://www.w3schools.com/html/html5_serversentevents.asp]].
>
>
In case of AJAX it is the client (browser) who repeatedly asks for new measurement, and it is therefore the browser who determines the timing. Often however, the server should send its data as soon as they are ready. This can be achieved with "server side events". Please see this tutorial for more details: https://www.w3schools.com/html/html5_serversentevents.asp.
  Modify exercise 4 to use server side events instead of AJAX for the communication between server and browser.

Exercise 6: Web Sockets

Changed:
<
<
While AJAX and server side events depend on the cmd/response protocole off HTML, web sockets use the own protocol and provide full duplex communication.
See https://www.tutorialspoint.com/websockets/index.htm for more details.
>
>
While AJAX and server side events depend on the cmd/response protocol off HTML, web sockets use their own protocol and provide full duplex communication.
See https://www.tutorialspoint.com/websockets/index.htm for more details.
  First study the websocket examples given in the microdot examples section and then rewrite exercise 4/5 using web sockets.

Revision 102022-11-12 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 26 to 26
  microdot_import.png
Changed:
<
<
For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb itself. The examples demonstrate most of picoweb's features.
>
>
For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb code itself. The examples demonstrate most of picoweb's features.
microdot eases your task because it provides the necessary documentation as well as the examples.

 
  • Modify the hello.py example from microdot to display your own WEB page
  • Separate the HTML code into a separate file and upload it to the "html" folder on the ESP32. Create this folder if it does not exist yet.
Changed:
<
<
  • Compress the HTML with gzip and use the compressed file instead. You must specify
    Content-Encoding" : "gzip"
    for this to work
>
>
  • Compress the HTML with gzip and use the compressed file instead. You must specify
    Content-Encoding" : "gzip"
    in the response header for this to work
 

Exercise 3: 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 utemplates, which are provided in the MicroPython firmware. Have a look in the utemplates README.MD and at the hello_utemplate_async.py example of microdot to understand how this is implemented.

Line: 47 to 46
  To improve your program even further, you can plot the incoming measurements with the Highcharts JavaScript library.
Added:
>
>
HighCharts.png

Add a program that controls the user programmable LED on the CPU via the WEB. Use two buttons to switch the LED on or off and an image to show its current state.

ledControl.png

Exercise 5: Server Side Events

In case of AJAX it is the client (browser) who repeatedly asks for new measurement, and it is therefore the browser who determines the timing. Often however, the server should send its data as soon as they are ready. This can be achieved with "server side events". Please see this tutorial for more details: https://www.w3schools.com/html/html5_serversentevents.asp]].

Modify exercise 4 to use server side events instead of AJAX for the communication between server and browser.

Exercise 6: Web Sockets

While AJAX and server side events depend on the cmd/response protocole off HTML, web sockets use the own protocol and provide full duplex communication.
See https://www.tutorialspoint.com/websockets/index.htm for more details.

First study the websocket examples given in the microdot examples section and then rewrite exercise 4/5 using web sockets.

 -- Uli Raich - 2020-05-27

Comments

Line: 58 to 74
 
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"
META FILEATTACHMENT attachment="picowebInstallation.png" attr="" comment="" date="1664791079" name="picowebInstallation.png" path="picowebInstallation.png" size="13656" user="UliRaich" version="1"
META FILEATTACHMENT attachment="microdot_import.png" attr="" comment="" date="1668262786" name="microdot_import.png" path="microdot_import.png" size="5752" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="HighCharts.png" attr="" comment="" date="1668277852" name="HighCharts.png" path="HighCharts.png" size="96871" user="UliRaich" version="1"
META FILEATTACHMENT attachment="ledControl.png" attr="" comment="" date="1668278598" name="ledControl.png" path="ledControl.png" size="52502" user="UliRaich" version="1"

Revision 92022-11-12 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 14 to 14
 The page seen by the browser will look similar to this:

helloWorldWebServerV1.png

Deleted:
<
<

Exercise 2: picoweb

 
Changed:
<
<
Download picoweb and its example programms from gitthub: https://github.com/pfalcon/picoweb.
>
>
The following exercises can be done on either the picoweb or the microdot framework. Because of the different calling sequences, the solutions will be a little different, though. Also, picoweb does not offer web socket support and the web socket exercise can therefore not be implemented on picoweb.

Exercise 2: microdot

 
Changed:
<
<
You can find several tutorials on picoweb on the Internet: You may neglect the chapters on picoweb installation because the MicroPython firmware already contains a copy of picoweb:
>
>
Download microdot and its example programs from gitthub: https://duckduckgo.com/?t=ffab&q=microdot+github&ia=web
 
Changed:
<
<
picowebInstallation.png
>
>
The microdot documentation can be found at https://microdot.readthedocs.io/en/latest/

Both, picoweb and microdot are already included in the microPython firmware:

microdot_import.png

  For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb itself. The examples demonstrate most of picoweb's features.
Changed:
<
<
Re-write the example from exercise 1 using the picoweb framework. Now the HTML page is separated from the code and must be stored in a separate file. Upload this file to the ESP32 into a folder named html. Create the folder if it does not exist yet. You may also compress the HTML file with gzip and transfer the compressed file to the browser thus limiting the size of the message that must be sent.
>
>
  • Modify the hello.py example from microdot to display your own WEB page
  • Separate the HTML code into a separate file and upload it to the "html" folder on the ESP32. Create this folder if it does not exist yet.
  • Compress the HTML with gzip and use the compressed file instead. You must specify
    Content-Encoding" : "gzip"
    for this to work
 

Exercise 3: Provide Measurement Data on the WEB Page

Changed:
<
<
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 utemplates, which are provided by picoweb. Have a look in the utemplates README.MD and in the examples directory of picoweb to understand how this is implemented.
>
>
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 utemplates, which are provided in the MicroPython firmware. Have a look in the utemplates README.MD and at the hello_utemplate_async.py example of microdot to understand how this is implemented.
  This is how your WEB site for SHT30 measurements might look like (screen dump of the solution script):

sht30WebSite.png

Exercise 4: Ajax

Changed:
<
<
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 is requested.
>
>
The above exercise has a major flaw: For each measurement, you must reload the entire page. It would be much nicer if the WEB page could be updated whenever a new measurement is requested. This can be implemented using AJAX. Now you will need some JavaScript programming to access the AJAX commands. If you have no experience with JavaScript programming and/or AJAX, please go through the following tutorials first: Using AJAX it is the client (WEB browser) which determines the timing. Please ask for a new measurement every 3-5 s.

To improve your program even further, you can plot the incoming measurements with the Highcharts JavaScript library.

  -- Uli Raich - 2020-05-27
Line: 49 to 57
 
META FILEATTACHMENT attachment="http.png" attr="" comment="" date="1664785077" name="http.png" path="http.png" size="107586" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"
META FILEATTACHMENT attachment="picowebInstallation.png" attr="" comment="" date="1664791079" name="picowebInstallation.png" path="picowebInstallation.png" size="13656" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="microdot_import.png" attr="" comment="" date="1668262786" name="microdot_import.png" path="microdot_import.png" size="5752" user="UliRaich" version="1"

Revision 82022-10-03 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 45 to 45
 
<--/commentPlugin-->
Changed:
<
<
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1590609204" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"
>
>
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1664806877" name="sht30WebSite.png" path="sht30WebSite.png" size="22399" user="UliRaich" version="2"
 
META FILEATTACHMENT attachment="http.png" attr="" comment="" date="1664785077" name="http.png" path="http.png" size="107586" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"
META FILEATTACHMENT attachment="picowebInstallation.png" attr="" comment="" date="1664791079" name="picowebInstallation.png" path="picowebInstallation.png" size="13656" user="UliRaich" version="1"

Revision 72022-10-03 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 14 to 14
 The page seen by the browser will look similar to this:

helloWorldWebServerV1.png

Changed:
<
<

Exercise 2: Provide Measurement Data on the WEB Page

>
>

Exercise 2: picoweb

Download picoweb and its example programms from gitthub: https://github.com/pfalcon/picoweb.

You can find several tutorials on picoweb on the Internet:

You may neglect the chapters on picoweb installation because the MicroPython firmware already contains a copy of picoweb:

picowebInstallation.png

For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb itself. The examples demonstrate most of picoweb's features.

Re-write the example from exercise 1 using the picoweb framework. Now the HTML page is separated from the code and must be stored in a separate file. Upload this file to the ESP32 into a folder named html. Create the folder if it does not exist yet. You may also compress the HTML file with gzip and transfer the compressed file to the browser thus limiting the size of the message that must be sent.

Exercise 3: 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 utemplates, which are provided by 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):

sht30WebSite.png

Changed:
<
<

Exercise 3: Ajax

>
>

Exercise 4: 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 is requested.
Line: 34 to 48
 
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1590609204" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"
META FILEATTACHMENT attachment="http.png" attr="" comment="" date="1664785077" name="http.png" path="http.png" size="107586" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="picowebInstallation.png" attr="" comment="" date="1664791079" name="picowebInstallation.png" path="picowebInstallation.png" size="13656" user="UliRaich" version="1"

Revision 62022-10-03 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Changed:
<
<
Follow the explanation in WEBServer and create the 3 versions of the Hello World Web Server.
>
>
Write a simplistic WEB server, serving a single WEB page. This server is very similar to the TCP server written in the [WiFi]] exercises. It now waits for a connection on port 80, reads a request from the browser, and sends a simple HTML page as its response. Interpretation of the incoming request is not necessary because the server is only capable of sending a single page anyway.

Print the incoming HTTP request, which will look similar to this:

http.png

The request starts with "Content Get / HTTP/1.1"

The page seen by the browser will look similar to this:

helloWorldWebServerV1.png

 

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 utemplates, which are provided by picoweb. Have a look in the utemplates README.MD and in the examples directory of picoweb to understand how this is implemented.

Line: 22 to 32
 
<--/commentPlugin-->

META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1590609204" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="http.png" attr="" comment="" date="1664785077" name="http.png" path="http.png" size="107586" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"

Revision 52020-06-04 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Deleted:
<
<
Version 1:
 
Changed:
<
<
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.

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

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

s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True: 
    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:

    request=conn.recv(1024)
    print("Content %s" % str(request))
    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 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, 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.

>
>
Follow the explanation in WEBServer and create the 3 versions of the Hello World Web Server.
 

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 utemplates, which are provided by picoweb. Have a look in the utemplates README.MD and in the examples directory of picoweb to understand how this is implemented.

Line: 31 to 13
 sht30WebSite.png

Exercise 3: Ajax

Changed:
<
<
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.
>
>
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 is requested.
  -- Uli Raich - 2020-05-27

Revision 42020-05-28 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Version 1:
Changed:
<
<
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.

>
>
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.

 s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
    s.bind(('',80))
except OSError as exception:
    if exception.args[0] == uerrno.EADDRINUSE:
        print("Socket is already bound, please reset the machine")
        sys.exit()
Changed:
<
<
The server then starts listening for incoming an connection request and establishes a connection by accepting it.

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

 s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True: 
    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:

Revision 32020-05-27 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 18 to 21
 Please check https://docs.micropython.org/en/latest/library/usocket.html for more details.
Version 2:
Changed:
<
<
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, picoweb to serve the page.
>
>
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, 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

Changed:
<
<
Modify the WEB server to provide temperature and humidity measured with the SHT30.
>
>
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 utemplates, which are provided by 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):

sht30WebSite.png

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.

  -- Uli Raich - 2020-05-27

Comments

<--/commentPlugin-->
Added:
>
>
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1590609204" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"

Revision 22020-05-27 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Added:
>
>
Version 1:
 
Changed:
<
<
Let's start simple and produce a WB server that simply sends "Hello World!" to the browser when called.
>
>
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.

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

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

s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True: 
    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:

    request=conn.recv(1024)
    print("Content %s" % str(request))
    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 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, picoweb to serve the page.

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.

  -- Uli Raich - 2020-05-27

Revision 12020-05-27 - UliRaich

Line: 1 to 1
Added:
>
>
META TOPICPARENT name="Exercises"

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Let's start simple and produce a WB server that simply sends "Hello World!" to the browser when called.

-- Uli Raich - 2020-05-27

Comments

<--/commentPlugin-->
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback