Question

我想将数据发布到我的PHP页面，然后让它更新HTML页面。我遵循this使用服务器发送事件将更新推送到网页的示例。这就是我现在所拥有的：

output.html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="serverData"></div>

</body>

<script type="text/javascript">

//check for browser support
if(typeof(EventSource)!=="undefined") {
    //create an object, passing it the name and location of the server side script
    var eSource = new EventSource("send_sse.php");
    //detect message receipt
    eSource.onmessage = function(event) {
        //write the received data to the page
        document.getElementById("serverData").innerHTML = event.data;
    };
}
else {
    document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
}
</script>
</html>

send_sse.php：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$val = 0;
if (isset($_POST['msg'])){
    $val = $_POST['msg'];
}
echo "data: $val\n\n";
ob_flush();
?>

form.html：

<html>
<body>

<form action="send_sse.php" method="post">
Message: <input type="text" name="msg"><br>
<input type="submit">
</form>

</body>
</html>

问题是，当表单发布值时，它不会更新output.html。它输出“0”并且每当我手动更改$ val的值并保存文件时它将更新。但是，我希望在PHP文件之外确定$ val的值。我做错了什么？

Answer 1

您在这里遇到的问题是您错过了SSE在概念上的运作方式。您的output.html页面正在向您的网络服务器发出GET请求并执行脚本send_sse.php并打开一个连接并保持该连接打开并等待更新。

当您从form.html发帖时，您正在向您的网络服务器发送POST请求，并在完全不同的主题上执行脚本send_sse.php。

由于你没有在这两个线程之间实现任何共享持久性，因此没有任何区别。

因此，要做你想做的事，你需要在send_sse.php中拥有某种形式的全局持久性（例如数据库）的代码，并且可以检测新数据，然后将其刷新到浏览器。

我不是PHP专家，但我在Node JS中编写了an example，它使用REDIS pub / sub来提供持久性。

我希望有所帮助。

使用服务器发送的事件推送对网页的更新

1 个答案: