Showing progress to the user

A final touch that we can add to improve our application is a progress meter to show how much of the file the user has and how much they have left. This makes for a better user experience so they can see when something is happening. We need to tell the first user how much data we have sent and the second user how much data has been received.

To show how much we have sent, we can add the following code to the sendChunk function:

if (end > file.size) {
   end = file.size;
   last = true;
} // Code that already exists

var percentage = Math.floor((end / file.size) * 100);
statusText.innerHTML = "Sending... " + percentage + "%";

We just take the current number of bytes sent versus the file's size and convert this into a percentage. Now, we can do the same for the receiving user:

currentFile.push(atob(event.data)); // Code that already exists

currentFileSize += currentFile[currentFile.length - 1].length;

var percentage = Math.floor((currentFileSize / currentFileMeta...