javascript - 服务器端事件开始/停止

Question

我正在使用 PHP 和 JavaScript 显示来自 MySQL 数据库的一些实时数据。一切都按预期工作，数据显示如我所愿。

但是，我现在想实现两个简单的按钮来实现以下功能；

• stop - 暂停当前实时提要
• start - 从暂停的地方恢复提要

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

到目前为止我的代码是；

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 和 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 中，您可以在每次收到响应时将其写入隐藏元素。

当用户单击“停止”时，它将停止更新该元素，因为没有从数据库返回任何内容。

当他们单击“开始”时，读取隐藏的 div 中的元素并将其加 1(假设 ID 是自动递增的)。您的下一个数据库查询会从该点获取记录，等等。

假设有一个隐藏的 div，ID 为 #hiddenDiv

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

每次您从 PHP 脚本获取数据时，它都会将 event.id(来自数据库的 ID)写入隐藏的 div。

然后当他们单击“开始”时，您会读取该值:

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

并且在您的 ajax 请求中，您必须传入 lastRecord + 1(您可能需要将其转换为 int，不确定此处的确切语法)。

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

您的 SQL 查询可能需要稍微调整一下，因为它目前所做的只是获取 1 条记录(最近的一条)。如果他们按下“停止”键并且还有 13 条记录要显示，那么您将不得不处理这种情况。可能会返回 所有 13 个，或将它们排队，具体取决于需要在 UI 中显示的内容。

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