mayfer · August 7, 2015 19:59
diff --git a/index.html b/index.html
 <!doctype>
 <html>

    <head>
        <title>hi</title>
        
        <style>
            body, html {
                background: #aaa;
                font-family: monospace;
                padding: 0;
                margin: 0;
            }

            .note { min-height: 30px; min-width: 100px; background: rgba(255, 255, 255, 0.1);
                position: absolute;
            }
            
        </style>
        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            function guid() {
                function s4() {
                    return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1);
                }
                return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                s4() + '-' + s4() + s4() + s4();
            }

            var socket = io();

            socket.on("note", function(data) {
                // data.id = "box-20"
                $("#" + data.id).html(data.contents);
            });

            socket.on("box_created", function(data) {
                console.log(data);
                createBox(data.id, data.x, data.y, data.contents);
            });

            var createBox = function(id, x, y, contents) {
                var note = $("<div>").addClass("note").attr("contenteditable", "true");
                note.attr("id", id);
                note.html(contents);

                note.css({
                    top: y,
                    left: x,
                });
                note.appendTo($("body"));
            }

            $(document).ready(function(e){
                $(document).on("click", ".note", function(e) {
                    e.stopPropagation();
                });

                $(document).on("click", function(e) {
                    var x = e.pageX;
                    var y = e.pageY;

                    var id = "box-" + guid();
                    socket.emit("create_box", {
                        x: x,
                        y: y,
                        id: id,
                    });
                    createBox(id, x, y, "");
                });

                $(document).on("keyup", ".note", function(e) {
                    var note = $(this);
                    var id = note.attr("id");
                    
                    socket.emit("note", {
                        id: id,
                        contents: note.html()
                    });
                });
            });
                
        </script>
    </head>
    <body>

    </body>

 </html>
diff --git a/server.js b/server.js
 // using express to handle routing
 var express = require('express');
 var app = express();

 // http server for loading html pages
 var http = require('http').Server(app);
 // socket.io for handling websockets
 var io = require('socket.io')(http);
 var path = require('path');


 app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, 'index.html'));
 });
 // start node server
 http.listen(8888, function(){
    console.log('listening on *:8888');
 });
 app.use(express.static(__dirname));


 var boxes = {};

 io.on("connection", function(socket) {
    console.log(socket.id, "connected!!!");

    // send them all existing boxes
    for(id in boxes) {
        socket.emit("box_created", boxes[id]);
    }


    socket.on("disconnect", function() {
        console.log(socket.id, "disconnected.");
    })

    socket.on("note", function(data) {
        if(data.id in boxes) {
            boxes[data.id].contents = data.contents;
            socket.broadcast.emit("note", data);
        }
    });

    socket.on("create_box", function(data) {
        var id = data.id;
        boxes[id] = {
            id: id,
            x: data.x,
            y: data.y,
            contents: "",
        }
        setTimeout(function() {
            socket.broadcast.emit("box_created", boxes[id]);
        }, 1000);
    });


 })
	<!doctype>
	<html>

	<head>
	<title>hi</title>

	<style>
	body, html {
	background: #aaa;
	font-family: monospace;
	padding: 0;
	margin: 0;
	}

	.note { min-height: 30px; min-width: 100px; background: rgba(255, 255, 255, 0.1);
	position: absolute;
	}

	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>
	function guid() {
	function s4() {
	return Math.floor((1 + Math.random()) * 0x10000)
	.toString(16)
	.substring(1);
	}
	return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
	s4() + '-' + s4() + s4() + s4();
	}

	var socket = io();

	socket.on("note", function(data) {
	// data.id = "box-20"
	$("#" + data.id).html(data.contents);
	});

	socket.on("box_created", function(data) {
	console.log(data);
	createBox(data.id, data.x, data.y, data.contents);
	});

	var createBox = function(id, x, y, contents) {
	var note = $("<div>").addClass("note").attr("contenteditable", "true");
	note.attr("id", id);
	note.html(contents);

	note.css({
	top: y,
	left: x,
	});
	note.appendTo($("body"));
	}

	$(document).ready(function(e){
	$(document).on("click", ".note", function(e) {
	e.stopPropagation();
	});

	$(document).on("click", function(e) {
	var x = e.pageX;
	var y = e.pageY;

	var id = "box-" + guid();
	socket.emit("create_box", {
	x: x,
	y: y,
	id: id,
	});
	createBox(id, x, y, "");
	});

	$(document).on("keyup", ".note", function(e) {
	var note = $(this);
	var id = note.attr("id");

	socket.emit("note", {
	id: id,
	contents: note.html()
	});
	});
	});

	</script>
	</head>
	<body>

	</body>

	</html>
	// using express to handle routing
	var express = require('express');
	var app = express();

	// http server for loading html pages
	var http = require('http').Server(app);
	// socket.io for handling websockets
	var io = require('socket.io')(http);
	var path = require('path');


	app.get('/', function(req, res){
	res.sendFile(path.join(__dirname, 'index.html'));
	});
	// start node server
	http.listen(8888, function(){
	console.log('listening on *:8888');
	});
	app.use(express.static(__dirname));


	var boxes = {};

	io.on("connection", function(socket) {
	console.log(socket.id, "connected!!!");

	// send them all existing boxes
	for(id in boxes) {
	socket.emit("box_created", boxes[id]);
	}


	socket.on("disconnect", function() {
	console.log(socket.id, "disconnected.");
	})

	socket.on("note", function(data) {
	if(data.id in boxes) {
	boxes[data.id].contents = data.contents;
	socket.broadcast.emit("note", data);
	}
	});

	socket.on("create_box", function(data) {
	var id = data.id;
	boxes[id] = {
	id: id,
	x: data.x,
	y: data.y,
	contents: "",
	}
	setTimeout(function() {
	socket.broadcast.emit("box_created", boxes[id]);
	}, 1000);
	});


	})