javascript - Long Polling: Why do some messages come in twice? -

javascript - Long Polling: Why do some messages come in twice? -

i'm building chat application log polling. prototype located here: http://chat.alexanderjank.de

on server side php used. think it's javascript issue, messages come in couple of times.

the javascript code used is:

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 = -1, index = -1; for(i = 0; < this.length; i++) { if(this[i] === needle) { index = i; break; } } homecoming index; }; } homecoming indexof.call(this, needle); }; function getnewposts(timestamp) { xhr = $.ajax({ url: 'chat.php', data: 'timestamp=' + timestamp, datatype: 'json', }) .done(function(data) { clearinterval( t ); // if there results or no results // in both cases start ajax request long polling after 1 sec if (data.message_content == 'results' || data.message_content == 'no-results') { t = settimeout(function() { getnewposts(data.timestamp); }, 1000); // if there results append post div if (data.message_content == 'results') { // loop through each post , output 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() { homecoming new date().gettime(); }; } panel.scrolltop(panel[0].scrollheight); // create ajax request server first time posts $.ajax({ async: false, url: 'chat.php?full_page_reload=1', type: 'get', datatype: 'json', }) .done(function(data) { // assign variable server timestamp // given 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 error!'); }); // when form 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 form values $('#sendmessage')[0].reset(); }) .fail(function() { // when there error alert('an error occured'); }); // prevent default action event.preventdefault(); }); // start actual long polling when dom ready getnewposts(servertimestamp); });

please help me solve problem.

one way ensure message won't appear twice check presence of message in dom using id, within loop function have:

$.each(data.posts, function(index, val) { if(!$('#message-'+val.id).length) { // add together message dom } });

if message in dom, not added again. see have id in response, pretty straight forwards that.

javascript php ajax chat long-polling