Javascript 服务器端事件开始/停止

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

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

停止-暂停当前实时馈送 开始-从暂停的位置恢复提要 我可以使用EventSource close函数使停止按钮工作。不过，我不太确定如何从我离开的地方重新开始。我想我可能需要包括上面描述的最后一个事件ID

到目前为止，我的代码是

PHP

JS&HTML

---

非常感谢您的帮助。

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

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

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

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

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

每次从PHP脚本返回数据时，它都会将数据库中的id event.id写入隐藏的div

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

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

在ajax请求中，您必须传入lastRecord+1，您可能需要将其转换为int，但这里不确定确切的语法

现在在查询中选择记录，其中id=在ajax请求中发送的id

您的SQL查询可能需要进行一些调整，因为它目前所做的只是获取一条记录，即最近的一条记录。如果他们按stop，并且还有13条记录要显示，那么你就必须处理这种情况。根据需要在UI中显示的内容，可以返回全部13个，也可以对它们进行排队

---

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

使用隐藏的html元素或输入元素，单击按钮后更改其html内容/值，并在一定条件下使用该值来确定是否执行javascript更新实时数据。最好将id作为服务器的响应发送，以便javascript代码能够跟踪该id以供以后使用。像这样使用SSE的唯一问题是，检索到的数据只与每个用户相关，即：一个用户会看到另一个用户的不同数据集，这取决于他/她打开页面的时间/连接~ WebSocket会提供您需要的两种通信通道，每个人都会看到相同的数据。您能提供一个示例@coderodourThanks@TheOrdinaryGeek不客气，很高兴有帮助。我有jquery的背景，我个人会使用jquery来实现ajax请求，在我看来，这比普通的js要容易得多。但实际上，您所做的只是传递值lastRecord并给它一个名称，例如lastRecord:。这意味着您可以在PHP脚本中引用它，例如$\u POST['lastRecord']。您必须查找普通JavaScript语法，但这是原则。

<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>

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

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