Question

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

问题：如何替换插入了该行的完整行？我希望将替换项放在同一位置，从而将其保留在div [结果]中。

我试图删除html文件第17行的br-tag，但没有删除“换行符”。

我的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-服务器端事件：替换行而不是追加

1 个答案: