ikouchiha47/app.js

## app.js
var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    path = require('path'),
    fs = require('fs');

app.listen(9000);

function handler (req, res) {
  var filePath = '.' + req.url;
  if (filePath == './')
    filePath = './index.html';

  var extname = path.extname(filePath);
  var contentType = 'text/html';

  switch (extname) {
    case '.js':
        contentType = 'text/javascript';
        break;
    case '.css':
        contentType = 'text/css';
        break;
    case '.json':
        contentType = 'application/json';
        break;
  }

  fs.readFile(filePath, function (err, data) {
      if (err) {
        if(err.code == 'ENOENT'){
          res.writeHead(400);
          res.end("File Not found");
        }
        else {
          res.writeHead(500);
          res.end('Sorry, check with the site admin for error: '+ err.code+' ..\n');
          res.end();
        }
      }
      else {
        res.writeHead(200, { 'Content-Type': contentType });
        res.end(data, 'utf-8');
      }
  });
}

var socks = [];
var people = [];
var body = "";

io.sockets.on('connection', function (client) {
  socks.push(client);
  client.emit('refresh', {
    body: body
  });

  client.on('newUser', function(name) {
    var person = {};
    person["id"] = client.id;
    person["nick"] = name;
    person["color"] = '#' + Math.floor(Math.random()*16777215).toString(16);
    people.push(person);

    io.sockets.emit('users', people);
  });

  client.on('refresh', function (body_) {
    //console.log('refresh after change');
    body = body_;
  });

  client.on('change', function (op) {
    //console.log("from client", op);
    if (op.origin == '+input' || op.origin == 'paste' || op.origin == '+delete') {
      op.owner = people.filter(function(person) { return person.id == client.id })[0].nick;
      socks.forEach(function (sock) {
        if (sock != client)
          sock.emit('change', op);
      });
    };
  });
});

## editor.css
html, body {
  margin: 0;
  padding: 0;
  max-width:inherit;
  height: 100%;
}

form, .CodeMirror, .CodeMirror-scroll {
  height: 100%;
}

.users {
  height: 37px;
  border-bottom: 1px solid #000;
  width: 100%;
  overflow-y: auto;
  background-color: #444;
}

.list-unstyled li {
  display: inline-block;
  list-style-type: none;
  margin-right: 10px;
  color: #fff;
}

## editor.js
var name = window.prompt("Enter a name");
var socket = io.connect();

function $( sel ) {
  var elem,
      reg = /<([^>]+)>/;

  if(sel.indexOf("<") === -1)
    return document.querySelector(sel);
  else if(sel.indexOf("<") > -1 && sel.indexOf(">") > -1) {
    elem = reg.exec(sel)
    return document.createElement(elem[1]);
  }
}

function $$( sel ){
  return document.querySelectorAll(sel)
}

function $frag() {
  return document.createDocumentFragment();
}

socket.emit('newUser', name);
socket.on('users', function(people) {
  var frag = $frag(),
      ul = $("<ul>"),
      li;
  for(var i = 0, len = people.length; i < len; i++) {
    li = $("<li>");
    li.textContent = people[i]["nick"]
    li.style.borderBottom = "5px solid " + people[i]["color"];

    frag.appendChild(li)
  }
  ul.appendChild(frag);
  ul.className = "list-unstyled";
  $('.users').innerHTML = '';
  $(".users").appendChild(ul);
});

socket.on("update", function(msg) {
  alert(msg);
  socket.emit('refresh',editor.getValue())
});

socket.on('refresh', function (data) {
  editor.setValue(data.body);
});

socket.on('change', function (data) {
  console.log(data.text, data.owner);
  editor.replaceRange(data.text, data.from, data.to);
});

editor.on('change', function (i, op) {
  socket.emit('change', op);
  socket.emit('refresh', editor.getValue());
});

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>collab editing, yo</title>
    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
    <link rel="stylesheet" href="editor.css" type="text/css" media="screen" />
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/addon/mode/overlay.js"></script>
    <script src="http://codemirror.net/mode/xml/xml.js"></script>
    <script src="http://codemirror.net/mode/markdown/markdown.js"></script>
    <script src="http://codemirror.net/mode/gfm/gfm.js"></script>
  </head>
  <body>
    <div class="users"></div>
    <textarea id="textit">'sup</textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("textit"), {
        mode: 'gfm',
        lineNumbers: true,
        theme: "ambiance"
      });
    </script>

    <script src="/socket.io/socket.io.js"></script>
    <script src="editor.js"></script>

  </body>
</html>
	var app = require('http').createServer(handler),
	io = require('socket.io').listen(app),
	path = require('path'),
	fs = require('fs');

	app.listen(9000);

	function handler (req, res) {
	var filePath = '.' + req.url;
	if (filePath == './')
	filePath = './index.html';

	var extname = path.extname(filePath);
	var contentType = 'text/html';

	switch (extname) {
	case '.js':
	contentType = 'text/javascript';
	break;
	case '.css':
	contentType = 'text/css';
	break;
	case '.json':
	contentType = 'application/json';
	break;
	}

	fs.readFile(filePath, function (err, data) {
	if (err) {
	if(err.code == 'ENOENT'){
	res.writeHead(400);
	res.end("File Not found");
	}
	else {
	res.writeHead(500);
	res.end('Sorry, check with the site admin for error: '+ err.code+' ..\n');
	res.end();
	}
	}
	else {
	res.writeHead(200, { 'Content-Type': contentType });
	res.end(data, 'utf-8');
	}
	});
	}

	var socks = [];
	var people = [];
	var body = "";

	io.sockets.on('connection', function (client) {
	socks.push(client);
	client.emit('refresh', {
	body: body
	});

	client.on('newUser', function(name) {
	var person = {};
	person["id"] = client.id;
	person["nick"] = name;
	person["color"] = '#' + Math.floor(Math.random()*16777215).toString(16);
	people.push(person);

	io.sockets.emit('users', people);
	});

	client.on('refresh', function (body_) {
	//console.log('refresh after change');
	body = body_;
	});

	client.on('change', function (op) {
	//console.log("from client", op);
	if (op.origin == '+input' \|\| op.origin == 'paste' \|\| op.origin == '+delete') {
	op.owner = people.filter(function(person) { return person.id == client.id })[0].nick;
	socks.forEach(function (sock) {
	if (sock != client)
	sock.emit('change', op);
	});
	};
	});
	});
	html, body {
	margin: 0;
	padding: 0;
	max-width:inherit;
	height: 100%;
	}

	form, .CodeMirror, .CodeMirror-scroll {
	height: 100%;
	}

	.users {
	height: 37px;
	border-bottom: 1px solid #000;
	width: 100%;
	overflow-y: auto;
	background-color: #444;
	}

	.list-unstyled li {
	display: inline-block;
	list-style-type: none;
	margin-right: 10px;
	color: #fff;
	}
	var name = window.prompt("Enter a name");
	var socket = io.connect();

	function $( sel ) {
	var elem,
	reg = /<([^>]+)>/;

	if(sel.indexOf("<") === -1)
	return document.querySelector(sel);
	else if(sel.indexOf("<") > -1 && sel.indexOf(">") > -1) {
	elem = reg.exec(sel)
	return document.createElement(elem[1]);
	}
	}

	function $$( sel ){
	return document.querySelectorAll(sel)
	}

	function $frag() {
	return document.createDocumentFragment();
	}

	socket.emit('newUser', name);
	socket.on('users', function(people) {
	var frag = $frag(),
	ul = $("<ul>"),
	li;
	for(var i = 0, len = people.length; i < len; i++) {
	li = $("<li>");
	li.textContent = people[i]["nick"]
	li.style.borderBottom = "5px solid " + people[i]["color"];

	frag.appendChild(li)
	}
	ul.appendChild(frag);
	ul.className = "list-unstyled";
	$('.users').innerHTML = '';
	$(".users").appendChild(ul);
	});

	socket.on("update", function(msg) {
	alert(msg);
	socket.emit('refresh',editor.getValue())
	});

	socket.on('refresh', function (data) {
	editor.setValue(data.body);
	});

	socket.on('change', function (data) {
	console.log(data.text, data.owner);
	editor.replaceRange(data.text, data.from, data.to);
	});

	editor.on('change', function (i, op) {
	socket.emit('change', op);
	socket.emit('refresh', editor.getValue());
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>collab editing, yo</title>
	<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
	<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
	<link rel="stylesheet" href="editor.css" type="text/css" media="screen" />
	<script src="http://codemirror.net/lib/codemirror.js"></script>
	<script src="http://codemirror.net/addon/mode/overlay.js"></script>
	<script src="http://codemirror.net/mode/xml/xml.js"></script>
	<script src="http://codemirror.net/mode/markdown/markdown.js"></script>
	<script src="http://codemirror.net/mode/gfm/gfm.js"></script>
	</head>
	<body>
	<div class="users"></div>
	<textarea id="textit">'sup</textarea>

	<script>
	var editor = CodeMirror.fromTextArea(document.getElementById("textit"), {
	mode: 'gfm',
	lineNumbers: true,
	theme: "ambiance"
	});
	</script>

	<script src="/socket.io/socket.io.js"></script>
	<script src="editor.js"></script>

	</body>
	</html>