Going Real Time - HTML5 Mobile Game Development - page 411

move = getTouch(e);
drawLine(start,move);
socket.emit("paint",{ start: start, move: move });
start = move;
});
Q.el.on('touchend mouseup mouseleave',function(e) {
start.x = null;
});
socket.on("connect",function() {
console.log("Connected");
});
socket.on("paint",function(data) {
drawLine(data.start,data.move);
});
socket.on("clear",function(data) {
Q.ctx.clearRect(0,0,Q.width,Q.height);
});
});
As you can see, this code uses Quintus, but to set up only the Canvas, resize it, and make it available in the
Q.ctx property.
Creating the socket connection to the server is as easy as calling
socket = io.connect();
Because the socket.io.js file was pulled to the same server as the socket is being connected to, you
don't need to provide a URI or port to connect to. (You can provide these if necessary to connect to a different
server.)
Next are two helper methods, getTouch and drawLine . getTouch grabs a Canvas pixel position from
an event location. drawLine draws a new line on the Canvas between two points.
Scribbler next defines three event handlers that track touches, moves, and releases. On a touch or a mouse
click, the app marks the start of the line. When you move your mouse or move your finger after that initial
touch, the app simply draws a straight line from the start to the current location.
To let other users of the app see the line you have drawn, in addition to drawing the line, it also calls sock-
et.emit to send a paint event back to the server. As you can see, the client API is similar to the one on the
server.
Finally, if you release your finger or the mouse, the application stops drawing. The last three listeners bind to
the socket. The first, connect , simply logs that the socket is connected to the console. It's there to show you
that built-in events and custom events are treated the same way.
The first custom event paint draws a line based on data passed from the server. If you remember, the server
simply repeats any paint events it receives and sends them to all the other clients.
The clear event, which is sent every 60 seconds by the server, tells the app to clear its entire Canvas.