Merge pull request #30 from websdotcom/more-logging

more server side logging, for science

Author: jackwanders

app.js

@@ -8,10 +8,22 @@ var app = express();
 var server = http.createServer(app);
 var io = require('socket.io').listen(server, {log: false});
 var lessCompiler = require('express-less-middleware')();
+var logger = require('./logger');
 
 var rooms = {};
 var userCount = 0;
 
+var loggableEvents = [
+	'newVote','newRound','roundEnd','kickVoter','updateVoters'
+];
+
+var logEvent = function(event, data) {
+	logger.info({
+		event: event,
+		data: data
+	}, 'socket event');
+};
+
 /**
  * Method for passing events between host and clients
  * Use this method only when incoming event name matches
@@ -20,6 +32,9 @@ var userCount = 0;
 var setupRoomEvents = function(socket,room,events) {
 	var emitFn = function(eventName) {
 		return function(data) {
+			if (_.includes(loggableEvents, eventName)) {
+				logEvent(eventName, data);
+			}
 			io.sockets.in(room).emit(eventName, data);
 		};
 	};
@@ -96,7 +111,7 @@ app.get(/^\/([0-9a-z]{1,5})$/, routes.invite);
 
 // Listen on the port.
 server.listen(app.get('port'), function() {
-	console.log('BitPoints is ready to go at http://localhost:' + config.port);
+	logger.info('BitPoints is ready to go at http://localhost:' + config.port);
 });
 
 // Socket stuff.
@@ -108,8 +123,8 @@ io.sockets.on('connection', function (socket) {
 	var hostRoomId;
 
 	socket.on('createRoom', function (data) {
+		logEvent('createRoom', data);
 
-		console.log('Room', data.roomId, 'created.');
 		rooms[data.roomId] = data;
 		socket.join(data.roomId);
 		host = true;
@@ -123,6 +138,7 @@ io.sockets.on('connection', function (socket) {
 	});
 
 	socket.on('joinRoom', function (data) {
+		logEvent('joinRoom', data);
 
 		// Set client socket metadata.
 		myName = data.name;

logger.js

@@ -0,0 +1,7 @@
+var bunyan = require('bunyan');
+
+module.exports = bunyan.createLogger({
+	name: 'bitpoints-logger',
+	level: 'info'
+});
+

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "body-parser": "^1.15.0",
+    "bunyan": "^1.8.9",
     "cookie-parser": "^1.4.1",
     "errorhandler": "^1.4.3",
     "express": "4.13.4",

public/javascripts/host.js

@@ -97,6 +97,7 @@ var getNumVotes = function() {
 
 var processVotes = function() {
 	voteData = {
+		votes: votes,
 		average: -1,
 		trueAverage: -1,
 		min: -1,
@@ -327,7 +328,11 @@ var page = new BP.Page({
 			}
 		}
 
-		socket.emit('roundEnd',{roomId: roomId, outcome: outcomeText});
+		socket.emit('roundEnd',{
+			roomId: roomId,
+			roundData: voteData,
+			outcome: outcomeText
+		});
 	},
 
 	toggleRound: function(e, $el){

public/javascripts/join.js

@@ -49,6 +49,8 @@ var page = new BP.Page({
 
 	socket: socket,
 
+	voting: false,
+
 	socketEvents: {
 		'roomRefresh': 'joinRoom',
 		'newRound': 'reset',
@@ -138,13 +140,15 @@ var page = new BP.Page({
 	},
 
 	reset: function(data) {
+		this.voting = true;
 		this.$lastVote.removeClass('lastVote');
 		if(data.ticket){ this.$ticketInfo.html(': <a href="'+data.ticket.url+'" target="_blank">'+data.ticket.key+'</a>'); }
 		this.$status.hide().filter('.newRound').show();
 		this.$estimateTable.removeClass('roundEnd').addClass('newRound');
 	},
 
 	endRound: function(data) {
+		this.voting = false;
 		var text = 'Voting is closed.';
 
 		if (data.outcome) {
@@ -207,6 +211,8 @@ var page = new BP.Page({
 	},
 
 	submitEstimate: function(e, $el) {
+		if (!this.voting) { return; }
+
 		$('.lastVote').removeClass('lastVote');
 
 		var points = $el.addClass('lastVote').data('value'),

public/stylesheets/style.less

@@ -125,6 +125,16 @@ html {
 		padding-top: 80px;
 	}
 
+	#voterRoomInfo {
+		padding: 5px 10px;
+
+		.voterImageSmall {
+			width: 20px;
+			height: 20px;
+			margin: 0 0 0 5px;
+		}
+	}
+
 	table#estimateOptions {
 		td {
 			font-size: 2em;

public/stylesheets/voterRoom.less

@@ -3,26 +3,21 @@
  */
 #voterRoomInfo {
 	display: block;
-	height: 60px;
-	padding: 0 20px;
+	padding: 10px 20px;
 	background: rgba(0,0,0,0.5);
-	line-height: 60px;
 	font-size: 14px;
 	font-weight: bold;
 
-	#voterList {
-		float: right;
-
-		.avatars {
-			float: right;
-		}
+	#voterList .avatars {
+		display: inline-block;
+		vertical-align: middle;
 	}
 
 	.voterImageSmall {
 		float: left;
 		height: 30px;
 		width: 30px;
-		margin: 15px 5px;
+		margin: 0 0 0 5px;
 	}
 }
 
@@ -33,21 +28,23 @@
 
 	.status {
 		display: none;
-		width: 100%;
 		height: 20px;
 		padding: 10px;
 		margin: 10px 0;
 		border-radius: 6px;
 		line-height: 20px;
 		background: rgba(0,0,0,0.5);
-		color: white;
+		color: @text;
+		font-size: 14px;
+		font-weight: bold;
 
 		&.roundEnd {
 			display: block;
 		}
 
 		&.newRound {
 			background: @accentColor;
+			color: white;
 		}
 	}