Web Client and Server

Design a simple web client and web server

This project allows students learn how a web server and web client work, and learn how to design a web server. Although this project requires an understanding of TCP socket programming, it provides the students a sample code to start.

Activity 1: Use a web browser, e.g., Internet Explorer or Chrome to connect to instructor's web site: http://cms.dt.uh.edu/faculty/yuans/courses/cs3324/projects/prj1/cnaiapi.zip. Fetch the file cnaiapi.zip and store it in your working directory, e.g., project1/. And then extract the files to your working directory. You will see five subdirectories in your working directory after the extraction but you only need these three: h, api and apps. h directory contains header files; api directory contains functions that are used by applications; and apps directory contains application programs. Ignore other subdirectories and files.

Activity 2: Compile the source code in Visual Studio20XX.NET (Note: If you are using a different version of the socket interface, you may need to slightly modify the program. The following procedures may also be different if you are using another C++ package):

1. Build the web client:

• At the very top of the Solution Explorer window, right click the Solution and Add->Add New Project. Select "C++ Empty Project" in the list. Then select the proper location in the Location field and type a name, say client in the Name filed. Click on OK. Then add webclient.c in apps directory to Source Files. Also add all files in the api directory to Source Files. Then add all files in the h directory to Header Files.
• In the Solution Explorer window, right click on the name of the project, select "Properties". Then choose C/C++ -> General ->Additional Include Directories. Click on the field and choose the location of the h directory which you extracted in Activity 1.
• Configure the linker: Click on "client" in the Solution Explorer window and select Properties, then click on Linker->General. Change the output file to $(OutDir)/client.exe. Under Linker->Input->Additional Dependencies, add ws2_32.lib.
• For newer version of Visual Studio, you may need to go to "C/C++ -> Preprocessor Definitions" and add _CRT_SECURE_NO_WARNINGS and _WINSOCK_DEPRECATED_NO_WARNINGS; if you have trouble with the debugger, you may
  • go to Tools > Options > Debugging > General, and check Load dll exports (Native only)
  • and go to Tools->Options->Debugging->Symbols and select checkbox "Microsoft Symbol Servers"
  • (details at http://stackoverflow.com/questions/12954821/cannot-find-or-open-the-pdb-file-in-visual-studio-c-20100
• e.Build webclient.exe.

2. Build the web server: Follow the same steps for building the web client (by replacing "webclient.c" by webserver.c, and output file from client.exe to webserver.exe).

Activity 3: Run webserver.exe in command console. If you are not familiar with Windows command console, study this page:

http://www.cs.princeton.edu/courses/archive/spr05/cos126/cmd-prompt.html. Then go to the directory where webserver.exe is, type:

webserver 8080

(Note: You are free to use another port number other than 8080, as long as it is greater than 1024 and has not been used by another application)

Activity 4: Run webclient.exe in command console. Run webclient in the same directory (in another window) to get the web page. Note: if you used a different port number other than 8080 for chatserver, be sure to use the same port number for webclient.

webclient localhost / 8080
webclient localhost /time 8080
webclient www.uhd.edu /

See what shows up in the screen. Then, use Internet Explorer or Chrome to get the page: invoke the browser and then type http://localhost:8080/ and http://localhost:8080/time in the address pane. See what shows up in the window.

Activity 5: Use another computer to read the web page. Firstly, use ifconfig (Linux) or ipconfig (Windows) to find out the IP address of the machine where webserver is running:

ifconfig –a on Linux, or
ipconfig on Windows

Then, start a web browser in another machine. Type http://:8080/ in the address pane and see if you can get the web page.

Activity 6: Read webserver.c to learn how it works. Specifically, look how webserver sends out the HTML document and from where to read it. Move the HTML document which is stored in string constant HOME_PAGE to a file called index.html in a directory you choose as the root directory of your directory tree where you put your documents; and modify webserver.c so that it reads HTML document from index.html when the client send a request with path /. (your server must know where to find the index.html file). Use a web browser to check your web server works.

Note: An HTTP request is composed of 3 parts: a web address, ex., www.uhd.edu; an application (or port) number, ex., 8080 (the default port number is 80); and a path of a file, ex., /faculty/yuans/misc.html. If no file name is given in the path, by default index.html or index.htm will be requested. For example, in URL http://www.uhd.edu:8080/facility/ computers.html, the web address is: www.uhd.edu, the port number is 8080; and the path is /facility/computers.html.

Activity 7: Replace the content of index.html file with HTML document for another web page. Use a web browser to get that page.

Activity 8: Add functionality to the web server so that it can handle a request for an arbitrary file.

This activity allows students learn how the web server handles a client request for an arbitrary file. So far, we have built a server which can only handle a request for the default web page "index.html" with path /. Generally, a web client can require for any file with a long path, e.g., the following URLs require resume.html and /doc/manual.html:

http://www.somewhere.com/resume.html
http://www.somewhere.com/doc/manual.html

In this activity, students need to modify the webserver.c program to handle the request with arbitrary file name. It will check the existence of the requested file. If no such file exists, it will send a "No file found" message to the client; otherwise, it will send the requested file to the client.

Step 1: Modify the webserver.c source code so that it can handle requests with any path as described above.

Step 2: Put index.html file in the root directory of your directory tree as you have done in Activity 6. Put other files in your directory tree and insert links in your index.html file to point to those files. Use a web browser to connect to the webserver with path "/". The web page contained in index.html should appear in the browser. Then, click on the links in the webpage. Successive pages should appear. Look at the path in the URL window. You should see that files contained in the subdirectories should be requested.

Hint: You may want to study the following file I/O functions and use them in your program: fopen(), fseek(),ftell(), rewind(), fread(), fclose().