init

Author: Евгений А. Семенов

.DS_Store

@@ -0,0 +1,48 @@
+// Including libraries
+var express = require('express');
+var app = express(),
+	server = app.listen('8080'),
+	io = require('socket.io').listen(server),
+	static = require('node-static'); // for serving files
+
+//var app = express();
+// This will make all the files in the current folder
+// accessible from the web
+// var fileServer = new static.Server('./');
+	
+// This is the port for our web server.
+// you will need to go to http://localhost:8080 to see it
+// app.listen(8080);
+
+
+app.engine('html', require('ejs').renderFile);
+
+
+app.get('/', function(req, res){
+	res.render('../index.html')
+});
+app.use("/assets", express.static(__dirname + '/assets'));
+
+
+// If the URL of the socket server is opened in a browser
+function handler (request, response) {
+
+	request.addListener('end', function () {
+        fileServer.serve(request, response);
+    });
+}
+
+// Delete this row if you want to see debug messages
+// io.set('log level', 1);
+
+// Listen for incoming connections from clients
+io.sockets.on('connection', function (socket) {
+
+	// Start listening for mouse move events
+	socket.on('mousemove', function (data) {
+		
+		// This line sends the event (broadcasts it)
+		// to everyone except the originating client.
+		socket.broadcast.emit('moving', data);
+	});
+});

app.js

@@ -0,0 +1,143 @@
+/*-------------------------
+	Simple reset
+--------------------------*/
+
+
+*{
+	margin:0;
+	padding:0;
+}
+
+
+/*-------------------------
+	General Styles
+--------------------------*/
+
+
+html{
+	background:url('../img/bg.png') repeat #e4e4e4;
+		
+	/* This will hide the extra canvas if the screen is small */
+	overflow:hidden;
+}
+
+body{
+	font:14px/1.3 'Segoe UI',Arial, sans-serif;
+	color:#444;
+}
+
+a, a:visited {
+	outline:none;
+	color:#43819b;
+}
+
+a:hover{
+	text-decoration:none;
+}
+
+section, footer, header{
+	display: block;
+}
+
+
+/*-------------------------
+	Main Area
+--------------------------*/
+
+hgroup{
+	position: fixed;
+	background-color: rgba(255, 255, 255, 0.7);
+	width: 400px;
+	height: 78px;
+	top: 50%;
+	left: 50%;
+	margin: -120px 0 0 -225px;
+	text-align: center;
+	padding: 25px;
+	border-radius: 10px;
+	box-shadow: 0 0 3px rgba(100, 100, 100, 0.1), 0 3px 1px #D4D4D4;
+	color: #555;
+}
+
+h1{
+	font-size: 22px;
+	padding-bottom: 8px;
+}
+
+h2{
+	font-size: 13px;
+	font-weight: normal;
+	padding-bottom: 8px;
+}
+
+h3{
+	font-size: 12px;
+	font-weight: normal;
+	font-style: italic;
+	color: #999;
+}
+
+#cursors{
+	position:relative;
+}
+
+#cursors .cursor{
+	position:absolute;
+	width:15px;
+	height:22px;
+	background:url('../img/pointer.png') no-repeat -4px 0;
+}
+
+
+
+/*----------------------------
+	The Footer
+-----------------------------*/
+
+
+footer{
+	background-color: #111111;
+	bottom: 0;
+	box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
+	height: 45px;
+	left: 0;
+	position: fixed;
+	width: 100%;
+	z-index: 100000;
+}
+
+footer h2{
+	color: #EEEEEE;
+	font-size: 14px;
+	font-weight: normal;
+	left: 50%;
+	margin-left: -400px;
+	padding: 13px 0 0;
+	position: absolute;
+	width: 540px;
+}
+
+footer h2 i{
+	font-style:normal;
+	color:#888;
+}
+
+footer a.tzine,a.tzine:visited{
+	color: #999999;
+	font-size: 12px;
+	left: 50%;
+	margin: 16px 0 0 110px;
+	position: absolute;
+	text-decoration: none;
+	top: 0;
+}
+
+footer a i{
+	color:#ccc;
+	font-style: normal;
+}
+
+footer a i b{
+	color:#c92020;
+	font-weight: normal;
+}

assets/css/styles.css

@@ -0,0 +1,120 @@
+$(function(){
+
+	// This demo depends on the canvas element
+	if(!('getContext' in document.createElement('canvas'))){
+		alert('Sorry, it looks like your browser does not support canvas!');
+		return false;
+	}
+
+	// The URL of your web server (the port is set in app.js)
+	var url = 'http://localhost:8080';
+
+	var doc = $(document),
+		win = $(window),
+		canvas = $('#paper'),
+		ctx = canvas[0].getContext('2d'),
+		instructions = $('#instructions');
+	
+	// Generate an unique ID
+	var id = Math.round($.now()*Math.random());
+	
+	// A flag for drawing activity
+	var drawing = false;
+
+	var clients = {};
+	var cursors = {};
+
+	var socket = io.connect(url);
+	
+	socket.on('moving', function (data) {
+		
+		if(! (data.id in clients)){
+			// a new user has come online. create a cursor for them
+			cursors[data.id] = $('<div class="cursor">').appendTo('#cursors');
+		}
+		
+		// Move the mouse pointer
+		cursors[data.id].css({
+			'left' : data.x,
+			'top' : data.y
+		});
+		
+		// Is the user drawing?
+		if(data.drawing && clients[data.id]){
+			
+			// Draw a line on the canvas. clients[data.id] holds
+			// the previous position of this user's mouse pointer
+			
+			drawLine(clients[data.id].x, clients[data.id].y, data.x, data.y);
+		}
+		
+		// Saving the current client state
+		clients[data.id] = data;
+		clients[data.id].updated = $.now();
+	});
+
+	var prev = {};
+	
+	canvas.on('mousedown',function(e){
+		e.preventDefault();
+		drawing = true;
+		prev.x = e.pageX;
+		prev.y = e.pageY;
+		
+		// Hide the instructions
+		instructions.fadeOut();
+	});
+	
+	doc.bind('mouseup mouseleave',function(){
+		drawing = false;
+	});
+
+	var lastEmit = $.now();
+
+	doc.on('mousemove',function(e){
+		if($.now() - lastEmit > 30){
+			socket.emit('mousemove',{
+				'x': e.pageX,
+				'y': e.pageY,
+				'drawing': drawing,
+				'id': id
+			});
+			lastEmit = $.now();
+		}
+		
+		// Draw a line for the current user's movement, as it is
+		// not received in the socket.on('moving') event above
+		
+		if(drawing){
+			
+			drawLine(prev.x, prev.y, e.pageX, e.pageY);
+			
+			prev.x = e.pageX;
+			prev.y = e.pageY;
+		}
+	});
+
+	// Remove inactive clients after 10 seconds of inactivity
+	setInterval(function(){
+		
+		for(ident in clients){
+			if($.now() - clients[ident].updated > 10000){
+				
+				// Last update was more than 10 seconds ago. 
+				// This user has probably closed the page
+				
+				cursors[ident].remove();
+				delete clients[ident];
+				delete cursors[ident];
+			}
+		}
+		
+	},10000);
+
+	function drawLine(fromx, fromy, tox, toy){
+		ctx.moveTo(fromx, fromy);
+		ctx.lineTo(tox, toy);
+		ctx.stroke();
+	}
+
+});

assets/img/bg.png

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Node.js Multiplayer Drawing Game | Tutorialzine Demo</title>
+        
+        <!-- The stylesheets -->
+        <link rel="stylesheet" href="assets/css/styles.css" />
+        
+        <!--[if lt IE 9]>
+          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+        <![endif]-->
+    </head>
+    
+    <body>
+		<div id="cursors">
+	    	<!-- The mouse pointers will be created here -->
+		</div>
+
+		<canvas id="paper" width="1900" height="1000">
+			Your browser needs to support canvas for this to work!
+		</canvas>
+		
+		<hgroup id="instructions">		
+			<h1>Draw anywhere!</h1>
+			<h2>You will see everyone else who's doing the same.</h2>
+			<h3>Tip: if the stage gets dirty, simply reload the page</h3>
+		</hgroup>
+		
+        <footer>
+	        <h2><i>Tutorial:</i> Node.js Multiplayer Drawing Game</h2>
+            <a class="tzine" href="http://tutorialzine.com/2012/08/nodejs-drawing-game/">Head on to <i>Tutorial<b>zine</b></i> to read and download</a>
+        </footer>
+        
+        <!-- JavaScript includes. Notice that socket.io.js is served by node.js -->
+		<script src="/socket.io/socket.io.js"></script>
+		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+		<script src="assets/js/script.js"></script>
+        
+    </body>
+</html>