Question

我正在开发一个实时文本编辑器，其段落锁定属性类似于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);
}

Answer 1

我昨天已经看到了。你究竟是什么问题？你想知道如何使用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: ""
        }
    ]
}

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

Answer 2

通过将类添加到当前编辑的段落中，可以轻松实现段落锁定。将此段落与类一起转让给其他用户。这样一来，如果用户尝试覆盖该类，则可以通过与该类进行验证来阻止他进行操作。

生成一个类名-className_userid（className_1）。

Nodejs中的RealTime协作文本编辑器＆amp; Socket.io

2 个答案: