我正在尝试制作一个facebook风格的用户打字系统。但我有一个关于按键的问题。
所以我的代码运行得很好,但我想更改一些其他东西,比如keypress、keyup、paste等等。
我正在使用以下javascript和ajax代码。在下面的代码中,我的ajax代码的工作方式类似于if ($.trim(updateval).length == 0) { send width notyping.php
notyping.php发布0,而0是不显示键入消息。
如果if ($.trim(updateval).length > 13) { send with usertyping.php
usertypeing.php发布1,则1显示正在键入消息。
问题是,如果用户停下来写一些消息,那么它每次都在说打字。我该怎么办?在这方面,任何人都可以帮助我?
所有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);
检查文本值,如果为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、谷歌或微软的基础设施。。。,对于聊天之类的实时应用程序,我认为使用Ajax而不是
Websockets
确实是个坏主意。 -
现在关于你的代码,我不知道你的PHP脚本在幕后做什么,但我认为你不需要发送两个请求来表明用户是否在打字,你可以限制在用户打字时发送一个请求,否则,他肯定不会打字。当然,您可以在
getTyping.php
脚本中使用某种超时来限制"正在键入"状态的生存时间(例如5秒),因此,如果在该超时之后发送请求,您可以知道您的用户没有在键入。 -
关于你目前的问题,我认为这是因为"不打字"状态只是在文本区域为空时触发的,所以当然,在停止写作后,当前文本的长度超过13,所以"不打字"状态永远不会被触发(发送),这就是为什么你需要暂停,就像我在第二点告诉你的那样。。。
-
此外,当使用
getTyping.php
脚本获取状态时,不要忘记缓存问题,该脚本应该是不可缓存的(或者至少在非常有限的时间内)。。。 -
然后,我在你发布的代码中看不到任何信息来识别当前用户和与他一起转换的用户。。。也许你没有把它包括在问题中,我不知道!
希望这能有所帮助。
我在这里建议使用外部setInterval,它将每3秒将当前文本保存在oldValue变量中,并将currentText与oldValue进行比较。如果它们相等,则用户停止写入,然后将ajax发送到notyping.php
您的更新代码如下所示我创建了一个getTyping函数,如果用户开始打字,它将每隔1秒调用一次。
在getGetTyping setinterval函数中,我调用了一个函数check_which_function。
在函数check_which_funciton中,我通过对嵌套if-else语句中的textarea值长度应用条件来使用您的代码,所以现在
如果用户开始键入,但如果内容长度=0而不是
$.trim(typeingval).length==0将执行,直到长度不等于12
如果内容长度比大等于13
$.trim(typeingval).length>13将执行
默认情况下,getTyping2()函数在此函数中执行getTyping.php ajax调用正在进行
<script>
(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);
function getTyping2() {
var tpy = $('#tpy').val();
$.ajax({
type: "POST",
url: "/getTyping.php",
data: {tpy: tpy},
success: function (data) {
$('#s').html(data);
}
});
}
function check_which_action() {
$('#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) {
}
});
}
else if ($.trim(typingval).length > 13) {
$.ajax({
type: "POST",
url: "/usertyping.php",
data: {
tpy: tpy
},
success: function (data) {
}
});
}
else {
getTyping2() ;
}
});
}
function getTyping() {
setInterval(check_which_action, 1000);
}
getTyping();
</script>
<textarea id="chattextarea"></textarea>
<div id="s"></div>