1

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

这意味着当您在给定的段落上写字时，其他合作者无法对其进行编辑。

在您按下回车键或将光标移动到新行的那一刻，该段落将变为Editable for other Collaborators。

在这之后我很困惑。我正在考虑一个很好的方法来进一步发展。请提出建议。

下面是我的代码，它工作得很好。到目前为止，我可以获取所有合作者的列表并将编辑器的内容广播给其他合作者。

索引.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>

服务器.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);
}
4

2 回答 2

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

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

于 2014-06-17T13:19:57.750 回答
0

通过给当前正在编辑的段落添加一个类，可以很容易地实现段落锁定。将此段落与班级一起转移给其他用户。因此，如果用户试图通过类验证来阻止他重写。

生成一个类名的样子——className_userid(className_1)。

于 2018-10-05T08:46:32.827 回答