Created
April 5, 2011 18:00
-
-
Save meddulla/904133 to your computer and use it in GitHub Desktop.
using node to display realtime heatmap of user's clicks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var sys = require('sys'), | |
fs = require('fs'), | |
Url = require('url'), | |
http = require('http'), | |
querystring = require('querystring'); | |
//create a Heatmap Obj that inherits | |
//from EventEmitter | |
var events = require('events'); | |
function Heatmap() { | |
events.EventEmitter.call(this); | |
}; | |
Heatmap.super_ = events.EventEmitter; | |
Heatmap.prototype = Object.create(events.EventEmitter.prototype, { | |
constructor: { | |
value: Heatmap, | |
enumerable: false | |
} | |
}); | |
//save dataPoint and emit event 'added' | |
//that is listened to by displayNewDataPoints | |
Heatmap.prototype.add = function(xyPoints) { | |
var self = this; | |
self.xyPoints = xyPoints; | |
fs.open("./clickcount.txt", "a", 0666, function(er, fd){ | |
var timeStamp = Math.round(new Date().getTime() / 1000); | |
fs.write(fd, xyPoints.x+','+xyPoints.y+";\n", null); | |
console.log('displaying new points. x: '+xyPoints.x + ' y:'+xyPoints.y); | |
self.emit('added', self.xyPoints); | |
}); | |
}; | |
//create an instance of Heatmap | |
//we'll use this in the requests | |
var MyHeatmap = new Heatmap(); | |
//get datapoints from querystring | |
//save datapoinst to file | |
//and emit event | |
var addDataPoint = function(req, res){ | |
var formData = []; | |
var urlObj = Url.parse(req.url, true); | |
if (urlObj.query["x"] === undefined) { | |
res.end('0'); | |
return; | |
} | |
if (urlObj.query["y"] === undefined) { | |
res.end('0'); | |
return; | |
} | |
formData.x = urlObj.query["x"]; | |
formData.y = urlObj.query["y"]; | |
MyHeatmap.add(formData); | |
res.end('1'); | |
}; | |
//responds to request when new click is sent | |
//to /addDataPoint, otherwise hangs | |
var displayNewDataPoints = function(req, res) { | |
MyHeatmap.on('added', function(dt) { | |
//console.log('displaying new points. x: '+dt.x + ' y:'+dt.y); | |
//print client side js so client heatmap | |
//display functions are called | |
//and recall this url again | |
var str = 'xx.addDataPoint('+dt.x+","+dt.y+');'; | |
str += 'ajad_send(nurl);'; | |
res.write(str,'utf8'); | |
res.end(); | |
}); | |
}; | |
//@todo display heatmap using last n dataPoints from file | |
var displayCurrentDataPoints = function(req, res) { | |
fs.readFile("./clickcount.txt", function(err, data){ | |
res.write( data.toString() ); | |
res.end(); | |
}); | |
}; | |
//basic basic routing | |
var router = { "/" : displayCurrentDataPoints, | |
"/addDataPoint" : addDataPoint, | |
"/newDataPoints" : displayNewDataPoints | |
}; | |
http.createServer(function (req, res) { | |
res.writeHead(200, {'Content-Type': 'text/javascript'}); | |
var requestPath = Url.parse(req.url).pathname; | |
console.log(requestPath); | |
try { | |
router[requestPath](req, res); | |
} catch(e) { | |
res.end(''); | |
} | |
}).listen(8000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment