Webserver simple usage

From openPicus Wiki
Jump to: navigation, search

Contents

What you are going to learn

This tutorial will walk you through the Web Server functionalities guiding you from the first simple crude pages, all the way to dynamic two-way interaction.


Introduction to the Web Server

Ours Wi-Fi and Ethernet modules provide web service functionalities through the TCP/IP stack and a light Web Server. The Web Server is a collection of libraries concurring to enable the Flyport to serve web pages and dynamic content in a way similar to a real webserver. Remember the Flyport is an embedded device so it is not meant to replace a full-fledged webserver like apache. Things will go smoother if there is any previous knowledge of topics like networks, html and such.. Nevertheless the tutorial is structured with very few assumptions, detailing most aspects and functionalities so that it is possible to follow along without trouble.

Disclaimers done it’s time for some real things so let’s get going!

A simple example: display something when the page loads.

Open the Flyport IDE, click on the New Project button, select your model and as project select blank webserver. Let’s start by creating a simple index.html like the following:

<html>
<body>
<div align="center">
 
If this page loads you’re good to go.
</div>
</body>
</html>

Save it in the correct project subfolder and import it using the Web Pages button in the IDE.

Then remember to correctly configure the network page of the TCP/IP Wizard so that you can correctly access your pages. To verify the connection just access your Flyport: if you can see the message If this page loads you’re good to go then you’re effectively good to go.

Conceptual description

Tutorial 01 flowchart.jpeg

Have a look at the above flowchart, it depicts what is happening when the Flyport serves dynamic content through the webserver. Whatever we will do in this section or the more complex ones, remember it is always the client initiating the connection: the Flayport has no way to initiate a connection to a client.

The communication is laid out in a few simple steps:

  1. client asks the server for something
  2. server checks it has the resource and parses it to see if it contains any dynamic content
  3. if there is indeed dynamic content, the server calls the code to do some work
  4. either there was some shenanigans going on or not, the requested file is served to the client

So there you go, in a nutshell this is how things work.

Modified index.html

Now let’s get back to the index.html of before. We will add a tiny bit which will change a lot:

<html>
<body>
<div align="center">
If this page loads you’re good to go.<br>
 
~keyword~
 
</div>
</body>
</html>

Save the new file, import it in the IDE and compile everything. You should get an error from the compiler stating undefined reference to ‘HTTPPrint_keyword’. That’s good as it means the little change in the index.html is correctly recognized: the wizard has noticed that you used a dynamic keyword (aptly named keyword!) in a webpage and is asking you to provide the function to handle this variable.

The Flyport code

In fact enclosing any word in double tilde like we did means that, when a client requests a file and the server starts streaming it, when it encounters the word it will look into its code for a function to do something. It’s like telling the system “hey call me when you hear this”, now it’s calling and you need to tell it what to do. So open HTTPApps.c, scroll down to the end, before the last #endif, and append the following code:

void HTTPPrint_keyword()
{
   char mystr[50];
   sprintf(mystr,"This page has been loaded %d times.",++counter);
   TCPPutString(sktHTTP, (BYTE*)mystr);      
}

then head back up and add below #define __HTTPAPP_C

long counter = 0;

So let’s see what all this does.

The last line we added creates a global variable, that’s to say one that lives as long as the whole program lives, should have we put that inside the HTTPPrint it would have been erased once the function terminated, this way it stays there.

The function we added instead is the “when you get this call me” hook you give to the Web Server. The name of the function implies that it will be called whenever a web client asks for some file containing ~keyword~.

So when this happens we are going to create a string, fill it with some content, and send it over. Now compile, upload, reload your webpage and see what happens, you should have something like this:

Working demonstration

Tutorial web 01 browsershot.png

Next step

At this point the basics are covered. Experiment with the code, get a grasp on it. When you feel sure enough to go on, you can continue to the next tutorial: Dynamic Pages.

Source code for this tutorial

Source Code

What you'll find in the source code:

  • taskFlyport.c
  • HTTPApp.c
  • index.htm
Personal tools
Namespaces

Variants
Actions
START HERE
DEVELOPMENT
HARDWARE INFO
RESOURCES
PHASED OUT
Toolbox