Created
March 15, 2013 10:45
-
-
Save ThomasHambach/5168951 to your computer and use it in GitHub Desktop.
Node.JS and MongoDB implementation of interview question at http://stackoverflow.com/questions/15400700/recent-interview-q-manipulate-objects-on-page-for-multiple-users
Node.JS running on 8080 and Apache on 80 to serve the HTML file (which could also be done by node).
This file contains 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 express = require('express') | |
| , http = require('http') | |
| , mongojs = require('mongojs') | |
| , db = mongojs('traffic') | |
| , users = db.collection('users'); | |
| var app = express(); | |
| app.configure(function(){ | |
| app.set('port', process.env.PORT || 8080); | |
| app.use(express.logger('dev')); | |
| }); | |
| var server = require('http').createServer(app) | |
| , io = require('socket.io').listen(server); | |
| io.sockets.on('connection', function (socket) { | |
| socket.on('disconnect', function () { | |
| console.log('DISCONNECTED'); | |
| db.users.findOne({socketId: socket.id},function(err,doc){ | |
| if(doc) { | |
| db.users.remove({socketId: socket.id}); | |
| socket.broadcast.emit('remove',{id:doc._id}); | |
| } | |
| }) | |
| }); | |
| var positions = function() { | |
| db.users.find(function(err, docs) { | |
| var pos = []; | |
| docs.forEach(function(item) { | |
| pos.push({ | |
| x: item.x, | |
| y: item.y, | |
| color: item.color, | |
| id: item._id | |
| }); | |
| }); | |
| socket.emit('positions',pos); | |
| socket.broadcast.emit('positions',pos); | |
| }); | |
| } | |
| socket.on('where', function (data) { | |
| db.users.find({socketId: socket.id}, function(err, docs) { | |
| if(docs.length==0) { | |
| console.log('NOT FOUND ' + socket.id); | |
| db.users.insert( | |
| { | |
| socketId: socket.id, | |
| x: data.x, | |
| y: data.y, | |
| color: data.color | |
| } | |
| ) | |
| } else { | |
| db.users.update({socketId: socket.id},{ $set: { x:data.x,y:data.y } }); | |
| } | |
| }); | |
| positions(); | |
| }); | |
| }); | |
| server.listen(8080); |
This file contains 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
| <html> | |
| <head> | |
| <style type="text/css"> | |
| body { | |
| background: white; | |
| } | |
| div.position { | |
| width: 10px; | |
| height: 10px; | |
| position: absolute; | |
| } | |
| </style> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="//localhost:8080/socket.io/socket.io.js"></script> | |
| <script> | |
| var socket = io.connect('http://localhost:8080'); | |
| socket.on('remove',function(data) { | |
| var objId = 'obj' + data.id; | |
| $('#' + objId).remove(); | |
| }); | |
| socket.on('positions', function(data) { | |
| $.each(data, function(index, value) { | |
| var objId = 'obj' + value.id; | |
| if($(document).find('#' + objId).length==0) { | |
| $('body').append('<div class="position" id="' + objId + '"></div>'); | |
| } | |
| $('#' + objId).css({ | |
| backgroundColor: '#' + value.color, | |
| top: value.y, | |
| left: value.x | |
| }) | |
| }); | |
| }); | |
| $(document).mousemove(function(event) { | |
| socket.emit('where', { | |
| x: event.offsetX, | |
| y: event.offsetY, | |
| color: Math.floor(Math.random()*16777215).toString(16) } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains 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
| { | |
| "name": "application-name", | |
| "version": "0.0.1", | |
| "private": true, | |
| "scripts": { | |
| "start": "node app" | |
| }, | |
| "dependencies": { | |
| "express": "3.1.0", | |
| "mongojs": "*" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment