Search code examples
javascriptnode.jssocket.ioace-editor

ACE Editor, Add and update multiple cursors in document with socket.io

I'm trying to create a real-time collaboration session using ACE editor and socket.io.

I'm transmitting the cursor position, row and column to all listening clients.

How can i add and update multiple cursors on all connected ACE clients?

This is what i got on ace:

Collaborate.editor.getSession().selection.on('changeCursor', function(e) {

console.log(Collaborate.editor.selection.getCursor());
              Collaborate.socket.emit('cursorchange',Collaborate.editor.selection.getCursor());

});

And this is what i got going on with socket.io:

socket.on('cursorchange',function (data) {

    socket.broadcast.to(socket.room).emit('cursorusermove', socket.username, data);


});
  1. How do i add another cursor to the document of all listening clients.
  2. For some reason i get multiple socket calls and an endless loop. what am i doing wrong?
Solution

  • addSelectionMarker is for drawing default selection markers it doesn't allow setting color. Use addMarker directly or use addDynamicMarker see search_highlight for an example

    I cant seem to deselect the previous selection leaving the editors filled with tons of selections and cursors.

    either call removeMarker or modify old range.

    you can also try to use code from http://www.firepad.io/examples/#ace-FHNSp4Vai7