celevra/index.html

## 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">
    <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>

    <!-- Code block highlighting modes -->
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
    <script src="http://codemirror.net/mode/css/css.js"></script>
    <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="http://codemirror.net/mode/clike/clike.js"></script>
    <script src="http://codemirror.net/mode/clojure/clojure.js"></script>
    <script src="http://codemirror.net/mode/ruby/ruby.js"></script>

    <style type="text/css">
      body
      {
        margin: 0;
        padding: 0;
        max-width:inherit;
        height: 100%;
      }
      html, form, .CodeMirror, .CodeMirror-scroll
      {
        height: 100%;
      }
    </style>
  </head>
  <body>
<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>
  var socket = io.connect();
  socket.on('refresh', function (data) {
    editor.setValue(data.body);
  });
  socket.on('change', function (data) {
    console.log(data);
    editor.replaceRange(data.text, data.from, data.to);
  });
  editor.on('change', function (i, op) {
    console.log(op);
    socket.emit('change', op);
    socket.emit('refresh', editor.getValue());
  });
</script>

  </body>
</html>

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

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

var body = "'sup";
io.sockets.on('connection', function (socket) {
  socket.emit('refresh', {body: body});

  socket.on('refresh', function (body_) {
    console.log('new body');
    body = body_;
  });

  socket.on('change', function (op) {
    console.log(op);
    if (op.origin == '+input' || op.origin == 'paste' || op.origin == '+delete') {
        socket.broadcast.emit('change', op);
    };
  });
});
	<!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">
	<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>

	<!-- Code block highlighting modes -->
	<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
	<script src="http://codemirror.net/mode/css/css.js"></script>
	<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
	<script src="http://codemirror.net/mode/clike/clike.js"></script>
	<script src="http://codemirror.net/mode/clojure/clojure.js"></script>
	<script src="http://codemirror.net/mode/ruby/ruby.js"></script>

	<style type="text/css">
	body
	{
	margin: 0;
	padding: 0;
	max-width:inherit;
	height: 100%;
	}
	html, form, .CodeMirror, .CodeMirror-scroll
	{
	height: 100%;
	}
	</style>
	</head>
	<body>
	<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>
	var socket = io.connect();
	socket.on('refresh', function (data) {
	editor.setValue(data.body);
	});
	socket.on('change', function (data) {
	console.log(data);
	editor.replaceRange(data.text, data.from, data.to);
	});
	editor.on('change', function (i, op) {
	console.log(op);
	socket.emit('change', op);
	socket.emit('refresh', editor.getValue());
	});
	</script>

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

	app.listen(80);

	function handler (req, res) {
	fs.readFile(__dirname + '/index.html',
	function (err, data) {
	if (err) {
	res.writeHead(500);
	return res.end('Error loading index.html');
	}

	res.writeHead(200);
	res.end(data);
	});
	}

	var body = "'sup";
	io.sockets.on('connection', function (socket) {
	socket.emit('refresh', {body: body});

	socket.on('refresh', function (body_) {
	console.log('new body');
	body = body_;
	});

	socket.on('change', function (op) {
	console.log(op);
	if (op.origin == '+input' \|\| op.origin == 'paste' \|\| op.origin == '+delete') {
	socket.broadcast.emit('change', op);
	};
	});
	});