CS 651 Spring 2020 Homework 8

HTTP, Requests, and Servers

Dr. Greg M. Bernstein

Due Monday, April 6th, 2020 by 11:59PM, 50 points.

General Instructions

React Class Components and Interactivity

Create and Use a new Branch hw8

We will create a new git branch called hw8 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 7. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw8. Review the section on submission for using push with a new branch.

Create practice and clubServer directories

Within the top level of your repo (and on this branch) create two directories to hold your work: practice and clubServer.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts) HTTP

Visit your Blackboard login page and use the developer tools network panel to answer the following questions about the HTTP request and response messages sent between your browser and the Blackboard server.

(a)

What HTTP Method is used in the request?

What is the response code and what does it mean?

What version of HTTP is being used?

(b)

List the request headers and their values here (copy and paste)

(c)

List the response headers and their values here (copy and paste)

(d)

What server is BlackBoard based on?

Are any cookies set? If so what are they.

(e) URLs

For the following URLs identify the protocol, domain, port, path, query and fragment portions (if any):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Comments

https://www.google.com/search?q=gaia+mission&rlz=1CYPO_enUS751

http://127.0.0.2:8282/static/index.html

Question 2. (10 pts) Simple Servers

Put all the server code your write here in the practice directory of your repo. The purpose of this question is to get you practice setting up and running a bunch of simple web server applications on different addresses and/or ports. Note that you may need to install some NPM packages for this problem.

Some operating systems may not permit using different loopback addresses without additional configuration. If that is the case describe your system and take a screen shot of the error message you get.

(a) Simple Date Server

Write a simple server based on Express to return your name and the current date and time when a GET request is made to the path /date. Use the built in JavaScript Date class. Run the server on a loopback address different from localhost (127.0.0.1) and a TCP port different from 80. No HTML generation is required. Use your browser to test and demonstrate the server is working. Take a screen shot showing both browser window and command line running the server. I get something like:

Screenshot
Screenshot

(b) Simple Name/NetID Server

Write a simple server based on Express to return your name and the netID when a GET request is made to the path /netID. Run the server on a loopback address different from localhost (127.0.0.1) and a TCP port different from 80, and from that used in part a. No HTML generation is required. Use your browser to test and demonstrate the server is working. Take a screen shot. I get something like:

Screen shot with two servers
Screen shot with two servers

(c) Combine services

Combine both services from above into a single server. Run the server on yet another loopback address and port. Take a screen shot of one request and show your server code here.

Three servers
Three servers

Question 3. (10 pts) JSON Server Get

Use the clubServer directory to hold the code for this problem. You will need to set up a package.json file and install appropriate NPM packages. Within the clubServer directory create a file called clubServer.js to hold your server code. We will add more and more functionality to this server file in this problem and the next as well as testing code.

Our club server is going to serve up data in JSON format rather than serving HTML pages. Later we will have our server serve up static resources such as CSS, images, and, eventually, our React App.

Both this question and the next involve debugging on both client and server side over the network in your computer. In addition you will need to read the documentation for both the Express package and the Request-Promise package on the web.

(a) Get Activities

The first thing we will have our server furnish is a list of activities in JSON format. Use the JSON activities data that you created in the previous homework. Note we are now using it on the server side! Return this information to the requestor in response to a GET request to the path /activities. Check that this works via your browser. Show a screenshot and your code here. My screenshot looks like:

JSON activities server
JSON activities server

Notes: Use Node.js module syntax, require() rather than ES6 which we used with Parcel/React. You can use require() to import your JSON activities data into a variable for use by the server. I found Node.js much more picky about JSON syntax than Parcel so had to clean up my JSON activities file a bit.

(b) Test via Requests

Write a separate Node.js program called getActivityTest.js and use the Request-Promise-Native library to get the list of tours from your server and print them out. Take a screen shot and show your code here.

My screen shot looks like:

Get tour test
Get tour test

Question 4. (10 pts) JSON Server Post

Now lets add an “interface” to add a activity to the server from a client. Note: you can just use simple JavaScript array manipulation with your activities array that you read in from the JSON file. You will not persist this information on the server at this time, i.e., do not write it to a file, we’ll be using a database for that later.

(a) Add Activity

Create another “interface” to your club server that receives a new activity via a JSON POST to /activities. After you add the activity to the activities array on the server return the updated array to the client via JSON. After testing it in part (b) show the code for this interface only here. Hint: you may need to use some “middleware” to deal with JSON.

(b) Test with Requests

Write a separate Node.js program called addActivityTest.js to test the interface in part (a) by getting and printing out the current list of activities and then adding a single activity and printing out the updated list of activities. Appropriately use promises to make sure these steps happen in order. Show a screen shot and your test code here. My screen shot looks like:

Add Activity Test
Add Activity Test

(c) Security: Input Limits

We will need to protect our server from bad inputs (intentional, injection attacks, and unintentional). A very first step is to limit the size of the JSON for the activity we will accept. Look at the options for the express.json middleware for how to set this. Next we need some error handling middleware. This need to take the form:

This handler (that you need to complete) goes after all middleware for dealing with the POST to /activities including your handler code. Show your updated code here after you finish testing it in part (d).

(d) Test Good and Bad in order

As you will see testing a server API takes more code than the API itself. Now we need to extend our addActivityTest.js to do the following API calls/test in order:

  1. Initial GET of all the activities
  2. Initial POST of a “good” activity
  3. Try adding an activity that is too long, i.e., testing the new code of part (c). Your should get an error code/message back but not crash the server or your test.
  4. Add another good activity.

After you get these tests (and server) working, run a less verbose version of your test code and take a screenshot of you test and server running. Also show the essential part of your test code, i.e., the promise chaining here. My screen shot looks like:

Extended Testing
Extended Testing

Question 5. (10 pts) Delete Activity

Now lets add an “interface” to delete an activity on the server. Note: you can just use simple JavaScript array manipulation with your activities array that you read in from the JSON file. You will not persist changes on the server at this time, i.e., do not write it to a file, we’ll be using a database for that later.

(a) Delete Activity

Create another “interface” to your club server that receives a new activity via a JSON DELETE to /activities/i. Where i is the “id” of the activity. In this case just its index in the activities array on the server. This will later become a unique key in the database that we will be using. After you delete the activity from the activities array on the server return the updated array to the client via JSON. Make sure your code can deal with bad i values by returning an appropriate error code.After testing it in part (b) show the code for this interface only here.

(b) Test with Requests

Write a separate Node.js program called delActivityTest.js to test the interface in part (a) by running the following tests:

  1. Get initial activities
  2. deleting a single activity
  3. Trying to delete an activity with a bad index value
  4. deleting another activity

Show a screen shot of your test results here. My less verbose version looks like:

Delete Activity Test
Delete Activity Test