【问题标题】:How to stop 'is typing' function when user sends message用户发送消息时如何停止“正在输入”功能
【发布时间】:2017-09-18 08:55:56
【问题描述】:

当用户按 Enter 键时,我的“用户正在输入”功能不会删除“正在输入”。因此,即使用户发送消息,“正在输入”仍会显示,直到计时器用完。

有什么想法吗?

这是我的代码:

客户端

// Detect typing

      function timeoutFunction() {  
        typing = false;
        socket.emit("typing", false);
        socket.emit("notTyping", true)
      }

      $("#msg").keypress(function(e){
        if (e.which !== 13) {
          if (typing === false && $("#msg").is(":focus")) {
          typing = true;
          socket.emit("typing", true);
          } else {
              clearTimeout(timeout);
              timeout = setTimeout(timeoutFunction, 1500);
            }
        }
        else if(e.which == 13 && $("#msg").val() !== "") {
          $("#"+data.person+"").remove();
        }
      });

      socket.on("isTyping", function(data) {  
        if (data.isTyping) {
          if ($("#"+data.person+"").length === 0) {
            socket.emit("checkTypingFunction");
            $("#chat").append("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>");
            timeout = setTimeout(timeoutFunction, 1500);
          }
        } else {
           $("#"+data.person+"").remove();
          }
      });

服务器端:

client.on("typing", function(data) {  
    if (typeof people[client.id] !== "undefined")
    socket.sockets.in(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name});
    client.broadcast.to(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name});
console.log("Someone is typing");
});

【问题讨论】:

  • 我会保持一个定义的持续时间,如果用户没有输入(keyup)那么长时间,调用"notTyping"
  • 已经可以了。当用户按回车(发送消息)时,我需要停止该功能
  • 当用户按 Enter 键时,您没有处理案例。
  • 这仍然没有考虑到“按回车键”。请在我的问题中查看我发布的代码。一段时间后删除“正在输入”没有问题

标签: javascript jquery node.js sockets socket.io


【解决方案1】:

您只是错过了用户按 Enter 键的情况。您需要添加到您的 if 声明中。

$("#msg").keypress(function (e) {
    if (e.which !== 13) {
        typing = true; // we know the user is typing because they have pressed a key but not 'Enter'
        socket.emit("typing", true);
        clearTimeout(timeout);
        timeout = setTimeout(timeoutFunction, 1500);
    } else {
        clearTimeout(timeout); // no need to fire the timeoutFunction twice (as we do it on the next line)
        timeoutFunction(); // probably needs a better name but this will immediately send the necessary `socket.emit('typing', false)` when the enter key is pressed
    }
});

【讨论】:

  • clearTimeout(timeout); 在这两种情况下都存在,为什么要重复呢?
  • @Rayon 我添加了一些 cmets,希望有助于更好地解释它。您也可以将其完全置于 if 语句之外,例如:if (timeout) { clearTimeout(timeout) }。这可能会超过if 块,它的工作原理是一样的。
  • 查看我的问题中的更新代码。 Enter 的代码不起作用
  • @JonasSH 您仍然没有将事件发送到服务器。按键功能是否在其范围内具有data?我对这段代码是/应该如何工作感到困惑。问题是输入的用户仍然看到他们正在输入,房间中的其他人看到用户仍在输入的消息,还是两者兼而有之?
  • 抱歉,sockets 和 node.js 对我来说是全新的。我需要它像这样工作:1. $("#msg").keypress(function(e) {} 将事件发送到服务器(“打字”)。2. 服务器“打字”将事件发送到客户端的“isTyping”..所有这些工作都很好。但我不知道如何以及在哪里添加代码,这将考虑到“点击”输入
猜你喜欢
  • 2011-05-24
  • 2015-06-13
  • 1970-01-01
  • 1970-01-01
  • 2012-04-24
  • 1970-01-01
  • 1970-01-01
  • 2016-10-28
  • 2015-06-18
相关资源
最近更新 更多