两个用户通过 websocket 编辑输入时出现问题

Issue with editing input via websockets by two users

本文关键字：输入 编辑 问题 websocket 两个 用户      更新时间：2023-09-26

我试图实现使用 socket.io
与两个用户使用相同的输入字段的功能想法看起来像这样：

  1. 用户输入数据
  2. 数据进入后端
  3. 跨所有连接的客户端的后端广播数据

但是当我尝试输入单个字符时 - 整个输入值不知何故被设置为 "（字面意思是没有）也许我应该以另一种方式处理数据流？

客户端代码，用于将数据发送到后端并在响应时获取数据： 

    $('input').keydown(function(){
       socket.emit('chat message', $('input').val());
       console.log($('input').val());
       return false;
    });
    socket.on('chat message', function(msg){
      $('input').val(msg);
    });

仅用于在所有连接的客户端之间广播数据的后端代码： 

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

GitHub 存储库链接：https://github.com/eko24/websocket-input

触发

keydown事件时，<input>标记的值尚未更改，因此您看不到刚刚按下的键的效果。

相反，您可以使用"input"事件，该事件表示用户何时更改了<input>值：

$("input").on("input", function(e) {
    log($("input").val());
});
function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input>

相关文章：