html5 - события на стороне сервера: заменить строку вместо добавления

Question

Я стремлюсь использовать HTML5 SSE (Server Side Events) для отправки обновлений данных с сервера на клиент.В настоящее время время добавляется как дополнительная строка.Я использую [\ n \ n] в php-файле, чтобы остановить поток.

Вопрос: Как заменить полную строку, добавленную к ней?Я хочу, чтобы замена находилась в том же месте, поэтому она будет храниться внутри div [result].

Я пытался удалить br-тег в строке 17 html-файла, но он не был удален"новая строка".

Мой html5-файл, включая js:

  <h1>SSE test</h1>
  <div id="result"></div>

  <script>
      // Create an object
      var source = new EventSource("updater.php");
      // Detect message receipt
      source.onmessage = function(event) {
          // Write the received data to the page
          document.getElementById("result").innerHTML += event.data + "<br>";
      };
  </script>

мой php-файл:

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

// The server time
  $time = date('r');
  echo "data: The server time is: {$time}\n\n";

flush();
?>

Answer 1

В вашем обратном вызове source.onmessage просто измените строку на:

document.getElementById("result").innerHTML = event.data + "<br>";

Проблема вызвана оператором +=, который добавляет новый результат к предыдущему.Теперь с = он перезаписывает старый результат, тем самым решая проблему.