两个用户通过 websockets 编辑输入的问题答案

【问题标题】：Issue with editing input via websockets by two users两个用户通过 websockets 编辑输入的问题
【发布时间】：2016-03-18 15:12:40
【问题描述】：

我正在尝试使用 socket.io 实现与两个用户一起使用相同输入字段的功能
想法是这样的：

用户输入数据
数据进入后端
所有连接客户端的后端广播数据

但是当我尝试输入单个字符时 - 整个输入值以某种方式设置为“”（字面上什么都没有）也许我应该以另一种方式处理数据流？

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

    $('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 在值改变之前触发
必须将相关代码粘贴到您的问题中，而不仅仅是在外部链接中可用。这是一个堆栈溢出策略。
@jfriend00，对不起。

标签： javascript node.js websocket socket.io

【解决方案1】：

keydown 事件触发时，<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>

【讨论】：