WebSocket Tutorial

In this tutorial, we will practice with WebSocket, we will work on the collaborative drawing app as we did in the lecture. We will start with an incomplete version of it and add features to it. Try to avoid look at the lecture example as much as you can.

1. Download wstut.zip and unzip it in your web space on cslinux.
2. Open echoServerBroadcast.js, note that this file has two servers implemented in it: one WebSocket server and one Express.js server server static content. Replace the port numbers with the port numbers that are assigned to you according to ports.txt.
3. Open static/draw.html, understand the code and replace the port number with your own port numbers.
4. Run the broadcast server on cslinux, then visit http://cslinux.utm.utoronto.ca:XXXXX/draw.html in your browser, where XXXXX is the port number of your Express.js server. Note that you need to visit "http" rather than "https". Open it in multiple browser windows to see how it works collaboratively.
5. You may have noticed that right now different clients see different pictures drawn, i.e., the part drawn before the window opens is not displayed. Modify echoServerBroadcast.js so that all clients see the all things that have been drawn so far.
6. Now we want each client to draw with their own colour, as well as their own width of strokes. Each client's colour and width of stoke is random generated when the client is initialized.
7. Add an "eraser" feature to the drawing app. Add a "toggle eraser" button to draw.html. After clicking on this button, moving mouse over the canvas will erase content from all clients' canvases. Clicking on "toggle eraser" again will switch back to the normal drawing mode. Hint: the erase function can be implemented as drawing white rectangles with predefined size.