html5 - 服務器端事件：替換行而不是追加

Question

我的目標是使用 HTML5 SSE（服務器端事件）將數據更新從服務器發送到客戶端。 目前，時間被附加為額外的行。 我在 php 文件中使用 [\\n\\n] 來停止流。

問題：如何替換附加的完整行？ 我希望替換在同一個地方，因此被保存在 div [result] 內。

我試圖刪除 html 文件第 17 行的 br 標簽，但它沒有刪除“換行符”。

我的 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>";

問題是由+=運算符引起的，它將新結果附加到前一個結果。 現在，使用=它會覆蓋舊結果，從而解決問題。