peer js在实时删除文本

时间:2014-01-09 05:10:45

标签: peerjs

我创建了一个实时共享文本编辑器,允许人们编辑共享文档,以便用户在一端键入,另一端在另一端看到,但是当用户在一端删除时,它不会在另一端删除,我怎样才能解决这个问题,例如当用户删除另一端的文本时,另一端就删除了,到目前为止这里是我的代码

<!DOCTYPE HTML>
<html>
<head>
    <title> Live Text Sharing</title>
    <meta charset='UTF-8' name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <script type="text/javascript">
    var conn;
    var peer = new Peer({key: '5nyu3ci7jomq85mi'});
    peer.on('open', function (id){
        $('#pid').text(id);
    });

    peer.on('connection', connect);
    function connect(c){
        conn=c;
        $('#rid').val(conn.peer);
        $('#rid').prop('disabled', true);
        $('#progBar').width('100%');
        conn.on('data', function (data){
            $('#inputText').val($('#inputText').val()+data);
        });
    }
    $(document).ready(function(){
        $('#connect').click(function(){
            $('#progBar').width('100%');
            var c=peer.connect($('#rid').val());
            c.on('open', function(){
                connect(c);
            });
        });

        $('#inputText').keypress(function (e){

            var ev= e || window.event;
            var asciikey=ev.keyCode || ev.which;
            text= String.fromCharCode(asciikey);
            conn.send(text);

        });

    });

    </script>
    <h2 style='margin-left: 30%;'> Live Text Sharing</h2>
    Your peerJS id is : <span id='pid'></span><br><br>
    Connect to peer: <input type='text' id='rid' placeholder="someone else's id" >
        <input type='button' value="Connect" id="connect">
        <input type='button' value='Disconnect' id='disconnect'>
        <br>
        <br>

    <div class="progress progress-striped active" style='width: 25%;'>
      <div class="progress-bar progress-bar-success" id='progBar' style="width: 0%;">
        </div>
    </div>

    <textarea id='inputText' rows='30' style="width: 45%; margin-left: 20%;">

    </textarea>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

我认为问题可能是你发送角色本身。因此,当一个参与者按'a'时,另一个参与者收到'a'。但当第一个按删除时,第二个接收''.. !!可能你必须发送ASCII码并在收到不同的代码时以不同的方式处理它。

此外,我看到这不处理箭头键。因此,如果你想在文本中间添加smth,你就是不能......

希望这有点帮助......