Question

我目前正在使用日志轮询构建聊天应用程序。原型位于：http://chat.alexanderjank.de

在服务器端使用PHP。但我认为这是一个javascript问题，有些消息有几次出现。

使用的javascript代码是：

var t;
var xhr;
var ids = [];
var panel = $('#posts-panel');

var indexOf = function(needle) {
    if(typeof Array.prototype.indexOf === 'function') {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function(needle) {
            var i = -1, index = -1;

            for(i = 0; i < this.length; i++) {
                if(this[i] === needle) {
                    index = i;
                    break;
                }
            }

            return index;
        };
    }

    return indexOf.call(this, needle);
};

function getNewPosts(timestamp) {
  xhr = $.ajax({
    url: 'chat.php',
    data: 'timestamp=' + timestamp,
    dataType: 'JSON',
})
  .done(function(data) {
    clearInterval( t );
    // If there was results or no results
    // In both cases we start another AJAX request for long polling after 1 second
    if (data.message_content == 'results' || data.message_content == 'no-results') {
        t = setTimeout(function() { getNewPosts(data.timestamp); }, 1000);
        // If there was results we will append it to the post div
        if (data.message_content ==  'results') {
            // Loop through each post and output it to the screen
            $.each(data.posts, function(index, val) {
               if(indexOf.call(ids, val.msg_id) == '-1') {
                    ids.push(val.msg_id);
                    $('<li class="media"><div class="media-body"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle " src="assets/img/user.png" /></a><div class="media-body" >'+val.message_body+'<br /><small class="text-muted">Alex Deo | '+ val.posted_time +'</small><hr /></div></div></div></li>').appendTo('.posts');
                    panel.scrollTop(panel[0].scrollHeight);
                }
            });
        }
    }
});
}

$(document).ready(function(){

    $(function() {
        $('#posts-panel').jScrollPane({
        horizontalGutter:5,
        verticalGutter:5,
        'showArrows': false
        });
    });

    $('.jspDrag').hide();
    $('.jspScrollable').mouseenter(function(){
        $(this).find('.jspDrag').stop(true, true).fadeIn('slow');
    });
    $('.jspScrollable').mouseleave(function(){
        $(this).find('.jspDrag').stop(true, true).fadeOut('slow');
    });


    if (!Date.now) {
        Date.now = function() { return new Date().getTime(); };
    }

    panel.scrollTop(panel[0].scrollHeight);

    // Create an AJAX request to the server for the first time to get the posts
    $.ajax({
        async: false,
        url: 'chat.php?full_page_reload=1',
        type: 'GET',
        dataType: 'JSON',
    })
    .done(function(data) {
        // Assign the this variable to the server timestamp
        // that was given by the PHP script
        serverTimestamp = data.timestamp;
        if(data.posts != 'nothing') {
             $.each(data.posts, function(index, val) {
                    ids.push(val.msg_id);
                    $('<li class="media"><div class="media-body"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle " src="assets/img/user.png" /></a><div class="media-body" >'+val.message_body+'<br /><small class="text-muted">Alex Deo | '+ val.posted_time +'</small><hr /></div></div></div></li>').appendTo('.posts');
                    panel.scrollTop(panel[0].scrollHeight);
            });
        }
    })
    .fail(function() {
        alert('There was an error!');
    });
    // When the form is submitted
    $('#sendMessage').on('submit', function(event) {
        // xhr.abort();
        $.ajax({
            url: 'chat.php?post=1',
            type: 'POST',
            dataType: 'JSON',
            data: $('#sendMessage').serialize()
        })
        .done(function(data) {
            // Reset the form values
            $('#sendMessage')[0].reset();
        })
        .fail(function() {
            // When there was an error
            alert('An error occured');
        });
        // Prevent the default action
        event.preventDefault();
    });
    // Start the actual long polling when DOM is ready
    getNewPosts(serverTimestamp);
});

请帮我解决这个问题。

Answer 1

确保消息不会出现两次的一种方法是使用ID在您已有的循环函数中检查DOM中是否存在该消息：

$.each(data.posts, function(index, val) {
    if(!$('#message-'+val.id).length) {
        // Add message to the DOM
    }
});

如果消息已经在DOM中，则不会再次添加。我看到你在回复中已经有了一个ID，所以这样做会非常直接。

长轮询：为什么有些消息会出现两次？

1 个答案: