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中的實時協作文本編輯器

回答

相關問題