Nodejs & 中的实时协作文本编辑器Socket.io [英] RealTime Collaborative Text-Editor in Nodejs & Socket.io
问题描述
我正在开发具有类似于 https://quip 的段落锁定属性的实时文本编辑器.com/.在 socket.io 和 nodejs 中.
I am developing a real-time text editor with paragraph locking property similar to https://quip.com/. in socket.io and nodejs.
这意味着当您在给定的段落上书写时，其他合作者无法对其进行编辑.
It means when you write onto a given paragraph, other collaborators cant edit it.
当您按下 Enter 键或将光标移动到新行时，该段落对于其他协作者来说变得可编辑.
Moment you hit enter or move cursor to a new line that paragraph becomes Editable for other Collaborators.
在这之后我被困住了.我正在考虑一个不错的方法来进一步推进.请提出建议.
I am quite stuck after this. I am thinking a nice approach to move further. Suggestions please.
下面是我的代码，它完美运行.到目前为止，我可以获取所有协作者的列表并将编辑器的内容广播给其他协作者.
Below is my code which works perfectly. Till now i can get list of all collaborators and broadcast the content of editor to other collaborators.
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锁定"一个文本区域吗?我很困惑你为什么在你的问题中如此强调 node/socket.io.
I saw this yesterday already. What exactly is your question? Do you want to know how to 'lock' a text area with javascript? I am confused as to why you put such a strong emphasis on node/socket.io in your question.
另外，下次请格式化您的代码.你需要帮助，我明白，但要让别人更容易帮助你.
Also, next time please format your code. You want help, I get it, but then make it easier for others to help you.
我不知道您需要做什么才能使其他人无法编辑段落.但是让我建议我会在 socket.io 中做什么:
What you have to do in order to make a paragraph not editable by others, I don't know. But let me suggest what I'ld do in socket.io:
单独存储每个段落并记住谁锁定了它.对于锁定，如果用户不必注册，我将使用 sessionID.这看起来像这样:
Store each paragraph separately and remember who has a lock on it. For locking, I would use the sessionID in case users don't have to register. This would look something like this:
var paragraphs = {
data : [
{
text: "this is an unlocked paragraph",
lock: ""
},
{
text: "this is a locked paragraph",
lock: "oWEALlLx5E-VejicAAAC"
}
]
}
现在，用户可能会被允许在现有段落之前添加一个段落.因此，您应该保留一个额外的索引，例如:
Now, users will likely be allowed to add a paragraph before an existing one. Therefore you should keep an additional index like:
var paragraphs = {
index : [
1,
0
],
data : [
{
text: "this the second paragraph",
lock: "oWEALlLx5E-VejicAAAC"
},
{
text: "this is the first paragraph",
lock: ""
}
]
}
通过套接字发送的数据量现在应该非常小 - 尽管有额外的客户端/服务器端逻辑.
The amount of data being sent over the sockets should now be very small - altough with additional client/server-side logic.
这篇关于Nodejs & 中的实时协作文本编辑器Socket.io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
