teaching machines

CS 347: Lab 17 – Express Chat

October 29, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in an exercise, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Your task is to write a bare-bones chat application. It will consist of two parts: an Express-based web service that manages an array of messages, and an HTML/CSS/JS client that sends and receives messages through the service.

Screen sharer, follow these steps:

1. Open Visual Studio Code.
2. Click File / Open Folder, create a new folder, and open it.
3. With the Live Share extension installed, select View / Command Palette, and choose Live Share: Start Collaborative Session.
4. Copy the invitation link to your chat.

All team members should join the session.

Chat Server

Follow these steps to create your chat server with Express and Node.js:

• Initialize a new Node.js project.
• Start an Express service listening on a port of your choosing.
• Track a global array of messages. Each message is an object composed of the sender’s username and the text of the message.
• Insert placeholder messages for testing.
• Add an endpoint named messages that accepts GET requests. It sends back an array of messages starting at a given index. It takes in one parameter: the index of the first message. Clients of the service will use this endpoint to pull down only messages that have not already been downloaded.
• Test that you can pull down the messages from the web service. The screen sharer can access the service via http://localhost:YOUR-PORT-NUMBER/messages/0. Other participants can access the service via http://IP-ADDRESS-OF-SCREEN-SHARER:YOUR-PORT-NUMBER/messages/0. Try indices besides 0.
• And an endpoint named message that accepts POST requests. It receives a JSON object from the sender that has key-value pairs for the username and the text of the message. Append the new message to the messages array.

Chat Client

Follow these steps to create your chat client with HTML, CSS, and JavaScript:

• Create a new HTML file to contain all the code for the client.
• Create an HTML structure that will have this form after it has fetched four messages: Apply minimal CSS to position the elements. (I used static positioning and two flex containers.)
• As soon as the page loads, prompt the user to enter a username using the builtin prompt function.
• Write a function pull that grabs from the web service only the messages that have been not already been downloaded. Once the messages have been downloaded and unpacked, append each message to the messages area. If you use http://localhost:YOUR-PORT-NUMBER for the URL, the browser will look for the service on the local machine. Since only the screen sharer is running the service, this will only work on the screen sharer’s machine. It would be better to use http://IP-ADDRESS-OF-SCREEN-SHARER:YOUR-PORT-NUMBER.
• Schedule pull to run every second or so using the builtin setInterval function.
• Write a function push that sends a new message to the web service. The payload is the JSON representation of an object containing the username and the text of the new message. Clear out the textarea once the fetch call succeeds.
• Run push when the user clicks the send button.
• Test with multiple machines and multiple users.

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource. Paste in both the server and the client.