This document outlines how web servers can be used for internet of things (IoT) devices and gadgets. It discusses using HTTP and HTML to create web interfaces that can be accessed from tablets and browsers. It also covers setting up a web server on an IoT board to serve static files and templates, as well as using web services and web sockets to asynchronously refresh data without reloading pages. Templates are used to dynamically fill pages with variable data from sensors or payloads. The document provides an introduction to these concepts and technologies for building web interfaces and servers for IoT gadgets and devices.

1. Web servers for the
Internet of Things
SUMMER SCHOOL

2. Outline
Web server
HTTP
Gadgets
IoT Webserver
Web templates
Web services
Web socket
Questions
2

3. Web server
3

4. What is a web server
Software that implements HTTP/HTTPS
Mainframes
Computers
Gadgets
4

5. Gadgets?!
5

6. What HTTP?
Widely used
Easy to implement
Text based
HTML
◦ Simple and flexible UI
◦ JavaScript runs in almost any browser
◦ Replace displays
6

7. UI
Gadgets prefer HTML UI
Accessible from the tablet
Wireless “display”
Web language
Gadgets are using less displays
Expensive
Fixed
Special software
7

8. HTTP
8

9. HTTP
9
Image from https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/HTTP_Basics.html

10. HTTP
Request
◦ Headers
◦ Method
◦ URL
◦ Query String
◦ Upload body
Response
◦ Status
◦ Headers
◦ Data
10

11. Query
http://address[:port]URL?querystring
http://wyliodrin.cs.pub.ro/projects?show=true
Address?
Port?
URL?
querystring?
11

12. Query
http://address[:port]URL?querystring
http://wyliodrin.cs.pub.ro/projects?show=true
Address? wyliodrin.cs.pub.ro
Port? 80
URL? /projects
querystring? show=true
12

13. Methods
GET
◦ Request objects without sending data
POST
◦ Modify objects with data that you are sending
PUT
◦ Create new objects with data that your are sending
DELETE
◦ Delete objects without sending data
13

14. HTTP
14
Image from https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/HTTP_Basics.html

15. Gadgets
15

16. Webserver for the gadgets
16

17. Web
Web request
◦ Starts a webserver
◦ Sets up static folder
◦ Stores
◦ Html
◦ Javascript
◦ Css
http://address:port/static/index.html
17

18. Web
Web request
◦ Route
◦ Method
◦ Port
Message
{
payload: query string / upload data
req: request
res: response
next:
}
18

19. Web response
19
Web response
◦ Input from a web request
◦ Sends the payload
◦ Redirect
http://address:port/ redirects to
http://address:port/static/index.html

20. Run the server
Get the IP of the board
◦ Shell
◦ ifconfig
In the same network
http://172.17.0.82:5000/
20

21. IoT Server
21

22. IoT Server
Server with public IP address
A gadget without pin access
Good for web server
◦ Web pages
◦ API
22

23. IoT Server
23

24. Web templates
24

25. Web template
Web template
◦ Loads a templates
◦ Fills it with variables
◦ From value
◦ From payload
◦ Sends it
25

26. Web template
26
• Values are available
• Payload variables are available

27. Web template
27
Value is refreshed only on a page reload

28. Web service
28

29. Web service is API
Expose functions for apps
◦ Mobile Applications
◦ Refresh the value without reloading the page
◦ Use multiple UI
29
Image from http://blogs.msdn.com/b/martinkearn/archive/2015/01/05/introduction-to-rest-and-net-web-api.aspx

30. Web response
30
Web response
◦ Input from a web request
◦ Sends the payload
◦ Redirect

31. Web response
31
/sensor returns
{
“sensor”: “0”
}

32. JQuery API
32

33. Web socket
33

34. Websocket
Allows asynchronous communication with the server
◦ Like a socket
◦ Uses HTTP or HTTPS
◦ Problems with proxies
Socket.IO
◦ Has a solution with HTTP or HTTPS if the websocket is unavailable
34

35. Websocket
35
Image from https://warmcat.com/libwebsockets/2010/11/01/libwebsockets-html5-websocket-server-library-in-c.html

36. Web starter app
Streams
Web starter app
Angular JS
36

37. Angular JS
static/web.html
37

38. Javascript
38

39. Questions?
39