Nodejs和Socket.io中的RealTime Collaborative Text-Editor

我正在开发一个类似于https://quip.com/的具有段落locking属性的实时文本编辑器。 在socket.ionodejs中

这意味着当您写入给定的段落时,其他协作者不能编辑它。

当你敲击input或移动光标到段落变成其他合作者 可编辑的新行。

在这之后我很困难。 我正在考虑一个很好的方法来进一步移动。 build议请。

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

的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); } 

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

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

为了使一个段落不能被别人编辑,你必须做些什么,我不知道。 但让我build议我在socket.io中做什么:

分开存储每个段落,并记住谁locking了它。 对于locking,我会使用会话ID来防止用户不必注册。 这看起来像这样:

 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: "" } ] } 

通过套接字发送的数据量现在应该非常小 – 尽pipe有额外的客户端/服务器端逻辑。

Interesting Posts