Nodejs＆Socket.io中的实时协作文本编辑器

我正在开发一个实时文本编辑器，其段落锁定属性类似于https://quip.com/。在socket.io和nodejs。Nodejs＆Socket.io中的实时协作文本编辑器

这意味着当您写入给定段落时，其他协作者无法对其进行编辑。你按下回车键或将光标移动到该段落变得编辑其他合作者新行

时刻。

在这之后，我很困难。我在想一个不错的方法进一步移动。建议请。

以下是我的代码，这是完美的作品。到目前为止，我可以获得所有合作者的名单，并将编辑者的内容广播给其他合作者。

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Connected Clients</title> 
    <!--<meta charset="UTF-8"> --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <!--<script type="text/javascript" src="jquery.js"></script> --> 
    <script src="/socket.io/socket.io.js"></script> 
</head> 

<body> 
    <textarea id="editor" style="height:200px;width:300px"> 
     Thinknest Pragraph locking Test sample ! 
    </textarea> 

    <script> 
    function msgReceived(msg){ 
     //clientCounter.html(msg.clients); 
     document.getElementById('people').innerHTML=msg.uid; 
     //console.log(msg.id); 
    } 

    var clientCounter; 

    $(document).ready(function() { 
     clientCounter = $("#client_count"); 
     var socket = io.connect(
         'http://localhost:5000', 
         {'sync disconnect on unload':true} 
        ); 
     var uId=prompt("enter your userId",''); 
     socket.emit('collabrator',uId); 

     socket.on('message', function(msg){ 
      msgReceived(msg); 
     }); 

     socket.on('online_collabs',function(data){ 
      $('#online_ppl').html(data); 
      clientCounter.html(data.length); 
     }); 

     socket.on('remained_collabs',function(data){ 
      $('#online_ppl').html(data); 
      clientCounter.html(data.length); 
     }); 

     socket.on('note_collabs',function(data){ 
      $('#note_colabs').html(data); 
     }); 

     socket.on('updated_para',function(data){ 
      //$('#editor').append(data); 
      document.getElementById('editor').innerHTML=data; 
     }); 

     $('#editor').on('keydown',function(){ 
      //var para=$('#editor').value; 
      var para= $('#editor').val(); 
      //var para=document.querySelector('[contenteditable]'); 
      // var text=para.textContent; 
      socket.emit('para',{paragraph:para}); 
     }); 
    }); 
    </script> 

    <p><span id="client_count">0</span> connected clients</p><br/> 
    <ul id="people"></ul> 
    <h3>Online Collaborators</h3> 
    <span id="online_ppl"></span> <br> 
    <h3>Note Collaborators</h3> 
    <span id="note_colabs"></span> 
</body> 
</html>

server.js

var app = require('express')() 
    , server = require('http').createServer(app) 
    , io = require('socket.io').listen(server); 

server.listen(5000); 

app.get('/',function(req,res){ 
    res.sendfile("./index.html"); 
}); 

var activeClients = 0; 
var Collaborators=['Colab1','Colab2','Colab3']; 
var people=[]; 

io.sockets.on('connection', function(socket){ 
    clientConnect(socket); 

    socket.on('disconnect', function(){ 
     clientDisconnect(socket); 
    }); 

    socket.on('para',function(data){ 
     //io.sockets.emit('updated_para',data.paragraph); 
     socket.broadcast.emit('updated_para',data.paragraph); 
    }); 
}); 

function clientConnect(socket){ 
    //activeClients +=1; 
    var userSocketId=socket.id; 
    check_Collaborator(socket); 

    io.sockets.emit('message', {uid:userSocketId}); 
} 

var online_collabs=[]; 

function check_Collaborator(socket){ 
    socket.on('collabrator',function(data){ 
     if(Collaborators.indexOf(data)!=-1){ 
      socket.data=data; 

      if(online_collabs.indexOf(data)==-1) { 
       online_collabs.push(data); 
      } 

      io.sockets.emit('online_collabs',online_collabs); 
      io.sockets.emit('note_collabs',Collaborators); 
     } else { 
      console.log("collabrator not found"); 
     } 
    }); 
} 

function clientDisconnect(socket){ 
    var index=online_collabs.indexOf(socket.data) 

    if(index>-1) 
     online_collabs.splice(index,1); 

    //activeClients -=1; 
    //io.sockets.emit('message', {clients:activeClients}); 
    io.sockets.emit('remained_collabs',online_collabs); 
}

来源

2014-06-17 Abhishek Kaushik

这个项目是否有任何机会开源？我很想看看它，因为我正在寻找这样的东西。 –

有一种称为操作转换的操作，它不需要锁定，但需要非常深入的理解，这里有一个维基链接：https：//en.wikipedia.org/wiki/Operational_transformation –

我这个昨天已经看到了。你的问题到底是什么？你想知道如何用JavaScript锁定文本区域？我很困惑，为什么你在你的问题中强调node/socket.io。

另外，下次请格式化您的代码。你需要帮助，我明白了，但是让别人更容易帮助你。

为了让段落不能被别人编辑，你必须做些什么，我不知道。但让我建议我在socket.io中做什么：

分别存储每个段落并记住谁有锁。对于锁定，我会使用sessionID来防止用户不必注册。这看起来像这样：

var paragraphs = { 
    data : [ 
     { 
      text: "this is an unlocked paragraph", 
      lock: "" 
     }, 
     { 
      text: "this is a locked paragraph", 
      lock: "oWEALlLx5E-VejicAAAC" 
     } 
    ] 
}

现在，用户可能会被允许在现有的一个段落之前添加一个段落。因此，你应该保持一个额外的指标，如：

var paragraphs = { 
    index : [ 
     1, 
     0 
    ], 
    data : [ 
     { 
      text: "this the second paragraph", 
      lock: "oWEALlLx5E-VejicAAAC" 
     }, 
     { 
      text: "this is the first paragraph", 
      lock: "" 
     } 
    ] 
}

的数据量超过插座被送到现在应该是非常小 - altough与其他客户端/服务器端逻辑。

来源

2014-06-17 13:19:57 JanS

是的，它将格式化。写在匆忙。反正你用Quip。我想在我的应用程序中做同样的事情。如果有人正在写同一行，那么它非常忙碌，所以锁定对我很重要。 –

Nodejs＆Socket.io中的实时协作文本编辑器

回答

相关问题