OT in JS

client.js

var area = document.getElementById('area');


var buffer = [];
var position = 0;
var last_id = 1;
var last_length = 0;


var socket = io.connect('http://localhost:5000');
socket.on('operation', function (operation) {
console.log('ope', operation);
if ( operation.actions ) {
  var action = operation.actions[0];
  console.log('action', action.content, action.length, action.position);

  if ( action.position > area.value.length ) {
    console.log('out of sync');
  }
  else if (action.length > 0) {
    area.value = area.value.substring(0, action.position) + action.content + area.value.substring(action.position);
  }
  else if (action.length < 0) {
    area.value = area.value.substring(0, action.position) + area.value.substring(action.position + (- action.length));
  }
}
});


area.onkeyup = function (e) {
  setTimeout(function () {
    last_id += 1;
    var key = e.keyCode;
    if (key >= 48 && key < 112 || key > 250) {
      var str = String.fromCharCode(key);
      var operation = {
        'actions': [
          {
            'i': area.selectionStart - str.length,
            'l': str.length,
            'c': str,
            'p': last_id
          }
        ]
      };
      socket.emit('operation', operation);
      position += str.length;
      // area.value = '';
      last_length = area.value.length;
    }
    if ( key === 8 ) { //backspace
      var l = area.value.length - last_length;
      last_length = area.value.length;
      var operation = {
        'actions': [
          {
            'i': area.selectionStart,
            'l': l,
            'c': '',
            'p': last_id
          }
        ]
      };
      socket.emit('operation', operation);
    }
  }, 0);
};


function transform(received, previous) {
  received.actions.forEach(function (received_action) {
    var pos = received_action.position;

    previous.actions.forEach(function (previous_action) {
      if (previous_action.position <= pos) {
        pos += previous_action.length;
      }
    });

    received_action.position = pos;
  });
}

index.html

<textarea id="area"></textarea>
<div id="rendering"></div>

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

server.js

var fs = require('fs');
var http = require('http');


var server = http.createServer(function (req, res) {
  req.url = (req.url === '/') ? 'index.html' : req.url.substr(1);

  try {
    var html = fs.readFileSync(req.url, 'utf8');
    res.writeHead(200, { 'content-type': 'text/html; charset=UTF-8' });
    res.write(html);
  } catch (err) {
    res.writeHead(404);
  }
  res.end();
});

var io = require('socket.io').listen(server);


var operations = [];


io.sockets.on('connection', function (socket) {
  socket.emit('init', operations);

  socket.on('operation', function (data) {
    var operation = {
      actions: data['actions'].map(function (action) {
        return {
          position: action['i'],
          length: action['l'],
          content: action['c']
        }
      })
    };
    console.log('received operation:', operation);

    var last_id = data['p'];
    for (var i = operations.length - 1; i >= 0; --i) {
      var change = operations[i];
      if (change.id !== last_id) {
        transform(operation, change);
      } else {
        break;
      }
    }
    operations.push(operation);

    // broadcast the transformed operation
    // this works as an server acknowledgment for the origin
    socket.broadcast.emit('operation', operation);
  });
});


server.listen(5000);


function transform(received, previous) {
  received.actions.forEach(function (received_action) {
    var pos = received_action.position;

    previous.actions.forEach(function (previous_action) {
      if (previous_action.position <= pos) {
        pos += previous_action.length;
      }
    });

    received_action.position = pos;
  });
}