mayfer · February 21, 2015 01:07
diff --git a/index.html b/index.html
 <!doctype>
 <html>

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

            .client {
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
            
        </style>
        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>


            var Main = function() {

                this.init_network = function() {
                    this.socket = io();
                    this.socket.on("newmessage", function(msg){
                        $('body').append(msg).append('<br />');
                    });
                    this.socket.on("cursor", function(msg){
                        var da_div = $('.'+msg.color);
                        if(da_div.length == 0) {
                            da_div = $('<div>').addClass('client').addClass(msg.color).css('background', "#" + msg.color).appendTo('body');
                        }
                        da_div.css({top: msg.y, left: msg.x});
                    });
                }

                this.init_ui = function() {
                    var socket = this.socket;
                    $('form').submit(function(e){
                        e.preventDefault();
                        var msg = $('input[name="message"]').val();
                        socket.emit("newmessage", msg);
                        
                        $('input[name="message"]').val('');
                        $('body').append(msg).append('<br />');
                    });

                    $('body').on('mousemove', function(e) {
                        var rect = this.getBoundingClientRect()
                        var parentOffset = {
                            top: rect.top + document.body.scrollTop,
                            left: rect.left + document.body.scrollLeft
                        }

                        var x = e.pageX - parentOffset.left;
                        var y = e.pageY - parentOffset.top;

                        socket.emit('cursor', {x: x, y: y});
                    });
                }

                return this;
            }

            $(document).ready(function(){
                var main = new Main();
                main.init_network();
                main.init_ui();
            });
                
        </script>
    </head>
    <body>
        <form>
            <input type='text' name='message' />
            <input type='submit' name='asd' value='Send' />
        </form>


    </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));

 // event handler for when a client connects 
 io.on('connection', function(socket){
    // socket ID is a unique identifier for this particular connection
    // it assigns a new one for every new browser connection, even if it's the same user.
    console.log(socket.id, "connected");

    // generate random hex color
    var color = ''+(Math.random()*0xFFFFFF<<0).toString(16);

    // cookies can be accessed as per usual from a socket connection
    console.log("cookies", socket.request.headers.cookie);
    
    // listen for messages from this client
    socket.on('newmessage', function(msg){
        console.log(msg);
        // broadcast the received message to all the other clients
        socket.broadcast.emit("newmessage", msg);
    });
    socket.on('cursor', function(msg){
        msg.color = color;
        // broadcast the message to ALL clients (including the sender)
        io.sockets.emit("cursor", msg);
    });

    socket.on('disconnect', function() {
        // remove this socket object from current online list
        console.log("disconnected", socket.id);
    });
 });
	<!doctype>
	<html>

	<head>
	<title>hi</title>

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

	.client {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	}

	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>


	var Main = function() {

	this.init_network = function() {
	this.socket = io();
	this.socket.on("newmessage", function(msg){
	$('body').append(msg).append('<br />');
	});
	this.socket.on("cursor", function(msg){
	var da_div = $('.'+msg.color);
	if(da_div.length == 0) {
	da_div = $('<div>').addClass('client').addClass(msg.color).css('background', "#" + msg.color).appendTo('body');
	}
	da_div.css({top: msg.y, left: msg.x});
	});
	}

	this.init_ui = function() {
	var socket = this.socket;
	$('form').submit(function(e){
	e.preventDefault();
	var msg = $('input[name="message"]').val();
	socket.emit("newmessage", msg);

	$('input[name="message"]').val('');
	$('body').append(msg).append('<br />');
	});

	$('body').on('mousemove', function(e) {
	var rect = this.getBoundingClientRect()
	var parentOffset = {
	top: rect.top + document.body.scrollTop,
	left: rect.left + document.body.scrollLeft
	}

	var x = e.pageX - parentOffset.left;
	var y = e.pageY - parentOffset.top;

	socket.emit('cursor', {x: x, y: y});
	});
	}

	return this;
	}

	$(document).ready(function(){
	var main = new Main();
	main.init_network();
	main.init_ui();
	});

	</script>
	</head>
	<body>
	<form>
	<input type='text' name='message' />
	<input type='submit' name='asd' value='Send' />
	</form>


	</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));

	// event handler for when a client connects
	io.on('connection', function(socket){
	// socket ID is a unique identifier for this particular connection
	// it assigns a new one for every new browser connection, even if it's the same user.
	console.log(socket.id, "connected");

	// generate random hex color
	var color = ''+(Math.random()*0xFFFFFF<<0).toString(16);

	// cookies can be accessed as per usual from a socket connection
	console.log("cookies", socket.request.headers.cookie);

	// listen for messages from this client
	socket.on('newmessage', function(msg){
	console.log(msg);
	// broadcast the received message to all the other clients
	socket.broadcast.emit("newmessage", msg);
	});
	socket.on('cursor', function(msg){
	msg.color = color;
	// broadcast the message to ALL clients (including the sender)
	io.sockets.emit("cursor", msg);
	});

	socket.on('disconnect', function() {
	// remove this socket object from current online list
	console.log("disconnected", socket.id);
	});
	});