In this assignment, you are tasked with writing a chatting application called “Chatty.” You’ve hadd to combine a number of technologies that have been talked about in class, including mongoDB, mongoose, express, AJAX, etc.
The application should work by presenting the user with a basic chat interface when the user visits the home page of the site (index.html).
From this page, the user should be able to specify a alias (username) and then begin to send messages using the other text field and the “Send Messages” button.
The client should be a single-page site, which eventually will be served statically by the nodejs server.
The client should consist of a single html page (index.html) as well as a css and js file for style, positioning, and functionality.
Roughly the top 70% of the page should be the chat window, where the messages will show up (initially, you can just set this to be an empty div).
The bottom 30% should have two text input fields (one for the user alias, another for the message to send) and a button to send a message.
You are welcome to get creative with the colors, fonts, and other theme or stylistic elements.
The client-side Javascript will have to be able to support two major pieces of functionality.
First of all, it should have a function to send messages to the server.
When the user hits the Send Message button, the alias and the message text should be grabbed, the information sent to the server for storage (more on that later), and the message text box should be cleared, so that the user can start typing the next message.
The client-side js should also have a function for fetching the messages from the server.
You should use the setInterval function to have the client “ping” the server every 1 second for the list of messages, and display them.
When the user clicks Send Message, you should not immediately add that message to the DOM in the messages section of the client.
Instead, the message should only appear the next time that the client pings the server for the current sequence of messages.
Notice that in the message display area, the aliases are shown in bold, and the messages in regular text.
Just as a warning, this will probably be the most “complex” of all of the programming assignment server setups so far.
You’ll be writing a server using express/nodeJS, but also incorporating the user of mongoDB and the mongoose module.
As a first step, you’ll want to make sure that your file structure is set up like so:
/chatty
> server.js
> live.txt
/public_html
> index.html
> ?.js
> ?.css
Make sure that you configure express to handle static file serving for the directory public_html.
In addition to these static file requests, the server is required to handle two other types of requests.
Of of these request is a GET request to the path /chats.
When getting a request, the server should retrieve all messages it has stored (in the mongoDB database, more on that later), and return them to the user so that they can be displayed.
The client should make a request to this path every 1 second, as mentioned previously, to stay up-to-date with recent chat messages.
The other type of request should be a POST request to a path /chats/post.
These requests will be sent from the client, and include an alias and message parameter in the body of the request.
The server should save the alias, message, and a timestamps (so that order can be preserved) into the database, for later retrieval via a /chats GET request.
Now for the database.
For this assignment, you will have to install mongoDB, and get the mongoDB server / process up-and-running.
Follow the instructions here, based on your operating system, if you have not already.
You will also have to use NPM to install mongoose (in addition to express) which you will use to connect to the database.
Before starting this part of the project, you should make sure you have watched the mongoDB/mongoose class videos.
In addition, I highly recommend this tutorial from Mozilla.
For this simple chat app, you will only need one schema type, to hold chat messages. I recommend the following schema structure, though you are welcome to modify as you see fit, if you want to add more features, etc:
var Schema = mongoose.Schema;
var ChatMessageSchema = new Schema({
time: Number,
alias: String,
message: String
});
var ChatMessage = mongoose.model('ChatMessage', ChatMessageSchema );
(this, code would happen after you have established the connection with mongoDB, and before you start handling web requests).
When a user requests the sequence of chat messages, you should perform a query via mongoose to get the list of all messages, and make sure to return them in the order that they were sent in. When a user submits a new message, you should add it to the database via mongoose.
For this project, you are required to get this application set up live on the internet, using digital ocean, as I have shown in the past.
You should include a file named live.txt in the same directory as server.js.
This file should have just one line in it, representing the address that your web app is running on, so that we can go and test it.
You are required to leave it up-and-running for at least 3 (72 hours) days after the assignment due date so that we can check.
Make sure that you take a look at the style guide on the class site before turning in your project.
You are required to use the express module to handle requests, and the mongoose module for database interactions.
As for AJAX, you may use either XHR, fetch, or jQuery.
You should compress the entire chatty directory and submit that to gradescope.
Do not include the express and mongoose modules in the submitted file.
The project deadline is Monday October 23rd, 2023 at 7pm.