我创建了一个实时共享文本编辑器,允许人们编辑共享文档,以便用户在一端键入,另一端在另一端看到,但是当用户在一端删除时,它不会在另一端删除,我怎样才能解决这个问题,例如当用户删除另一端的文本时,另一端就删除了,到目前为止这里是我的代码
<!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>
答案 0 :(得分:1)
我认为问题可能是你发送角色本身。因此,当一个参与者按'a'时,另一个参与者收到'a'。但当第一个按删除时,第二个接收''.. !!可能你必须发送ASCII码并在收到不同的代码时以不同的方式处理它。
此外,我看到这不处理箭头键。因此,如果你想在文本中间添加smth,你就是不能......
希望这有点帮助......