Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to navigationJump to search
 
(53 intermediate revisions by 11 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
−
In Module 5, you will learn JavaScript, the dominant client-side web language.  JavaScript is the third and final programming language you will learn in CSE 330.
 
  
−
This article contains your assignments for Module 5.
+
Module 5 builds upon the JavaScript skills you learned in Module 4 and introduces server-side JavaScript using Node.js, along with real-time communication using Socket.IO.
  
 
== Reading ==
 
== Reading ==
  
−
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
+
The following articles on the class wiki contain information that will help you complete the assignments:
  
−
* [[JavaScript]]
+
* [[Node.JS]]
−
* [[AJAX and JSON]]
+
* [[Socket.IO]]
−
* [[jQuery]]
+
* [[FAQ - Mod 5]]
−
* [[Web Application Security, Part 3]]
 
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
−
'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.'''  However, you may (and should) use jQuery for the group portion.
+
=== Install Node.js ===
  
−
=== JavaScript Calculator ===
+
Install Node.js using the instructions in the [[Node.JS]] guide (use the current LTS version via nvm).
  
−
In Module 2, you made a calculator using PHP.  Now you will be making one using JavaScript.
+
=== Static File Server in Node.js ===
  
−
* The web page should have two input fields and a radio button group for the operation, with the 4 basic math operations represented (add, subtract, multiply, divide).
+
The individual portion is intentionally short so you have sufficient time for the group project.
−
* JavaScript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.
 
−
*: '''Tip 1:''' Consider using either the ''change'' or the ''keyup'' event on the text fields, and either the ''change'' or the ''click'' event on the radio buttons.
 
−
*: '''Tip 2:''' Re-read [[JavaScript|the JavaScript guide]] if you need help figuring our how to bind callback functions to events, or how to determine which radio button is currently selected.  (There are examples for both of these!)
 
−
* The calculator should be completely self-contained; i.e., you should not be making any requests to any other server-side or client-side scripts or web pages after the initial page load.
 
  
−
'''Tip:''' You can embed JavaScript code into an HTML document like this:
+
Follow these steps carefully.
  
−
<source lang="html4strict">
+
# Copy the static file server example from the [[Node.JS]] page into a file named <code>app.js</code>. Save it on your EC2 instance in a directory that is NOT served by Apache.
−
<script type="text/javascript">
+
# Ensure that you understand what the static file server script is doing.
−
// your code here
+
# Create a directory parallel to <code>app.js</code> named <code>static</code>.
−
</script>
+
# Confirm that your server’s <code>STATIC_DIR</code> variable matches this directory name.
 +
# Create the following files inside the <code>static</code> directory:
 +
#* <code>hello.txt</code> — a text file containing: <b>Hello World</b>
 +
#* <code>brookings.jpg</code> — download from: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
 +
#* <code>college.html</code> — an HTML page based on the [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy HTML Layout]] that includes an <code>&lt;img&gt;</code> referencing <code>brookings.jpg</code>
 +
#* <code>phpinfo.php</code> — a PHP file containing:
 +
#: <source lang="php"><?php phpinfo(); ?></source>
 +
# Start your Node.js server and load all four files in your browser.
 +
 
 +
Questions to consider:
 +
 
 +
* Which files work and which do not?
 +
* Why does <code>phpinfo.php</code> behave differently when served by Node instead of Apache?
 +
 
 +
== Group Project: Multi-Room Chat Server ==
 +
 
 +
In the group portion of Module 5, you will build a multi-room chat system using Node.js and Socket.IO.
 +
 
 +
The system must include:
 +
 
 +
* A main lobby where users select a nickname
 +
* Ability to create chat rooms
 +
* Ability to join chat rooms
 +
* A list of available rooms
 +
* A list of users currently in the room
 +
* The entire application displayed on a single webpage
 +
 
 +
The single-room example is provided here:
 +
 
 +
* [[Socket.IO]]
 +
 
 +
== AI Agent Extension ==
 +
 
 +
You will enhance your chat server with an AI assistant.
 +
 
 +
Users can message the AI by typing:
 +
 
 +
<pre>/agent What is the capital of France?</pre>
 +
 
 +
The server detects messages that begin with <code>/agent</code>, sends the prompt to an AI model, and broadcasts the response as <b>Agent</b> in the same room.
 +
 
 +
You may use:
 +
 
 +
* Ollama (recommended — runs locally and free)
 +
* OpenAI
 +
* Gemini
 +
* HuggingFace
 +
* Any approved model
 +
 
 +
If using an API, store your key in a file named <code>.env</code> at the root of your project:
 +
 
 +
<source lang="bash">
 +
OPENAI_API_KEY=your_key_here
 +
</source>
 +
 
 +
Load it securely in your server:
 +
 
 +
<source lang="javascript">
 +
import 'dotenv/config';
 
</source>
 
</source>
  
−
'''Tip:''' If your code isn't working the way you expect, use a JavaScript error console.  In Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.
+
Refer to your chosen model’s documentation for setup details.
 +
 
 +
== Grading ==
 +
 
 +
We will be grading the following aspects of your work.  There are 100 points total.
  
−
'''Important:''' It is best practice to fully separate the content, appearance, and behavior.  In previous modules, you may have lost points for using HTML tags that change the appearance of things <nowiki>(like <center> and <font>).</nowiki>  In this module, make sure that you define your event listeners in JavaScript as in <code>document.getElementById("xyz").addEventListener(...)</code> and '''''not''''' in the HTML like <code><button onclick="badExample();">Bad Example</button></code>.
+
'''Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''
  
−
=== Weather Widget ===
+
'''Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories.  This applies to both the individual and the creative portion'''
  
−
In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.
+
_________
  
−
# Make an empty HTML document; name it '''weather.html'''
+
# '''Individual Portion (30 Points):'''
−
#: Refer to the [[HTML and CSS]] guide for the skeleton of an HTML document
+
#* Node.JS is installed on your EC2 instance (5 points)
−
# Define a function in JavaScript; call it '''fetchWeather()'''. You may write your JavaScript in an embedded script in your head tag.
+
#*: ''Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.''
−
# Inside your '''fetchWeather()''' function, make an AJAX request to the weather server.
+
#* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each)
−
#: We have a server that outputs the current weather in JSON format.  The format is documented in the [[#JSON Structure]] section below.
+
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points)
−
#: '''URL:''' http://classes.engineering.wustl.edu/cse330/content/weather_json.php
+
#* Discuss in the README.md why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points)
−
#: We kindly thank Yahoo Weather for providing us with up-to-date weather information.
+
#* Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php)
−
#* '''IMPORTANT:''' Under normal circumstances, AJAX requests ''cannot'' be performed cross-domain for security reasons.  We have set the <code>Access-Control-Allow-Origin</code> header on our server to allow requests from your EC2 instances, or from localhost.  '''You will therefore need to upload your code to your EC2, or access it via localhost, in order for the AJAX requests to work.''' This means that you cannot, for example, complete this part of the individual portion in JSFiddle.
+
#* Completion of the AI Reflections for the individual portion of the assignment following the [[AI Best Practices]] (5 points)
−
# In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
+
# '''Multi-room Chat Server (70 Points):'''
−
#* Location
+
#* '''''Administration of user created chat rooms (25 Points):'''''
−
#** City, in a <nowiki><strong></nowiki> tag
+
#** Users can create chat rooms with an arbitrary room name(5 points)
−
#** State, not in any tag
+
#** Users can join an arbitrary chat room (5 points)
−
#* Humidity
+
#** The chat room displays all users currently in the room (5 points)
−
#* Current Temperature
+
#** A private room can be created that is password protected (5 points)
−
#* Image for Tomorrow's Forecast (see [[#Weather Condition Images]] below for more information)
+
#** Creators of chat rooms can temporarily kick others out of the room (3 points)
−
#* Image for the Day After Tomorrow's Forecast
+
#** Creators of chat rooms can permanently ban users from joining that particular room (2 points)
−
# Finally, bind '''fetchWeather()''' to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded:
+
#* '''''Messaging (5 Points):'''''
−
#: <source lang="javascript">document.addEventListener("DOMContentLoaded", fetchWeather, false);</source>
+
#** A user's message shows their username and is sent to everyone in the room (1 point)
−
# In addition, add a button that runs your ''fetchWeather'' function when clicked. This should update your widget with the current weather conditions.
+
#** Users can send private messages to another user in the same room (4 points)
 +
#* '''''Best Practices (5 Points):'''''
 +
#** Code is well formatted and easy to read, with proper commenting (2 points)
 +
#** Code passes HTML validation (2 points)
 +
#** node_modules folder is ignored by version control (1 points)
 +
#* '''''Usability (5 Points):'''''
 +
#** Communicating with others and joining rooms is easy and intuitive (4 points)
 +
#** Site is visually appealing (1 point)
 +
#* '''AI Agent and Reflection (20 Points)'''
 +
#** Implement an AI assistant accessible via the command \agent ... that replies in the current room (10 points)
 +
#** Handles basic errors gracefully and does not crash the server (5 point)
 +
#** Completion of the AI Reflections for the group portion of the assignment following the [[AI Best Practices]] (5 points)
 +
#* '''Creative Portion (10 Points)'''
 +
<!-- #** Make sure to create a README.md file pointing to your server -->
  
−
Use the following HTML:
+
== Submission Instructions ==
  
−
<source lang="html4strict">
+
To ensure your project can be graded quickly and reliably, follow these submission requirements carefully.
−
<div class="weather" id="weatherWidget">
 
−
<div class="weather-loc"></div>
 
−
<div class="weather-humidity"></div>
 
−
<div class="weather-temp"></div>
 
−
<img class="weather-tomorrow" />
 
−
<img class="weather-dayaftertomorrow" />
 
−
</div>
 
−
</source>
 
  
−
Include the CSS file from here: http://classes.engineering.wustl.edu/cse330/content/weather.css
+
All students must submit a working GitHub repository. In addition, your project must be verifiable by the TA using one of the two methods below.
  
−
When everything is working, the weather widget should look something like this:
+
=== Required for ALL Submissions ===
  
−
[[File:WeatherWidget.png]]
+
Your GitHub repository must include:
  
−
'''Important:''' The widget in this section needs to work in only Firefox and Chrome. It does '''''not''''' need to work Internet Explorer.
+
* All source code for both the individual and group portions
 +
* A complete <code>package.json</code> file
 +
* A <code>README.md</code> containing:
 +
** How to run your server
 +
** Which AI model you used (Ollama, OpenAI, Gemini, etc.)
 +
** Any special setup instructions
 +
* A <code>.gitignore</code> file that excludes:
 +
** <code>node_modules/</code>
 +
** <code>.env</code>
  
−
==== Tips ====
+
'''Do NOT commit your API keys.'''
  
−
===== JSON Structure =====
+
If your project uses environment variables, include a file named:
  
−
The JSON from our server looks like this:
+
<source lang="bash">
 +
.env.example
 +
</source>
  
−
<source lang="javascript">
+
Example:
−
{
+
 
−
  "updated": "Thu, 11 Oct 2012 5:54 pm CDT",
+
<source lang="bash">
−
  "location": {
+
OPENAI_API_KEY=
−
      "city": "St. Louis",
 
−
      "state": "MO"
 
−
  },
 
−
  "wind": {
 
−
      "chill": "62",
 
−
      "direction": "150",
 
−
      "speed": "3 mph"
 
−
  },
 
−
  "atmosphere": {
 
−
      "humidity": "50",
 
−
      "visibility": "10",
 
−
      "pressure": "30.12 in"
 
−
  },
 
−
  "current": {
 
−
      "code": "28",
 
−
      "text": "Mostly Cloudy",
 
−
      "temp": "62°F",
 
−
      "date": "Thu, 11 Oct 2012 5:54 pm CDT"
 
−
  },
 
−
  "tomorrow": {
 
−
      "code": "29",
 
−
      "text": "Clouds Early/Clearing Late",
 
−
      "low": "45°F",
 
−
      "high": "61°F"
 
−
  },
 
−
  "dayafter": {
 
−
      "code": "30",
 
−
      "text": "Partly Cloudy",
 
−
      "low": "53°F",
 
−
      "high": "65°F"
 
−
  },
 
−
  "credit": "http://us.rd.yahoo.com/dailynews/rss/weather/St._Louis__MO/*http://weather.yahoo.com/forecast/USMO0170_f.html"
 
−
}
 
 
</source>
 
</source>
  
−
===== Weather Condition Images =====
+
Your server must not crash if the API key is missing. It should fail gracefully.
  
−
Each day's forecast has a code.  There are images associated with these codes.
+
=== Option A - Running on EC2 ===
  
−
One place to get the images is from here: <nowiki>http://us.yimg.com/i/us/nws/weather/gr/</nowiki>'''##'''<nowiki>ds.png</nowiki>
+
Deploy your chat server on your EC2 instance and keep it running using [[#Running Tmux|tmux]].
  
−
Replace the '''##''' with the forecast code.  For example, for code 32, the URL would be: http://us.yimg.com/i/us/nws/weather/gr/32ds.png
+
Your README must include:
  
−
== Group Project ==
+
* Public EC2 URL
 +
* Port number (e.g., 3456)
 +
* Any login instructions (if applicable)
  
−
I forgot if I already mentioned this, but '''start early on this project!''' It will take longer than you think, I promise!
+
The TA will:
  
−
You are encouraged to use the advanced version control practices you learned in Module 5 when completing this assignment.
+
* Visit your running server
 +
* Test chat functionality
 +
* Test multi-room behavior
 +
* Test the <code>/agent</code> AI command
  
−
=== Calendar ===
+
This is the fastest and preferred grading method.
  
−
Build a simple calendar that allows users to add and remove events dynamically.
+
=== Option B — Local Execution + Demo Video ===
  
−
You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load.  You may use a JavaScript library of your choice, including Ext JS.
+
If your server is NOT running on EC2, you must provide a short demonstration video.
  
−
Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.
+
The video must show:
  
−
We have also written some functions to help you get started: [[JavaScript Calendar Library]]
+
* Starting the server
 +
* Two browser windows connected
 +
* Chat working between users
 +
* The <code>/agent</code> command working
  
−
==== Examples ====
+
Video length: approximately 1–2 minutes.
  
−
* https://calendar.google.com/
+
The TA may still run your code locally if needed.
−
* http://www.zoho.com/calendar/
 
  
−
==== Server Side Language ====
+
=== Server Requirements ===
  
 +
Your submission must:
  
−
Additionally, you may use a database of your choice.  MySQL is probably the logical choice since you have been using it since Module 2, but if you're up for a challenge we encourage you to look at other database options like [[wikipedia:MongoDB|MongoDB]].
+
* Start successfully with:
  
−
''* While it is fine to use the provided example for reference, copying it in its entirety is a violation of Academic Integrity and will result in a 0 for the group portion of this module. Don't plagiarize.''
+
<source lang="bash">
 +
npm install
 +
node chat-server.js
 +
</source>
  
−
==== Requirements ====
+
(or equivalent script)
  
−
* Support a month-by-month view of the calendar.
+
* Not require manual file copying or directory creation
−
*: Show one month at a time, with buttons to move forward or backward.
+
* Not require editing source code to run
−
*: There should be no limit to how far forward or backward the user can go.
+
* Handle missing AI keys gracefully
−
* Users can register and log in to the website.
+
* Not crash during normal use
−
*: You may leverage your MySQL project code and database from module 3 to get started.
 
−
*: You may alternatively use [[Web Application Security, Part 2#OpenID|OpenID]] for user authentication.  Note that you will still need a Users table in order associate calendar events with a certain OpenID.
 
−
* Unregistered users should see no events on the calendar.
 
−
* Registered users can add events.
 
−
*: All events should have a date and time, but do not need to have a duration.
 
−
*: You do ''not'' need to support recurring events (where you add an event that repeats, for example, every monday).
 
−
* Registered users see only events that they have added.
 
−
*: Your AJAX should not ask the server for events from a certain username.  Instead, your AJAX should ask the server for events, and the server should respond with the events for only the currently-logged-in user (from the session).  Can you think of why?
 
−
* Registered users can delete their events, but not the events of others.
 
−
*: Again, the server should delete events based on the username present in the session.  (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)
 
−
* All user and event data should be kept in a database.
 
−
* At no time should the main page need to be reloaded.
 
−
*: User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.
 
−
* Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.
 
  
−
'''Tip:''' Run your database schema by a TA before implementing it.
+
=== Common Causes of Lost Points ===
  
−
=== Web Security and Validation ===
+
* Missing README instructions
 +
* API key committed to GitHub
 +
* Server crashes when AI key missing
 +
* Broken EC2 deployment (port closed)
 +
* Cannot run after <code>npm install</code>
 +
* <code>node_modules</code> committed to repo
 +
* Hardcoded absolute file paths
 +
* Missing AI demonstration
  
−
Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 3]]
+
Following these instructions ensures your project can be graded quickly and fairly.
  
−
In particular:
+
=== Running Tmux ===
  
−
* '''Your application needs to prevent XSS attacks.'''  Be careful when transmitting data over JSON that will be reflected in an event title!  (Note: JSON data should be sanitized on the client side, not the server side.)
+
To keep your Node.js apps running after you disconnect from your EC2 instance, you can use a tool called tmux. Normally, when you SSH into a server and start a program, it stops running as soon as you close the terminal. tmux lets your programs continue running in the background even after you disconnect.
−
* '''Perform precautionary measures to prevent session hijacking attacks.'''
 
−
*: You should specify your session cookie to be HTTP-Only.  However, for the means of this module, you need not test for user agent consistency.
 
−
* '''Optional:''' Validate your JavaScript code using [http://www.jshint.com/ JSHint] '''''or''''' [http://jslint.com/ JSLint] for up to 3 points of extra credit.
 
  
−
You should continue the practices that you have learned in past weeks:
+
First, install tmux on your EC2 instance by running:
 +
sudo yum install tmux
  
−
* Pass tokens in forms to prevent CSRF attacks.
+
To start using tmux, create a session by typing:
−
*: '''Hint:''' You will need to send your CSRF tokens in your AJAX requests.  Remember that AJAX still submits forms and runs server-side scripts, just like the vanilla forms you've been using in Modules 2 and 3.
+
tmux
−
* Use prepared queries to prevent SQL Injection attacks.
 
−
* If storing passwords in a database, always store them salted and encrypted.
 
−
* Your page should validate with no errors through the W3C validator.
 
  
−
== Grading ==
+
This opens a new terminal session managed by tmux. You can now start your Node.js server inside this session (for example, node server.js).
 +
 
 +
If you want to disconnect from the server but keep your program running, detach from tmux by pressing:
 +
Control + b, then press d
 +
 
 +
Your Node.js app will continue running even after you disconnect from SSH.
  
−
We will be grading the following aspects of your work.  There are 100 points total.
+
Later, when you SSH back into your EC2 instance, you can return to the same tmux session by running:
 +
tmux attach
  
−
# '''JavaScript Calculator (10 Points):'''
 
−
#* Calculator successfully adds, subtracts, multiplies, and divides numbers (3 points)
 
−
#* The result is automatically computed when a value in either field is changed (3 points)
 
−
#* Calculator is written entirely in pure, conventional JavaScript with no external libraries (4 points)*
 
−
#*: ''Note: be sure to fully separate content, appearance, and behavior.  This means that you should '''not''' use the event attributes on the HTML elements like onclick, onchange, and onkeyup.''
 
−
# '''Weather Widget (15 Points):'''
 
−
#* Widget performs an AJAX request to fetch the current weather (4 points)
 
−
#* The HTML template is filled with the correct information, including an image (4 points)
 
−
#* Button to reload the weather widget (2 points)
 
−
#* Widget is written entirely in pure, conventional JavaScript with no external libraries (5 points)*
 
−
# '''AJAX Calendar (60 Points):'''
 
−
#* '''''Calendar View (10 Points):'''''
 
−
#** The calendar is displayed as a table grid with days as the columns and weeks as the rows, one month at a time (5 points)
 
−
#** The user can view different months as far in the past or future as desired (5 points)
 
−
#* '''''User and Event Management (25 Points):'''''
 
−
#** Events can be added, modified, and deleted (5 points)
 
−
#** Events have a title, date, and time (2 points)
 
−
#** Users can log into the site, and they cannot view or manipulate events associated with other users (8 points)
 
−
#**: ''Don't fall into the Abuse of Functionality trap!  Check user credentials on the server side as well as on the client side.''
 
−
#** All actions are performed over AJAX, without ever needing to reload the page (10 points)
 
−
#* '''''Best Practices (20 Points):'''''
 
−
#** Code is well formatted and easy to read (2 points)
 
−
#** If storing passwords, they are stored salted and encrypted; if using OpenID, you are storing the user's OpenID identifier in the database (2 points)
 
−
#** All AJAX requests that either contain sensitive information or modify something on the server are performed via POST, not GET (3 points)
 
−
#** Safe from XSS attacks; that is, all content is escaped on output (3 points)
 
−
#** Safe from SQL Injection attacks (2 points)
 
−
#** CSRF tokens are passed when editing or removing events (3 points)
 
−
#** Session cookie is HTTP-Only (3 points)
 
−
#** Page passes the W3C validator (2 points)
 
−
#** ''Extra Credit:'' Your code passes ''JSHint'' or ''JSLint'' (+3 bonus points)
 
−
#* '''''Usability (5 Points):'''''
 
−
#** Site is intuitive to use and navigate (4 points)
 
−
#** Site is visually appealing (1 point)
 
−
# '''Creative Portion (15 Points)'''
 
−
#* '''Additional Calendars Features (worth 15 points):''' Develop some additional features for the calendar, a few examples are provided below.
 
−
#**  Users can tag an event with a particular category and enable/disable those tags in the calendar view. (5 points)
 
−
#**  Users can share their calendar with additional users. (5 points)
 
−
#**  Users can create group events that display on multiple users calendars (5 points)
 
−
''* These points can be earned only if at least 3 other points have been earned in that category.  This is to prevent these points from being "free."''
 
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 13:31, 7 July 2026


Module 5 builds upon the JavaScript skills you learned in Module 4 and introduces server-side JavaScript using Node.js, along with real-time communication using Socket.IO.

Reading

The following articles on the class wiki contain information that will help you complete the assignments:

Individual Assignments

Install Node.js

Install Node.js using the instructions in the Node.JS guide (use the current LTS version via nvm).

Static File Server in Node.js

The individual portion is intentionally short so you have sufficient time for the group project.

Follow these steps carefully.

  1. Copy the static file server example from the Node.JS page into a file named app.js. Save it on your EC2 instance in a directory that is NOT served by Apache.
  2. Ensure that you understand what the static file server script is doing.
  3. Create a directory parallel to app.js named static.
  4. Confirm that your server’s STATIC_DIR variable matches this directory name.
  5. Create the following files inside the static directory: 
    <?php phpinfo(); ?>
  6. Start your Node.js server and load all four files in your browser.

Questions to consider:

  • Which files work and which do not?
  • Why does phpinfo.php behave differently when served by Node instead of Apache?

Group Project: Multi-Room Chat Server

In the group portion of Module 5, you will build a multi-room chat system using Node.js and Socket.IO.

The system must include:

  • A main lobby where users select a nickname
  • Ability to create chat rooms
  • Ability to join chat rooms
  • A list of available rooms
  • A list of users currently in the room
  • The entire application displayed on a single webpage

The single-room example is provided here:

AI Agent Extension

You will enhance your chat server with an AI assistant.

Users can message the AI by typing: 

/agent What is the capital of France?

The server detects messages that begin with /agent, sends the prompt to an AI model, and broadcasts the response as Agent in the same room.

You may use:

  • Ollama (recommended — runs locally and free)
  • OpenAI
  • Gemini
  • HuggingFace
  • Any approved model

If using an API, store your key in a file named .env at the root of your project: 

OPENAI_API_KEY=your_key_here

Load it securely in your server: 

import 'dotenv/config';

Refer to your chosen model’s documentation for setup details.

Grading

We will be grading the following aspects of your work. There are 100 points total.

Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.

Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories. This applies to both the individual and the creative portion

_________

  1. Individual Portion (30 Points):
    • Node.JS is installed on your EC2 instance (5 points)
      Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.
    • The hello.txt, brookings.jpg, and college.html files all load successfully (4 points each)
    • Visiting a file that does not exist inside the static directory results in a 404 (4 points)
    • Discuss in the README.md why phpinfo.php behaves the way it does when loaded through Node.JS (4 points)
    • Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php)
    • Completion of the AI Reflections for the individual portion of the assignment following the AI Best Practices (5 points)
  2. Multi-room Chat Server (70 Points):
    • Administration of user created chat rooms (25 Points):
      • Users can create chat rooms with an arbitrary room name(5 points)
      • Users can join an arbitrary chat room (5 points)
      • The chat room displays all users currently in the room (5 points)
      • A private room can be created that is password protected (5 points)
      • Creators of chat rooms can temporarily kick others out of the room (3 points)
      • Creators of chat rooms can permanently ban users from joining that particular room (2 points)
    • Messaging (5 Points):
      • A user's message shows their username and is sent to everyone in the room (1 point)
      • Users can send private messages to another user in the same room (4 points)
    • Best Practices (5 Points):
      • Code is well formatted and easy to read, with proper commenting (2 points)
      • Code passes HTML validation (2 points)
      • node_modules folder is ignored by version control (1 points)
    • Usability (5 Points):
      • Communicating with others and joining rooms is easy and intuitive (4 points)
      • Site is visually appealing (1 point)
    • AI Agent and Reflection (20 Points)
      • Implement an AI assistant accessible via the command \agent ... that replies in the current room (10 points)
      • Handles basic errors gracefully and does not crash the server (5 point)
      • Completion of the AI Reflections for the group portion of the assignment following the AI Best Practices (5 points)
    • Creative Portion (10 Points)

Submission Instructions

To ensure your project can be graded quickly and reliably, follow these submission requirements carefully.

All students must submit a working GitHub repository. In addition, your project must be verifiable by the TA using one of the two methods below.

Required for ALL Submissions

Your GitHub repository must include:

  • All source code for both the individual and group portions
  • A complete package.json file
  • A README.md containing:
    • How to run your server
    • Which AI model you used (Ollama, OpenAI, Gemini, etc.)
    • Any special setup instructions
  • A .gitignore file that excludes:
    • node_modules/
    • .env

Do NOT commit your API keys.

If your project uses environment variables, include a file named: 

.env.example

Example: 

OPENAI_API_KEY=

Your server must not crash if the API key is missing. It should fail gracefully.

Option A - Running on EC2

Deploy your chat server on your EC2 instance and keep it running using tmux.

Your README must include:

  • Public EC2 URL
  • Port number (e.g., 3456)
  • Any login instructions (if applicable)

The TA will:

  • Visit your running server
  • Test chat functionality
  • Test multi-room behavior
  • Test the /agent AI command

This is the fastest and preferred grading method.

Option B — Local Execution + Demo Video

If your server is NOT running on EC2, you must provide a short demonstration video.

The video must show:

  • Starting the server
  • Two browser windows connected
  • Chat working between users
  • The /agent command working

Video length: approximately 1–2 minutes.

The TA may still run your code locally if needed.

Server Requirements

Your submission must:

  • Start successfully with:
npm install
node chat-server.js

(or equivalent script)

  • Not require manual file copying or directory creation
  • Not require editing source code to run
  • Handle missing AI keys gracefully
  • Not crash during normal use

Common Causes of Lost Points

  • Missing README instructions
  • API key committed to GitHub
  • Server crashes when AI key missing
  • Broken EC2 deployment (port closed)
  • Cannot run after npm install
  • node_modules committed to repo
  • Hardcoded absolute file paths
  • Missing AI demonstration

Following these instructions ensures your project can be graded quickly and fairly.

Running Tmux

To keep your Node.js apps running after you disconnect from your EC2 instance, you can use a tool called tmux. Normally, when you SSH into a server and start a program, it stops running as soon as you close the terminal. tmux lets your programs continue running in the background even after you disconnect.

First, install tmux on your EC2 instance by running: sudo yum install tmux

To start using tmux, create a session by typing: tmux

This opens a new terminal session managed by tmux. You can now start your Node.js server inside this session (for example, node server.js).

If you want to disconnect from the server but keep your program running, detach from tmux by pressing: Control + b, then press d

Your Node.js app will continue running even after you disconnect from SSH.

Later, when you SSH back into your EC2 instance, you can return to the same tmux session by running: tmux attach

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module_5&oldid=3522"