Module5-HomePage-New

From CSE330 Wiki
Jump to navigationJump to search

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).

Verify installation: 

node -v
npm -v

---

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 public.
  4. Confirm that your server’s STATIC_DIR variable matches this directory name.
  5. Create the following files inside the public 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

Assignments must be committed to GitHub by the end of class on the due date.

The TA must be able to clone your repository and run your server without creating directories or copying files.

---

Individual Portion (30 Points)

  • Node.js installed and working (5 pts)
  • Screenshot: EC2 serving college.html on port 3456 (URL visible)
  • hello.txt, brookings.jpg, college.html load successfully (4 pts each)
  • Visiting a nonexistent file returns 404 (4 pts)
  • Explain in README why phpinfo.php behaves differently under Node (4 pts)
  • All files pushed to GitHub
  • Completion of AI Reflection (5 pts)

---

Multi-room Chat Server (55 Points)

Room Administration (25 pts)

  • Create chat rooms (5)
  • Join rooms (5)
  • Display users in room (5)
  • Private/password room (5)
  • Kick users (3)
  • Ban users (2)

Messaging (5 pts)

  • Messages show username and broadcast to room (1)
  • Private messaging (4)

AI Agent (15 pts)

  • \agent command works (10)
  • Handles errors gracefully without crashing (5)

Best Practices (5 pts)

  • Clean, readable code (2)
  • Valid HTML (2)
  • node_modules ignored by version control (1)

Usability (5 pts)

  • Easy and intuitive interaction (4)
  • Visually appealing (1)

AI Reflection (5 pts)

---

Creative Portion (10 Points)

Add a meaningful feature beyond requirements.

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module5-HomePage-New&oldid=3452"