RealTime Совместный текстовый редактор в Nodejs & Socket.io
Я занимаюсь разработкой текстового редактора в режиме реального времени со свойством блокировки абзацев, похожим на https://quip.com/. в socket.io и nodejs.
Это означает, что когда вы пишете в данный абзац, другие соавторы не могут редактировать его.
В тот момент, когда вы нажимаете клавишу ввода или перемещаете курсор на новую строку, абзац становится редактируемым для других сотрудников.
Я застрял после этого. Я думаю, хороший подход, чтобы двигаться дальше. Предложения, пожалуйста.
Ниже мой код, который работает отлично. До сих пор я могу получить список всех соавторов и передать содержимое редактора другим соавторам.
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);
}
2 ответа
Я видел это уже вчера. Что именно ваш вопрос? Вы хотите знать, как "заблокировать" текстовую область с помощью 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: ""
}
]
}
Объем данных, отправляемых через сокеты, теперь должен быть очень небольшим - хотя и с дополнительной логикой на стороне клиента / сервера.
Блокировка абзаца может быть легко достигнута путем добавления класса в текущий редактируемый абзац. Передайте этот абзац вместе с классом другому пользователю. так что, если пользователь пытается перезаписать, помешайте ему проверить с помощью класса.
Создайте имя класса, похожее на: className_userid (className_1).