Assignment 3 (Online Chat)

This assignment is to write a web-based chat application, sort of like Slack. It is due on April 26.

Note

This is a solo assignment.

Unlike projects 4 and 5, you do not to deploy this project to the public Internet on your Azure account.

Revision Log

April 25
Do not need Azure.
April 21
Added Truncated Version
April 15
Added notes on SocketIO

Simplified Version

Create a chat application that allows users to create chat rooms, with topics, and invite users to those chat rooms by sending them a generated URL.

Creating Rooms

The main (/) page for the application should display a form with a single text field, for a room topic, and a submit button to create the room.

When the user submits the form, the server should:

  • Randomly generate a room ID, like you generated the URL keys in P1.
  • Redirect the user (with a 303 redirect) to the chat room at /<key>, where <key> is the room ID.

Chat Rooms

When the user goes to a chat room URL, the application should first prompt them for a screen name.

After they have entered a screen name, it should display the chat room, showing:

  • the chat contents
  • a list of current members

When new members join, add them to the member list.

Have a small form at the bottom of the screen to enter new messages.

Send new messages to all chat participants.

Display messages with who sent them.

You do not need to keep a log of chat contents - just start sending new messages to a user when they have logged in.

Original Version

This is the original version of the assignment, if you wish to do it.

Creating Users

Users need to be able to create accounts and log in. Their accounts need to have alphanumeric usernames, passwords, e-mail addresses, and display names.

Instead of allowing users to upload avatar pictures, use their e-mail address to get their avatar from Gravatar. You can find some documentation here.

Creating Chat Rooms

Users can create rooms. So you should have a form that creates a chat room, and redirects to that chat room once it is created.

Chat rooms should have names (which must be unique, since they will be in the URL) and topics.

Chat rooms can be public (anyone can join) or private (they will be hidden from the front page). This should be an option when the user creates a chat room.

The main page of the application should list all public chat rooms with their topics. Each room should be a link to that room.

Chat rooms should be available at the URL path /r/room, where room is the name of the chat room.

Chatting

When the user loads a chat room, it should display the previous messages in increasing order of time posted (so the newest is at the bottom). You can do this either by generating the HTML on the server, or by requesting the chat messages with JavaScript when the page loads.

There should be a small form at the bottom to type a new message.

The page should display who all is in the chat room in a column.

The chat room UI needs to use SocketIO to listen for new messages; when new messages come in, it should add them to the bottom of the chat room. SocketIO should also transmit relevant events such as users entering and leaving the chat so that the list of users can be updated.

Hint

See Notes on SocketIO for more on SocketIO.

Messages should display the user that sent them, the user's avatar picture, when the message was sent, and the message itself.

If the message contains the logged-in user's username prefixed with ‘@’ (e.g. @foo), highlight the message somehow.

If the message contains a URL, make it a hyperlink so that the readers can click it.

Hint

I recommend doing all the chat layout in JavaScript, so that you only write that logic once. If you want to use templates in JavaScript, Mustache is a nice simple template engine.

Hint

You can simplify logic by using the WebSocket to populate the initial chat window: when a new websocket connection comes in, the server can begin by sending the last 100 or so chat messages, and the users currently in the room.

Data Storage

Store users, room information, and chat messages in a database.