用于聊天的Ajax用户键入消息 [英] Ajax User Typing message for chat

问题描述

我正在努力让facebook风格的用户输入系统。但我有一个关于按键的问题。

I am trying to make a facebook style user typing system. But i have one question about keypress.

所以我的代码工作正常，但我想改变其他类似keypress，keyup，paste等。

So my code is working fine but i want to change something else like keypress, keyup, paste ect.

我正在使用以下javascript和ajax代码。在下面我的ajax代码就像 if（$ .trim（updateval）.length == 0）{send width notyping.php notyping.php post 0和0是不显示输入消息。

I am using following javascript and ajax codes. In the following my ajax code is working like if ($.trim(updateval).length == 0) { send width notyping.php notyping.php posting 0 and the 0 is don't show typing message.

如果 if（$ .trim（updateval）.length> 13）{send with usertyping.php usertyping.php发布1和1显示输入消息。

If if ($.trim(updateval).length > 13) { send with usertyping.php usertyping.php posting 1 and the 1 is show typing message.

问题在于如果用户被限制为wrire某些消息那么它是每次都打字打字。我应该怎么做才能解决这个问题呢？

The problem is here if user is stoped to wrire some message then it is everytime saying typing. What should I do to fix for it anyone can help me in this regard ?

所有的ajax和javascript代码都在这里：

All ajax and javascript code is here:

;
(function($) {
  $.fn.extend({
    donetyping: function(callback, timeout) {
      timeout = timeout || 1000; // 1 second default timeout
      var timeoutReference,
        doneTyping = function(el) {
          if (!timeoutReference) return;
          timeoutReference = null;
          callback.call(el);
        };
      return this.each(function(i, el) {
        var $el = $(el);
        // Chrome Fix (Use keyup over keypress to detect backspace)
        // thank you @palerdot
        $el.is(':input') && $el.is(':input') && $el.on('keyup keypress paste', function(e) {
          // This catches the backspace button in chrome, but also prevents
          // the event from triggering too premptively. Without this line,
          // using tab/shift+tab will make the focused element fire the callback.
          if (e.type == 'keypress' && e.keyCode != 8) return;

          // Check if timeout has been set. If it has, "reset" the clock and
          // start over again.
          if (timeoutReference) clearTimeout(timeoutReference);
          timeoutReference = setTimeout(function() {
            // if we made it here, our timeout has elapsed. Fire the
            // callback
            doneTyping(el);
          }, timeout);
        }).on('blur', function() {
          // If we can, fire the event since we're leaving the field
          doneTyping(el);
        });
      });
    }
  });
})(jQuery);

检查文本值是否为0然后发送数据为0表示用户没有打字

Checking text value if is 0 then send data is 0 for user no typing

$('#chattextarea').donetyping(function() {
  var typingval = $("#chattextarea").val();
  var tpy = $('#tpy').val();
  if ($.trim(typingval).length == 0) {
    $.ajax({
      type: "POST",
      url: "/notyping.php",
      data: {
        tpy: tpy
      },
      success: function(data) {

      }
    });
  } 

检查文本值> 13然后发送数据为1用于用户输入。（可能需要更改此if语句）

Checking text value is >13 then send data is 1 for user typing.(Maybe need to change this if statement)

if ($.trim(typingval).length > 13) {
    $.ajax({
      type: "POST",
      url: "/usertyping.php",
      data: {
        tpy: tpy
      },
      success: function(data) {

      }
    });
  }

});

检查并显示用户输入：

function getTyping(){
     setInterval(function(){
         var tpy = $('#tpy').val();
           $.ajax({
            type: "POST",
            url: "/getTyping.php",
            data: { tpy: tpy },
            success: function(data) {
               $('#s').html(data);
              }
             });
         },1000);
    }   
getTyping();

HTML

<textarea id="chattextarea"></textarea>
<div id="s"></div>

推荐答案

我对你的代码和应用有一些评论：

I have some remarks about your code and app :

• 首先，如@ rory-mccrossan所述，除非你拥有facebook，google或microsoft的基础设施，。 ..，我认为使用Ajax代替 Websockets 用于聊天等实时应用。

• At the first, and as mentioned by @rory-mccrossan, unless you have the infrastructure of facebook, google or microsoft, ..., I think it's really a bad idea to use Ajax instead of Websockets for a real time application like a chat.

现在关于你的代码，我不知道你的PHP脚本在幕后做了什么，但我认为你不需要发送两个请求来指示用户是否输入，你可以将其限制为一个请求发送当用户输入其他内容时，他肯定不会打字。当然，您可以在 getTyping.php 脚本中使用某种超时来限制键入状态的生命周期（例如5秒），因此如果在超时后发送请求，您可以知道您的用户没有输入。

Now about your code, I don't know what your PHP scripts are doing behind the scene, but I think that you don't need to send two requests to indicate that the user is typing or not, you can limit that to one request to be sent when the user is typing otherwise, he is surely not typing. Of course you can use some sort of a timeout in your getTyping.php script to limit the life time of a "typing" status (for example 5 seconds), so if a request is sent after that timeout, you can know that your user is not typing.

关于您当前的问题，我认为这是因为没有打字当textarea为空时，状态才被触发，所以当然，在停止写入后，当前文本的长度超过13，所以不打字状态永远不会被触发（发送），这就是你需要超时的原因正如我在第二点告诉你的那样......

And about your current problem, I think that's because the "not typing" status is just fired when the textarea is empty, so of course, after stopping writing and the length of the current text is more that 13, so the "not typing" status will never be fired (sent), that's why you need a timeout as I told you in the 2nd point ...

另外，使用获取状态时不要忘记缓存问题getTyping.php 脚本应该不可缓存（或至少在非常有限的时间内）...

Also, don't forget the cache problem when getting the status using the getTyping.php script which should be not cacheable (or at least for a very limited period) ...

然后，我在你发布的代码中没有看到任何识别当前用户的信息以及与他一起转换的信息......也许你还没有把它包含在任务中离子，我不知道！

Then, I don't see in your posted code any information(s) to identify the current user and the one which is converting with him ... maybe you haven't included that in the question, I don't know !

...

希望可以提供帮助。

这篇关于用于聊天的Ajax用户键入消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！