HTML and CSS Reference
In-Depth Information
});
socket.on('disconnect', function () {
console.log("Someone disconnected");
});
});
As Listing 20-3 shows, the code necessary to get the Socket.io server up and running is minimal. After cre-
ating an express server, to attach Socket.io to it, you simply call
listen
:
io = require('socket.io').listen(app);
The remaining code to set up Express, configure a static directory, and bind to a port is the same as you've
seen previously.
Because the scribbles of a bunch of random users can most likely get messy, the server unceremoniously
clears the board every 60 seconds by sending a
clear
message that tells the clients to clear their scribble areas.
To target all sockets, you can call
io.sockets.emit
, which takes an event name and an optional data ob-
ject.
To respond when a new socket connects, you need to bind to the
connection
event on the list of sockets,
io.sockets
. It triggers its callback with the
socket
object for the individual client connection.
You can store that socket object for later reference and bind additional events onto it. In this case, a
paint
event bound to the client triggers whenever it draws a line. The server responds by calling
sock-
et.broadcast.emit
, which works like
io.sockets.emit
except it skips that socket it is called on.
Adding the Scribble Client
To round out the scribble app, add the client side of the app. This app uses Quintus primarily to save the steps
of setting up and maximizing the Canvas. Create a
public/
subfolder underneath your app, and create an
in-
dex.html
with the content of
Listing 21-4
.
Listing 21-4:
The scribble index.html file
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
↵
minimum-scale=1.0, maximum-scale=1.0"/>
<title>Scribble</title>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.js'></script>
<script src='js/quintus.js'></script>
<script src='scribble.js'></script>
<script src="/socket.io/socket.io.js"></script>
<style>
* { padding:0px; margin:0px; }
</style>
</head>
<body>