html5 - 服务器端事件：替换行而不是追加

Question

我的目标是使用 HTML5 SSE（服务器端事件）将数据更新从服务器发送到客户端。目前，时间被附加为额外的一行。我在 php 文件中使用 [\n\n] 来停止流。

问题：如何替换完整的行而不是附加它？我希望替换在同一个地方，因此保留在 div [result].

内

我试图删除 html 文件第 17 行的 br-tag，但它没有删除 "newline".

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

问题是由 += 运算符引起的，它将新结果附加到前一个结果。现在，使用 = 它会覆盖旧结果，从而解决问题。

html5 - 服务器端事件：替换行而不是追加

html5 - Server side events: Replace line instead of append

html

server-side