Module5-HomePage-New

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:

• Node.JS
• Socket.IO
• FAQ - Mod 5

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:
   • hello.txt — a text file containing: Hello World
   • brookings.jpg — download from: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
   • college.html — an HTML page based on the Quick and Easy HTML Layout that includes an <img> referencing brookings.jpg
   • phpinfo.php — a PHP file containing:

   <?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:

• Socket.IO

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 — Recommended: Running on EC2

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

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.