JavaScript — длинный опрос PHP возвращает 2 результата вместо одного

Я знаю, что это не дает точного ответа на ваш вопрос, но то, что вы делаете, все равно не сработает — длительный опрос с помощью PHP приведет к сбою на вашем сервере, когда будет хотя бы еще несколько пользователей. Ты используешь sleepИтак, процесс PHP «зависает». Количество работников PHP (как для Apache, nginx, так и для любого сервера с PHP) ограничено. Как только вы достигнете этого значения, новые подключения будут отклонены. PHP предназначен для быстрого реагирования.

Для этого типа решения я бы предложил использовать промежуточное программное обеспечение, которое предназначено для него. Например, взгляните на Socket.IO.

Он написан на Javascript и предназначен как для клиентской части (библиотека JS), так и для серверной части (Node.js). Ваш сервер Node.js может принимать события в том виде, как они происходят, из PHP с использованием REST API, очередей (например, ZeroMQ, RabbitMQ и т. Д.) Или любого другого транспорта, например Сам клиент socket.IO. Таким образом, вы не опрашиваете свою базу данных в PHP, вы просто передаете эту новую запись, добавленную на сервер Node.js, который передает эту информацию в ваш JS-код на стороне клиента.

$pdo->prepare('INSERT INTO ..')->execute();
$dispatcher->dispatch('new_post', new PostEvent(array('id' => 123, 'text' => 'Post text')));

Длинный опрос — это только один из поддерживаемых протоколов Socket.IO, и он далеко не самый эффективный.

Если вы хотите избежать Node.js, вы можете попробовать ReactPHP с Ratchet, используя WebSockets на стороне клиента. Это работает как отдельный процесс php (запускается из командной строки), таким образом, не apache-way.

Вы можете использовать это:

$pdo->prepare('INSERT INTO ..')->execute();
$dispatcher->dispatch('new_post', new PostEvent(array('id' => 123, 'text' => 'Post text')));

Я думаю, что здесь есть ненужный код. Все, что вам нужно, это.
Определить 2 части.
1- это ваша форма.
2- Является ли ваше сообщение просмотра.

Итак, при первой загрузке формы перейдите к информации о получении базы данных (это может быть как JSON) и заполните ваш viwer.
Для этого внутри ajax done, конвертируем php JSON в массив, создаем цикл.
Для каждого элемента используйте append jquery, чтобы добавить каждый пост. http://api.jquery.com/append/

Сделайте то же самое для вечера на клике (отправить).
Вы должны очистить htm контент, прежде чем заполнять ваши новые сообщения.

Как вы указали в своих комментариях, имеется много избыточного кода, что затрудняет диагностику проблемы. Стоит привести в порядок, чтобы другие люди, читающие код, были в лучшем положении для диагностики проблемы.

Изучив код, я вижу, что это происходит.

1. Функции Dom Ready запускают ajax-запрос для полной загрузки
2. Функция Dom Ready запускает getNewPosts() со временем сервера по умолчанию
3. Возврат полной загрузки AJAX
4. getNewPosts() возвращается

Вы можете проверить этот заказ, добавив console.log() Команды к различным функциям. Точный порядок может варьироваться в зависимости от того, как быстро сервер отвечает. Тем не менее, основная проблема заключается в том, что serverTimestamp значение не устанавливается при запуске шага 2.

Разрешение достаточно простое, serverTimestamp переменная должна быть правильно установлена. Для этого передвиньте getNewPosts() вызов функции к .done() обработчик для полной загрузки ajax-запроса. В этот момент сервер вернул начальное значение метки времени, которое можно использовать для дальнейшего опроса.

// Create an AJAX request to the server for the first time to get the posts
$.ajax({
async: false,
url: 'stream.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;
$.each(data.posts, function(index, val) {
$("<div class='post'>" + val.post_content + "<div class='post_datePosted'>"+ val.posted_date +"</div>" + "</div>").prependTo('.posts');
});

// Start the long poll loop
getNewPosts(serverTimestamp);
})

Вы устанавливаете тайм-аут как:

setTimeout()

но вы используете

clearInterval()

чтобы очистить это, используйте clearTimeout() вместо.

На вкладке вашей сети, если вы воспроизводите проблему, проверьте запрос, в котором дважды указана запись, и просмотрите продолжительность, и вы увидите, что ответ занял более 1 секунды, что является тайм-аутом «1000» в вашем javascript, поэтому я не вижу необходимости использовать этот тайм-аут.

Все запросы, которые работали нормально и показывали запись только один раз, должны были получить ответ сервера как раз перед «1000» (1 секунда). Вы можете проверить это на вкладке сети, наведя указатель на атрибут временной шкалы:

Или нажав на конкретный запрос и перейдя на вкладку «Время»:

Итак, на основе вашего кода ниже приведен сценарий, который приводит к отображению записи дважды:

1. запрос ajax
2. ответ сервера превышает 1 секунду
3. Таймер JavaScript повторно запускает тот же запрос.
4. Сервер отвечает на запрос (1), JavaScript останавливает таймер.
5. сервер отвечает на запрос (2)

Сейчас я не могу проверить это, но самые большие проблемы, которые я вижу, это

1. область, в которой вы определяете свою интервальную переменную t
2. как вы передаете метку времени
3. момент времени, когда вы устанавливаете и очищаете свой интервал
4. ваше непоследовательное использование setTimeout а также clearInterval

Я собираюсь написать сокращенный код, главным образом, чтобы сохранить его концептуальным. Самый большой комментарий, который я могу сделать, это не использовать интервалы, поскольку вызов AJAX может занять больше времени, чем ваш интервал. Вы просто устанавливаете новый таймаут каждый раз, когда Ajax завершается.

// create a closure around everything
(function() {
var timer,
lastTimeStamp = <?php echo some_timestamp; ?>;

function getNewPosts() {
if(timer) clearTimeout(timer);

$.ajax({
data: lastTimeStamp
// other values here
})
.done(function() {
if( there_is_data ) {
lastTimeStamp = data.timestamp;
// render your data here
}
})
.always(function() {
timer = setTimeout(getNewPosts, 1000);
});
}

$(document).ready(function() {
// don't do your first ajax call, just let getNewPosts do it below

// define your form submit code here

getNewPosts();
});
}());