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>
 
 
Search WWH ::




Custom Search