Почему дублируются сообщения?

Question

[Diversia]

Делаю чат на PHP и JS. Каждые 10 сек. проверяю новые сообщения:

function chatLive() {
	var last = $('#chatLive .im:last').attr('id');

	if (last > 0) // все сообщения начиная с last
	{
		$.ajax({
			url: "/chat/ajax/live.php?last=" + last,
			type: "GET",
			success:function(data){
				$( "#chatLive" ).append(data);
				chatScroll();
				initMyScripts();
			}
		});
	}
	else // чат загружен первый раз - получаем 50 последних сообщений.
	{
		$.ajax({
			url: "/chat/ajax/live.php",
			type: "GET",
				success:function(data){
				$("#chatLive").html(data);
				chatScroll();
				initMyScripts();
			}
		});
	}

	$('#chatForm #loading').fadeOut(300);
}

$(document).ready(function() {
	chatLive();
	setInterval(function() {
		chatLive();
	}, 10000);
});

В PHP скрипте делаю select так:

$rsData = array_reverse($entityDataClass::getList([
    "select" => [
        "ID",
        "UF_DATE",
        "UF_MESSAGE",
        "UF_USER_NAME",
        "UF_USER_CREATED",
        "UF_USER_FOR",
        "UF_USERPIC"
    ],
    "filter" => [
    	"!UF_ACTIVE" => false,
        ">ID" => $last // id последнего сообщения
    ],
    "order" => ["ID" => "DESC"],
    "limit" => 50,
    "cache"=> ["ttl" => 360000],
])->fetchAll());

На ПК все хорошо, а в мобильных браузерах при выходе из ожидания (например, 10 мин. не пользоваться телефоном), открывая браузер (вкладка не закрывалась) появляется дубликаты сообщений (по несколько раз). Предполагаю что это из-за функции setInterval, которая скорее всего накапливается в мобильном, когда браузер/телефон спит, а потом срабатывает несколько раз. Может ошибаюсь, в JS не силен.

Подскажите пожалуйста, как решить проблему с дубликатами сообщений?

Comments

[Дмитрий Кузнецов]

соккеты лучший выбор для чата)

Answer 1

[coderisimo]

Простой способ пофиксить, как мне кажется, перед выводом проверять , если предыдущее сообщение и последующее одинаковы, то одно из них не попадет в чат.

оффтоп: Вообще, как раз для таких штук вебсокеты созданы. там setInterval не нужен.

Comments

[Diversia]

Василий, спасибо. С вебсокетами пока для меня сложно.
Пробовал на стороне php от дублей избавиться, понял что дело не в нем. Проблема происходит на стороне JS. Можете подскакать, как найти дубли в ответе data на примере моего кода?

[coderisimo]

Diversia,
я не знаю точно, что вы получаете с сервера , но, общая идея :

//   вам нужно получить текст последнего сообщения, возможно вот так
 var lastMessage = $('#chatLive .im:last').html();

далее все новое , что вы получаете с сервера, сравниваете с этим последним сообщением, если совпадает, то не добавляете. Все, что идет после совпадающей строки (т.е новый текст) -добавляется в чат.
Например, если с сервера приходит одна строка разделенная переносами на новую строку, разбиваете все на массив - разделитель - перенос на новую строку. И все что идет после элемента, который был последним в предыдущей версии чата можно добавлять.

Если сообщения хранятся в базе, то , имхо, более логично присылать с сервера массив объектов, где будут
id и текст. Тогда будет еще проще отслеживать Id сообщений уже опубликованных и обновлять чат с сообщений следующих за уже использованным id.

[Diversia]

Василий, попробовал сделать проверку на имеющиеся сообщение со стороны JS и все равно результат тот же... Хз из-за дубли появляется после пробуждения телефона.

[coderisimo]

Diversia, мне кажется можно сделать проще. общая идея - запретить кучу запросов в один момент времени. для начала можно попробовать вот так.

// здесь сохраняем состояние запроса получения данных.  запущен он или нет.
let  gettingData = false;

function chatLive() {
  var last = $('#chatLive .im:last').attr('id');

  if (last > 0 && !gettingData) // все сообщения начиная с last
  {

gettingData = true; // пока данный запрос не закончится, другие не смогу запуститься.
    $.ajax({
      url: "/chat/ajax/live.php?last=" + last,
      type: "GET",
      success:function(data){
        $( "#chatLive" ).append(data);
        chatScroll();
       gettingData = false; // запрос совершен, можно разрешать последующие запросы.
        initMyScripts();
      }
    });
  }
  else // чат загружен первый раз - получаем 50 последних сообщений.
  {
    $.ajax({
      url: "/chat/ajax/live.php",
      type: "GET",
        success:function(data){
        $("#chatLive").html(data);
        chatScroll();
        initMyScripts();
      }
    });
  }

  $('#chatForm #loading').fadeOut(300);
}

$(document).ready(function() {
  chatLive();
  setInterval(function() {
    chatLive();
  }, 10000);
});

[Diversia]

Василий, элементарное решение, но помогло! Низкий Вам поклон и спасибо!

[Diversia]

Василий, появилась другая проблема... после пробуждения мобильного начал отрабатывать второй $.ajax, вместо первого.

[coderisimo]

Diversia, логично ))

function chatLive() {
  var last = $('#chatLive .im:last').attr('id');

  if (last > 0) // отсюда убираем
  {
 
if(gettingData)  // сюда добавляем
    return;