Welcome to part II of the Realtime Whiteboard App with NodeJS. In this part we will go over the web UI interface which uses a bit of javascript and will work with the NodeJs server from part I.
Live Demo of the Web Client
Try opening the live demo in multiple browser tabs; start drawing in the first tab and watch as all the other tabs read the web-socket.
http://warm-fortress-2906.herokuapp.com/
Part II: The UI Interface
As discussed previously the server is expecting the UI to emit four key events.
1) newClient
2) paint
3) clear
4) debug
As our main focus is on code, lets get the HTML out of the way first. In the same directory from part I create a new file title it index.html
. If you recall from our server code when a client connects to our server at the root ‘/‘, we wrote it to respond by sending out the contents of file specifically named index.html
. On the command line create the file.
|
|
The first couple of lines are just the necessary tags <html>
, <head>
and <body>
. We will also add our javascript dependencies from http://cdnjs.cloudflare.com; namely jQuery and SocketIO.
|
|
Drawing Canvas and SocketIO
In order to do anything drawing related we will need to set some variables and initiate our socket connection.
|
|
With the initial variables declared we next will add a utility function to setup the HTML5 canvas. We are going to be using jQuery for binding the canvas events which are easy enough to grasp as they only involve what should happen when the user operates his mouse within the context of the canvas area.
Much akin to our socket code that we wrote for the server, HTML5 canvas events can be setup by binding
keywords such as mousemove
using jQuery. As you can already guess the function sent as the callback argument to the jQuery binding will be triggered on when the user moves his mouse. The same logic applies for the other binding events mousedown
, mouseup
and mouseleave
.
|
|
The little bit of plane geometery necessary to understand the paint
functions is trivial. Remember how we are using a 2D array to store the drawing points? The canvas is can be placed at any arbitrary location on our screen but in order to map the coordinates properly to a 2D array that begins at [0][0]
we just take the position of the mouse event e.pageX
and subtract the distance from the left edge of the canvas. For the vertical positions the same idea, take e.pageY
and subtract the distance from the top edge of the canvas.
Painting
In the setupCanvas()
function within the mouse
binding events you should have noted the paint()
method. Its signature takes an x
, y
coordinate pair and a boolean
that indicates whether or not the mouse is currently being dragged or not.
Whenever we decide to paint we should be doing three things
1) Sending paint
events through our socket
2) Drawing lines on our canvas
3) Storing the previous position of our mouse
The socket code accepts two arguments, a string with the eventName and a json object with the event payload. Which for us is paint
and a json object with { "x": someNumber, "y": someNumber }
.
|
|
In the above code we sent a paint event out to our server, but what about the reverse? In the incident that the server sends a paint
event to our web client we should update our canvas.
|
|
Socket Event-Handling
Lastly we’ll want to set our drawing canvas and start processing the events sent to our socket, in addition we also have to handle the event after a user decides to clear the board.
|
|
For development purposes only we have the debug events; the first event sends a debug
message out to the server and second handles the debug
event sent from the server.
|
|
Whenever a new client joins the server we will want to update our board and paint it accordingly.
|
|
Thats it for part II; in the third and final part of this series we will finally write the code for the Android client.
Full Code
|
|