服务器端事件＆amp;历史数据

Question

我正在使用PHP和MySQL在我的网页上显示实时数据，每1秒刷新一次。所有这些目前都在按预期工作，尽管我想实现一个新功能。

目前在$( document ).ready()我通过检索并显示transactions表中的单行数据来启动实时数据Feed。我也可以开始/停止Feed。好到目前为止。

我现在想要显示实时数据和让从开始 最后100次交易。因此，例如，当用户打开网页时，他们最初会看到过去100次交易，然后实时Feed会立即开始（101,102,103等）。

目前，当加载页面时，实时订阅源将从sql查询返回的任何事务开始。虽然我需要它从减去100

开始

过去100次交易可能来自SerialNo -100，因为这是数据库中唯一的自动增量键。

关于实时Feed的一切正常，包括开始/停止按钮。所以我觉得问题是由于我的查询，尤其是LIMIT 1部分。我尝试将其更改为LIMIT 100，但是当我这样做时，网页每1秒显示100条记录。

我有两个文件，data.php和index.html。我在下面列出了代码。

data.php

session_start(); 
include 'conn.php'; // database connection
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Access-Control-Allow-Origin: *");

$query = "SELECT TimeStamp, SerialNo FROM transactions ORDER BY TimeStamp DESC LIMIT 1";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->get_result();

while($row = $result->fetch_assoc()) {
    //send request every x seconds
    echo "retry: 1000\n\n"; 
    echo "id: " .$row["SerialNo"]. "\n\n";

    if ($_SESSION["lastSerialNo"] != $row["SerialNo"]) {
    //store new "last" serial no in the session
        $_SESSION["lastSerialNo"] = $row["SerialNo"];
    //...send data to client
        echo "data: ".$row['SerialNo']. ' ' .$row['TimeStamp']. "\n\n";
        flush();
    }
    else {
    // do nothing
    }
}

的index.html

<script type="text/javascript">
      $("document").ready(function() {
        // set the default stopped flag to false
        var is_stopped = false;
        var source = new EventSource("data.php");
        var offline;

        source.onmessage = function(event) {

          if (is_stopped) {
            // get data sent from data.php
            offline = event.data;
            // Put into storage
            localStorage.setItem(event.lastEventId, offline);
            // Retrieve from storage
            offline = localStorage.getItem("offline");
          }

          if (!is_stopped) {
            document.getElementById("result").innerHTML += "New transaction: " + event.data + "<br>";
          }
        };

        $("document").ready(function() {
          $("#start").click(function() {
            // set stopped flag to false
            is_stopped = false;
            // loop through the localstorage 
            for (var i = 0; i < localStorage.length; i++) {
              document.getElementById("result").innerHTML += "New transaction: " + localStorage.getItem(localStorage.key(i)) + " *<br>";
            }
            // clear local storage
            localStorage.clear();
          });

          $("#stop").click(function() {
            // set the stopped flag to true
            is_stopped = true;
          });
        }); 
      }); //end dom ready
</script>

<div id="result"><!--Server response here--></div>
<button id="stop"> stop</button>
<button id="start"> start</button>

感谢任何帮助。