Final Project: Complete a chatroom

1. When the user first goes to your site, send them to a simple login page that asks for a username (make sure to set a cookie!). Keep it simple this time, no need to create an account or use a password, only the username.
2. After getting in, user should see his video and input box. When user types something and hits enter, his image and text will be sent to server.
3. When server receives image data, it needs to decode the base64 image data to Buffer so the image can be manipulated: const imageData = Buffer.from(req.body.data, 'base64');
4. Next, use Jimp just like in challenge 3 to draw the text onto the image and write it to file as username.png. Jimp can load an image from a buffer the same way it loads from an url: Jimp.read(imageData).
5. When the user types into the input box and hits enter again, the meme will be saved as username.png. Every user should always only have 1 image.
6. When another person joins the room, they should see memes of everybody in the chatroom that updates in realtime.
7. When you get this far, you will notice that images do not change even though the files have changed. This is because of browser caching. To bust the cache, you can add a date query params to the end of the image request, for example: username.png?${Date.now}.
8. If you bust the cache this way, you will see that images are now always flickering. Flickering is happening because it takes the browser awhile to retrieve the image. To get around this problem, you should render all the images into an invisible div. When all the images are loaded, then show the invisible div and hide the current div. This way, users will see a smooth instantaneous update of the images.