display active connections

client/css/style.css

@@ -583,6 +583,9 @@ img {
 	text-align: right;
 }
 
+.active-connections {
+	color: #999
+}
 
 
 

server.js

@@ -32,14 +32,24 @@ server.listen(port);
 
 console.log('Server running at http://127.0.0.1:' + port + '/');
 
+/**************
+ SETUP Socket.IO
+**************/
+var io = require('socket.io')(server);
+
 /**************
  ROUTES
 **************/
 app.get('/', function(req, res) {
 	//console.log(req.header('host'));
 	url = req.header('host');
+
+	var connected = io.sockets.connected;
+	clientsCount = Object.keys(connected).length;
+
 	res.render('home.jade', {
-		 url: url
+		url: url,
+		connected: clientsCount
 	});
 });
 
@@ -61,8 +71,6 @@ app.get('/:id', function(req, res){
 /**************
  SOCKET.I0
 **************/
-var io = require('socket.io')(server);
-
 io.sockets.on('connection', function (client) {
 	//santizes text
 	function scrub( text ) {

views/home.jade

@@ -15,11 +15,11 @@ body
 	div.board-outline
 		div#board
 			div#board-doodles
-		
-			
+
+
 			table#board-table.board-table
 				tr
-					td 
+					td
 						h1.home scrumblr.
 						form.home(onsubmit="return go();")
 							label name your new board:
@@ -31,7 +31,7 @@ body
 						p.home!= '<a href="http://' + locals.url + '/demo">' + locals.url + '/demo</a>'
 						<br><br><br>
 						p.home.small sourcecode at <a href="https://github.com/aliasaria/scrumblr">github</a>
-				
+
 	div.stickers
 		div.sticker#sticker-red
 			image(src="/images/stickers/sticker-red.png")
@@ -52,9 +52,10 @@ body
 
 
 	//display # of active users here
+	div.active-connections= "connections: " + connected
 
 	//<div style="width: 980px; height: 450px; border: solid 2px; opacity:.1; margin-top: 100px"> this will be the backlog that only appears on drag or perhaps not at all</div>
 
 	<script type="text/javascript">function go() {var value = document.forms[0].elements["name"].value; value = escape(value); window.location.href = value; return false;}</script>
 
-	<script type="text/javascript">	  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2069672-4']);  _gaq.push(['_trackPageview']);   (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script>
+	<script type="text/javascript">	  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2069672-4']);  _gaq.push(['_trackPageview']);   (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script>