ajax聊天中的“用户正在键入”功能

j13ufse2 于 2021-06-17 发布在 Mysql

关注(0)|答案(4)|浏览(368)

我试图在聊天中添加一个“用户正在键入”功能；用php+mysql/ajax编写的聊天。
工作原理：
-当我的聊天伙伴x开始键入时，我在聊天框中看到：“x正在键入”
-当我（名为y）打字时，他在他的聊天框中看到：“y正在打字”（就像yahoo messenger一样）。
到目前为止我试过的代码：

<script type="text/javascript" language="javascript">
    var timer = 0;

    function reduceTimer() {
        timer = timer - 1;
        isTyping(true);
    }

    function isTyping(val) {
        if (val == 'true') {
            document.getElementById('typing_on').innerHTML = "User is typing...";
        } else {

            if (timer <= 0) {
                document.getElementById('typing_on').innerHTML = "No one is typing -blank space.";
            } else {
                setTimeout("reduceTimer();", 500);
            }
        }
    }
</script>

<label>
    <textarea onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on">No one is typing -blank speace.</div>

问题：
如果我停下来想几秒钟我的拼写，它看起来像我已经停止打字。有没有更相关、更简单的方法来设置这个函数？是否有可能的代码：
文本框不为空（用户按任意键开始键入）->消息：用户正在键入。
文本框为空->消息：用户未键入。
文本框不为空，但用户已超过5秒未按任何键->消息：用户未键入。
它向我自己表明我在打字；我如何实现它或者在哪里，为了在我的聊天框中看到“x用户正在键入”而不是“我自己正在键入”。对于其他用户也是一样，他应该得到一条关于我输入/不输入的消息，而不是关于他自己的消息。
谢谢您。

ajax chat

来源：https://stackoverflow.com/questions/53538238/how-to-get-opposite-users-typing-information-in-1-to-1-chat-using-php-jqu

4条答案

按热度按时间

wpx232ag1#

您可以使用jquery来处理keypress事件，而不是html。你可以试试这样的。然后设置默认的#在div上键入，因为用户没有键入。

//EXECUTES WHEN KEY IS PRESSED IN SPECIFIED ELEMENT
$("#textarea").keypress(function(){
numMiliseconds = 500;

//THIS IF STATEMENT EXECUTES IF USER CTRL-A DELETES THE TEXT BOX
if ($("textarea") == ""){
    $("#typing_on").text("User has cleared the text box");
}

$("#typing_on").text("User is typing").delay(numMiliseconds).queue(function(){
    $("#typing_on").text("User has stopped typing");
    }
});

赞(0）回复(0）举报 2021-06-18

55ooxyrt2#

<script>
        function isTyping() {
                document.getElementById('typing_on').innerHTML = "User is typing...! "; }

        function  notTyping (){
       document.getElementById('typing_on').innerHTML = "No one is typing ! "; }
    </script>

    <label>
        <textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)"  name="textarea" id="textarea" cols="45" rows="5"></textarea>
    </label>
    <div id="typing_on">No one is typing -blank speace.</div> 

     <!DOCTYPE html>
    <html>
       <head>
       </head>
       <body>

      <script>
        function isTyping() {
                document.getElementById('typing_on').innerHTML = "User is typing...! "; }

        function  notTyping (){
       document.getElementById('typing_on').innerHTML = "No one is typing ! "; }
    </script>

    <label>
        <textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)"  name="textarea" id="textarea" cols="45" rows="5"></textarea>
    </label>
    <div id="typing_on">No one is typing -blank speace.</div> 
       </body>
    </html>

赞(0）回复(0）举报 2021-06-18

jchrr9hc3#

我做了一把小提琴，可能对你有帮助。其思想是使用javascript刷新活动消息 setInterval 功能。

var textarea = $('#textarea');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
    if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
        typingStatus.html('No one is typing -blank space.');
    } else {
        typingStatus.html('User is typing...');
    }
}
function updateLastTypedTime() {
    lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);

赞(0）回复(0）举报 2021-06-18

w80xi6nr4#

有一个漂亮的库插件叫做underline.js
在它的许多有用函数中，有一个叫做216;.debounce的函数，可以像这样用来跟踪输入：

var typing, typingStarted, typingStopped;

typing = false;

typingStopped = _.debounce((function() {
  if (!typing) {
    return;
  }
  typing = false;
  console.log('typing is done so do what ever you need to do to notify it');
}), 5000);

typingStarted = function() {
  if (this.typing) {
    return;
  }
  typing = true;
  console.log('typing has started so do what ever you need to do to notify it');
};

document.querySelector("textarea").oninput = function(event) {
  typingStarted();
  typingStopped();
  return
};

其工作方式是在输入文本区域时调用typingstarted，并将typing设置为true，以防止再次调用它。然后调用typingstopped，但只会在5000毫秒后调用 Package 在u.debounce中的函数，该函数作为u.debounce的第二个参数。但是，如果您再次调用typingstopped，它会将倒计时从原来的位置重置回5000毫秒。因为每次输入都会调用typingstopped，所以它只会在两次按键之间整整5秒钟后执行typing=false。

赞(0）回复(0）举报 2021-06-17

我来回答

ajax聊天中的“用户正在键入”功能

4条答案

相关问题

热门标签

最新问答