これが私のシナリオです：
- ユーザーが新しいメッセージを送信するたびに、リクエストがサーバーに保存している間、プレビューとして会話スレッドに追加しています。
HTTP POST - 一定の間隔で、 を使用
setIntervalして、会話内の新しいメッセージをチェックしています。 - 新しいメッセージが返された場合は、メッセージのプレビュー バージョンを削除し、データベースから新しいメッセージを追加します。
これは、チャット コンテンツを生成するスクリプトです。
function refresh_chat(){
var last = $('.conversation li:not(.fake):last').data('id');
$.post('includes/router.php', {
task: 'update_conversation',
id: '<?=$_GET['conversationid']?>',
last: last
}, function (data, response) {
var recibidas = $(data).find('li');
/* IF there are new entries */
if (recibidas.length > 0) {
/* Remove all fake entries */
$('.conversation li.fake').remove();
/* Append new entries */
$('.conversation').append($(data).filter('.notifications').html());
/* If this new entries are not unread,
remove the unread to the previous ones*/
if(!$(data).find('li:last').hasClass('unread')) {
$('.conversation li.unread').removeClass('unread');
}
}
});
}
var t = setInterval(function () {
refresh_chat();
}, 3000);
これは、ユーザーが入力したときに新しいエントリを追加する方法です。
$('body').on('submit', '.send_message_form_conversation', function(e) {
e.preventDefault();
var id_to = $(this).find('#id_to').val();
var msj = $(this).find('#msj').val();
if (msj.length >= 2) {
$(this).find('#msj').val('');
$(this).find('.nicEdit-main').html('');
//alert(id_to);
$('.conversation').append(
'<li class="unread fake">' +
'<div class="avatar">' +
'<a href="index.php?userid=<?=sesion()?>">' +
'<img alt="" src="<?=$_SESSION['avatar']?>">' +
'</a>' +
'</div>' +
'<div class="txt">' +
'<a class="userName" href="index.php?userid=<?=sesion()?>">' +
'<?=$_SESSION['alias']?> -- ' +
'<span class="date">' +
"<?=get_texto_clave('ahora mismo')?>" +
'</span>' +
'</a>
'<span class="msj">' + msj + '</span>' +
'</div>' +
'<span data-id="47" class="close">X</span>' +
'</li>');
$.post('includes/msj.php?', {
task : 'post_message',
id_to : id_to,
msj : msj
}, function (data, response) {
$(".conversation").scrollTop($(".conversation")[0].scrollHeight);
});
} else {
$(this).parent().effect("shake", { times:0, distance: 3 }, 200);
}
});
ご覧のとおり、<li>アイテムには 2 つのクラスがあります: .fake(これは、このアイテムがユーザーが送信したばかりのプレビューであり、js によって追加された.unreadことを意味します) または (受信者がメッセージを受信したばかりであることを意味します)
私が苦労しているのは、重複したエントリが表示されることがあることです (ただし、表示されるだけで、データベースでは重複していません)。私の間隔に何か問題があると思いますか？
何が原因でしょうか? （ずっと読んでいるのですが、変なところが見当たりません…）
PD: 基本的に、いくつかのメッセージが複数回表示されています:S
-編集-
$q = "SELECT * FROM pms " .
"WHERE ((id_to = $id and id_from = " . sesion() . ") OR " .
" (id_from = $id and id_to = " . sesion() . ")) " .
"AND (id > $from) " .
"ORDER by fecha ASC " . $limit;
このクエリは、JavaScript パラメータの最後の$.post()リクエストで使用されるものです (これは$from、ユーザーに表示される最後のメッセージを表します)。