javascript – 用于聊天的Ajax用户键入消息

我正在尝试制作一个facebook风格的用户打字系统.但我有一个关于按键的问题.

所以我的代码工作正常,但我想改变其他东西,如按键,键盘,粘贴等.

我正在使用以下javascript和ajax代码.在下面我的ajax代码就像if($.trim(updateval).length == 0){send width notyping.PHP notyping.PHP post 0并且0不显示输入消息.

if if($.trim(updateval).length> 13){send with usertyping.PHP usertyping.PHP发布1和1显示输入消息.

问题出在这里,如果用户被限制为wrire某些消息,那么每次都在说输入.我该怎么做才能解决这个问题？在这方面,任何人都可以帮助我吗？

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

;
(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);

检查文本值if为0然后发送数据为0表示用户没有输入

$('#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语句)

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>

解决方法:

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

>首先,正如@ rory-mccrossan所提到的,除非你拥有facebook,google或microsoft,…的基础设施,我认为使用Ajax代替Websockets实时应用程序是一个不错的主意.聊天.
>现在关于你的代码,我不知道你的PHP脚本在幕后做了什么,但我认为你不需要发送两个请求来指示用户是否输入,你可以将其限制为一个请求在用户输入时发送,否则他肯定不会打字.当然,您可以在getTyping.PHP脚本中使用某种超时来限制“键入”状态的生命周期(例如5秒),因此如果在超时后发送请求,您可以知道您的用户不打字.
>关于你当前的问题,我认为这是因为当textarea为空时,“不打字”状态才被触发,所以当然,在停止写入后,当前文本的长度超过13,所以“不打字” “状态永远不会被解雇(发送),这就是为什么你需要超时,因为我在第二点告诉你…
>另外,使用getTyping.PHP脚本获取状态时不要忘记缓存问题,该脚本应该不可缓存(或者至少在非常有限的时间内)…
>然后,我在你发布的代码中没有看到任何识别当前用户的信息以及与他一起转换的信息…也许你没有在问题中包括那个,我不知道！

…

希望能有所帮助.

javascript – 用于聊天的Ajax用户键入消息

相关文章