Question

我正在使用PHP和JavaScript从MySQL数据库中显示一些实时数据。一切都按预期工作，数据显示我想要的。

但是，我现在想实现两个简单的按钮来实现以下目的;

stop - 暂停当前的实时Feed
start - 从暂停的地方恢复供稿

我可以使用EventSource stop函数让close()按钮工作。我不太确定如何从我离开的地方恢复。我想我可能需要按here所述的Last-Event-ID添加。

到目前为止我的代码是;

PHP

<?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, CardNo, SerialNo FROM transactions ORDER BY TimeStamp DESC LIMIT 1";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->get_result();

if($row = $result->fetch_assoc()) {
    echo "retry: 100\n\n"; 
    if ($_SESSION["lastSerialNo"] != $row["SerialNo"]) {
        $_SESSION["lastSerialNo"] = $row["SerialNo"];
        echo "data: ".$row['SerialNo']. ' ' .$row['TimeStamp']. "\n\n";
        flush();
    }
    else {
        // do nothing
    }
}

JS＆amp; HTML

<script type="text/javascript">
    var source = new EventSource("data.php");
    window.onload = function() {
        source.onmessage = function(event){
            document.getElementById("result").innerHTML += "Data : " + event.data + "<br>";
        };
    };

    function stop() {
        source.close(); // this successfully stops the feed
        };

    function start() {
        // how to resume the feed?
        };  

    </script>

<button id="stop" onclick="stop()"> stop</button>
<button id="start" onclick="start()"> start</button>

感谢任何帮助。

Answer 1

当PHP脚本从数据库返回数据时，让它返回它发回的行的ID（主键）。

在Javascript中，每次收到回复时都可以将其写入隐藏元素。

当用户点击＆＃34;停止＆＃34;它将停止更新该元素，因为没有从数据库返回任何内容。

当他们点击＆＃34;开始＆＃34;读取隐藏div中的元素并向其添加1（假设ID为自动递增）。您的下一个数据库查询从该点获取记录等。

假设有一个ID #hiddenDiv

的隐藏div

window.onload = function() {
    source.onmessage = function(event){
        // what you already had goes above
        document.getElementById("hiddenDiv").innerHTML = event.id;
    };
};

每次从PHP脚本中获取数据时，它都会将event.id（数据库中的ID）写入隐藏的div。

然后当他们点击＆＃34;开始＆＃34;你读过这个值：

var lastRecord = document.getElementById("hiddenDiv").innerHTML;

在您的ajax请求中，您必须传递lastRecord + 1（您可能需要将其转换为int，而不确定此处的确切语法。）

现在，在您的查询中，您SELECT会记录WHERE id =您在ajax请求中发送的ID。

您的SQL查询可能需要稍微调整一下，因为它目前所做的一切都是获得1条记录（最新的记录）。如果他们按下＃34;停止＆＃34;并且还有13个记录要显示，你必须处理这个场景。可以返回 all 13，或者将它们排队，具体取决于UI中需要显示的内容。

另一种解决方案如上所述，但使用您已经获得的TimeStamp字段并将其写入div，而不是行ID。同样，您调整了SELECT查询，以便从隐藏的div中获取TimeStamp >时间戳的任何内容。

服务器端事件启动/停止

1 个答案: