Skip to content

Instantly share code, notes, and snippets.

@celevra
Forked from danopia/index.html
Last active October 10, 2021 03:13
Show Gist options
  • Save celevra/3e8295e03b3566f531e2 to your computer and use it in GitHub Desktop.
Save celevra/3e8295e03b3566f531e2 to your computer and use it in GitHub Desktop.
<!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);
};
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment