服务器端事件 Start/Stop

Question

我正在使用 PHP 和 JavaScript 显示来自 MySQL 数据库的一些实时数据。一切正常，数据显示如我所愿。

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

stop - 暂停当前实时提要
start - 从暂停处恢复提要

我可以使用 EventSource close() 函数让 stop 按钮工作。我不太确定如何从我离开的地方恢复。我想我可能需要按照 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 & 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 脚本从数据库中 returns 数据时，将其获取到 return 它发回的行的 ID（主键）。

在 Javascript 中，您可以在每次收到响应时将其写入隐藏元素。

当用户单击 "stop" 时，它将停止更新该元素，因为未从数据库中 return 编辑任何内容。

当他们单击 "start" 时，读取隐藏的 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.

然后当他们点击 "start" 时，您会读到该值：

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

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

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

您的 SQL 查询可能需要稍微调整一下，因为它目前所做的只是获取 1 条记录（最近的一条）。如果他们按 "stop" 并且还有 13 条记录要显示，您将不得不处理这种情况。可能 return all 13，或将它们排队，具体取决于 UI.

中需要显示的内容

另一种解决方案将如所述，但使用您已经获得的 TimeStamp 字段并将其写入 div，而不是行 ID。同样，您调整 SELECT 查询，以便它从隐藏的 div.

获取 TimeStamp > 时间戳的任何内容

服务器端事件 Start/Stop

Server Side Events Start/Stop

html

javascript

php

mysql

real-time-data