[Solved] CSE312 Homework4-WebSockets

Simplifying Assumptions

You can assume the following throughout this assignment:

• The FIN bit will always be 1 and you’ll read the entire frame in one read from your TCP socket (no buffering)
• The 3 reserved bits will always be 0
• You can ignore any frames with an opcode that is not 1
• Additional WebSocket headers are compatible with what we discussed in class (ie. You don’t have to check the Sec-WebSocket-Version header)

For this assignment, add the following HTML to the home page of your app.

<label for=”chat-name”>Name: </label><input id=”chat-name” type=”text” name=”name”><br/><label for=”chat-comment”>Comment: </label><input id=”chat-comment” type=”text” name=”comment”> <button onclick=”sendMessage()“>Chat</button> <div id=”chat”></div>

You may make changes to the front-end provided throughout this document as long as the expected functionality exists in your submission (ie. You can change the HTML/JS [and add CSS] as long as there’s a clear way to submit a name/comment to a chat that uses WebSockets)

Objective 1: WebSocket Handshake

Add the following line of code to the JavaScript of your home page and implement the handshake of the WebSocket protocol at the path “/websocket”.

socket = new WebSocket(‘ws://’ + window.location.host + ‘/websocket’);

This line will make a GET request to the path “/websocket” and attempt to upgrade the TCP socket to a WebSocket connection.

Testing Procedure

1. Start your server using Docker, or “docker-compose up” if a docker-compose.yml file exists in your submission
2. Open a browser and navigate to http://localhost:<local_port>/ (<local_port> will be 8080 if using docker-compose)
3. Open the network tab of the browser console (refresh page if necessary)
4. Verify that there is a successful WebConnection connection with a response code of 101
5. Open a second browser tab and repeat steps 2-4 to verify that the server support multiple simultaneous WebSocket connections

Objective 2: WebSocket Chat

Enable users to chat using their WebSocket connections to your server with the following front end JavaScript:

// Establish a WebSocket connection with the serverconst socket = new WebSocket(‘ws://’ + window.location.host + ‘/websocket’); // Call the addMessage function whenever data is received from the server over the WebSocketsocket.onmessage = addMessage; // Allow users to send messages by pressing enter instead of clicking the Send buttondocument.addEventListener(“keypress”, function (event) {if (event.code === “Enter”) {sendMessage();}}); // Read the name/comment the user is sending to chat and send it to the server over the WebSocket as a JSON string// Called whenever the user clicks the Send button or pressed enterfunction sendMessage() {const chatName = document.getElementById(“chat-name”).value;const chatBox = document.getElementById(“chat-comment”);const comment = chatBox.value;chatBox.value = “”;chatBox.focus();if(comment !== “”) {socket.send(JSON.stringify({‘username’: chatName, ‘comment’: comment}));}} // Called when the server sends a new message over the WebSocket and renders that message so the user can read itfunction addMessage(message) {const chatMessage = JSON.parse(message.data);let chat = document.getElementById(‘chat’);chat.innerHTML += “<b>” + chatMessage[‘username’] + “</b>: ” + chatMessage[“comment”] + “<br/>”;}

Note: As always, feel free to modify this code to fit the needs of your app as long as you still send at least two pieces of information to the server that have been imputed by the user. For example, this code sends the data as a JSON String representing an object with keys “username” and “comment”. You may use a different format for the data that is sent to/received from the server.

For this objective you will parse WebSocket frames that are received from any open WebSocket connection, parse the bits of the frame to read the payload, then send a WebSocket frame to all connected WebSocket clients containing the new message.

Security: You must escape any HTML in the user’s submissions. Be aware that escaping HTML will change the length of your payload!

Suggestion: There are a few separate steps involved in this objective. It will help your debugging process if you implement and test this functionality 1 step at a time. For example, make sure you can read and parse frames properly before trying to send frames and try sending a frame only to the user sending a message before broadcasting the message to all users.

Testing Procedure

1. Start your server using Docker, or “docker-compose up” if a docker-compose.yml file exists in your submission
2. Open a browser and navigate to http://localhost:<local_port>/ (<local_port> will be 8080 if using docker-compose)
3. Open at least 2 browser tabs and enter chat messages is each. Ensure that at least one message has a payload length <126 and at least one has payload length >=126 (payloads over 1024 bytes will not be tested)
4. Verify that each user can see both their own messages and messages sent by other users in real time
5. Verify that the messages have been sent/received using a WebSocket connection
6. Security: Verify that the submitted HTML displays as text and is not rendered as HTML

Objective 3: Chat History

When a user first establishes a WebSocket connect, send them all of the chat history over the new WebSocket connection. For this objective you may use data structures to store the chat history. You can/should send each message in its own WebSocket frame.

Testing Procedure

1. Start your server using Docker, or “docker-compose up” if a docker-compose.yml file exists in your submission
2. Open a browser and navigate to http://localhost:<local_port>/ (<local_port> will be 8080 if using docker-compose)
3. Send several messages to the chat
4. Open a second browser tab
5. Verify that the previously submitted message appear when the page loads
6. Verify that the messages were received via a WebSocket connection

Objective 4: Persistent Chat History with a Database

Add a docker-compose.yml file that runs a database and maps local port 8080 to your app. Use this database to store all of the chat history for your app. This will allow the chat history to persist after a server restart.

Testing Procedure

1. Start your server using “docker-compose up”
2. Open a browser and navigate to http://localhost:8080
3. Send several messages to the chat
4. Stop the server using “docker-compose down”
5. Start your server using “docker-compose up”
6. Open a browser and navigate to http://localhost:8080
7. Verify that the messages sent in step 3 are visible on the page
8. Check the code the ensure that a database is being used via docker-compose (ie. File IO, SQLite, etc cannot be used for this objective)

Bonus Objective: Images in Chat

Add an option to send an image to the chat using WebSockets. You have much freedom in how you design your app and code for this objective and it will require modifying the front end as well as the server.

Testing Procedure

1. Start your server using “docker-compose up”
2. Open two browser tabs and navigate to http://localhost:8080 on each
3. If there is an option to upload a file, upload a jpg image to the chat in one tab
4. Verify that the image appears in the other tab
5. Verify that all most communication after the page load occurs over WebSockets (The image should be served via an HTTP request after the socket sends a chat message containing an unescaped img element. All other communication after the page load must be over WebSockets including the image upload. You must maintain control of the img elements to ensure attackers cannot inject HTML into your app)

Warning: This bonus is very difficult and will require several concepts that were not covered in lecture (eg. how to send a file without a POST request from a form; how to send binary data over a WebSocket). You should only attempt this objective if you are confident in all the material of the course and are looking for a difficult challenge.