CS 651 Spring 2020 Homework 11

Fetch, JSON Server and Schema, WebSockets

Dr. Greg M. Bernstein

Due Wednesday, May 6th, 2020 by 11:59PM, 50 points.

General Instructions

Last CS651 Homework Ever!!!

Fetch for adding and deleting activities, JSON Schema for server protection, and WebSockets

Create and Use a new Branch hw11

We will create a new git branch called hw11 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 10. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw11. Review the section on submission for using push with a new branch.

Use README.md for Answers

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

Questions

Question 1. (10 pts) Add Activity

(a) Update React App to POST Activity

In your React app you prototyped the ability for an administrator to add activities to your club. Now update that component to actually POST that new activity to the server and show the updated list of activities that is returned.

Show your updated “add activity” handler code here.

(b) Before and After Screenshots

Show before and after screenshots showing the addition of an activity. Have the network panel open. My screenshots look like the following.

Before activity add
Before activity add
After activity add
After activity add

Question 2. (10 pts) Delete Activity

(a) Update React App to DELETE an Activity

In your React app you prototyped the ability for an administrator to delete an activity from your club. Now update that component to actually DELETE a selected activity from the server and show the updated list of activities that is returned.

Show your updated “delete activity” handler code here.

(b) Before and After Screenshots

Show before and after screenshots showing the deletion of an activity. Have the network panel open. My screenshots look like the following.

Before activity deletion
Before activity deletion
After activity deletion
After activity deletion

Question 3. (10 pts) JSON Schema for New Member

(a) New Club Member Information

Way back in homework #4 we had a form for signing up new club members, more recently we used a JSON file of mock user data for our club members. Based on your old form and the type of information we needed for login come up with a list (not HTML) of information that you want or need to keep about club members (this is only design, no code).

(b) Create a JSON schema to check new member info

Put in as many checks as you can think of within the limits of the capabilities of the JSON Schema. Put this schema in you server directory. Show your schema here.

(c) Test the JSON schema

Create at least the following test data for your schema:

  • Two different “good” JSON data tests
  • Two different “bad” JSON (valid JSON not valid member info) tests.

Show one of each test case here.

Question 4. (10 pts) Applicant Server API

(a) Applicant API with Input checking

Add a new applicants API to your server at path /applicants, that uses a POST method, and that takes data in the format you came up with in the previous problem. Use the AJV library to input check submitted JSON. Note that this is an “unprotected” interface. Show the code you added for this interface here. You do not need to do anything with the applicants data besides checking it.

(b) Testing Applicant API

Write a test program using request-promise-native to test the interface in part (a) with the test JSON that you created in the previous problem. Show your test code here and a screenshot of your test output. Mine looks like:

Applicant data testing
Applicant data testing

Question 5. (10 pts) WebSockets

Concept questions about WebSockets

(a) WebSockets versus Push Notifications

Both WebSockets and “Push Notifications” allow a server to send messages to a browser. How do they differ? Particularly in performance, capabilities, and limitations.

(b) WebSockets Protocol Stack

  1. What protocol does WebSockets typically run on top of?
  2. What functionality was added to WebSockets to provide two way communications?
  3. Does WebSockets work with binary or text based data?
  4. Is there a procedure for opening a WebSocket starting from HTTP? If so what is it called?

(c) WebSockets in the Browser

  1. How do you initiate a WebSocket connection on the client (browser) side?
  2. How many WebSocket connections is the client side limited to making (if any)?
  3. Can a client find out if a WebSocket is closed? How?

(d) WebSockets on the Server

  1. Is an HTTP server the same as a WebSocket server? If not how do they differ?
  2. Does Express.js work with an HTTP server or a WebSocket server?
  3. Why might a WebSocket server want to authenticate a client before opening a WebSocket to a client?

(e) WebSocket Application Design

  1. Are there a bunch of preformatted WebSocket messages for us to use?
  2. Why might a server offer multiple different (named) WebSockets to clients?
  3. If you were going to make an interactive group chat application based on WebSockets that allows for private (one-one) messages and public (one-all) messages. What information would you need to keep about each WebSocket on the server?