javascript — сервер отправил события с PHP, не отображающим данные правильно

Question

javascript — сервер отправил события с PHP, не отображающим данные правильно

Я пытаюсь создать самое простое приложение для чата, используя сообщения ajax, и пытаюсь отправить данные с помощью SSE. Я только что наткнулся на SSE и попробовал свои силы на этом. Теперь проблема в том,

Как я могу контролировать, когда Сервер отправляет данные, поскольку он отправляет данные каждые 3 секунды.
Почему, когда я выбираю всю строку MySQL, показывая только последнюю строку в моем браузере, но нажимая все (проверено на вкладке сети)

Вот мой код:

index.html

<script>

var source = new EventSource("server.php");

source.addEventListener("message", function(event){

$("#box").html(event.data);

});

</script>

<script type="text/javascript">

function chat_pressed(){

var chat = $('#chat_text').val();

var data = {action : "send_chat", chat : chat};

$.ajax({
type : "POST",
url : "chat.php",
data : data,
success : function(r){
$('#chat_text').val("");
}

})}

</script>

<input type="text" id="chat_text" />
<input type="button" onClick="chat_pressed();"  value="POST"/>
<br /><hr />
<div id="box"></div>

server.php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

include("connect.php");$sql = $db->prepare("SELECT * FROM chat");
$sql->execute();

while($row = $sql->fetch(PDO::FETCH_ASSOC)){
$chat = $row['chat'];
echo "data: $chat \n\n";
}

ob_flush();
flush();

//sleep(2);

На index.html когда я переоденусь $("#box").html(event.data); в $("#box").append(event.data); затем он показывает все строки снова и снова. В основном добавление.

То, что происходит здесь, это отображение только последней строки, когда я продолжаю $("#box").html(event.data);

Когда на server.php я пишу echo "data:".$chat."<br />" тогда это ничего не толкает.

То, что я хочу, — это получить контроль над тем, как работает сервер, и добавлять только последнюю строку данных к текущим данным, когда таблица обновляется. И я хочу знать правильный способ echoing данные с тех пор, когда есть такие сложные вещи, как divs и все это будет сложно, как я понял. Любая помощь здесь будет оценена ..

1

apache html5 javascript php server-sent-events

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Процесс server.php заканчивается после отправки одного бита данных. Это означает, что сокет закрывается. Браузер видит, что сокет умер, и через 3 секунды снова подключается. Вот почему похоже, что данные передаются каждые 3 секунды. Вместо этого вам нужно изменить ваш server.php, чтобы иметь бесконечный цикл, в котором находится спящий режим, и опрашивать mysql:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

include("connect.php");

$previousID = 0;

while(true){
$sql = $db->prepare("SELECT * FROM chat WHERE id > ?");
$sql->execute( array($previousId) );
while($row = $sql->fetch(PDO::FETCH_ASSOC)){
$chat = $row['chat'];
echo "data: $chat \n\n";
//TODO: update $previousID here
}

ob_flush();
flush();

sleep(10);  //Poll every 10 seconds
}

Этот (не проверенный) код также показывает, как каждый раз отправлять только новые данные. Вам нужно сделать его немного более устойчивым — если получено 0 строк, вы можете отправить контрольный сигнал, например, чтобы сообщить клиенту время последнего опроса.

На второй вопрос ваш обработчик сообщений вызывается для каждой отправленной вами части данных, а затем вы делаете:

$("#box").html(event.data);

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

Рассмотреть возможность использования <li> теги и JQuery’s append(), если вы хотите, чтобы все строки были на экране. В моей книге (PLUG: приложения Data Push с HTML5 SSE — O’Reilly) я часто добавляю к <pre> тег, как быстрый и грязный способ увидеть все поступающие данные.

0