使用JSON和PHP的HTML5服务器发送事件（SSE）

Question

使用JSON和PHP的HTML5服务器发送事件（SSE）

phpjsonhtml

11

我正在尝试设置一个HTML5服务器发送事件，用JSON数据更新网页。我查看了许多在线信息站点和教程，但似乎没有一个是针对完全初学者（像我）编写的。

我还在这个StackExchange上查看了类似问题的答案，但仍然无法解决这个问题。

我只能从“w3schools”得到一个基本示例可以工作，但这不使用JSON。

我希望有人能向我展示如何使用JSON数据使HTML5服务器发送事件正常工作。

我已经成功运行的文件如下：

HTML

<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>


<div id="result"></div>

<script>
    if(typeof(EventSource) !== "undefined") {
        var source = new EventSource("demo_sse.php");
        source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
   }
</script>

</body>
</html>

PHP

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');

   $time = date('r');
   echo "data: The server time is: {$time}\n\n";
   flush();
?>

我想要用在SSE中的JSON数据类型的示例如下：

{"employees":[
    {
        "firstName":"John", 
        "lastName":"Smith",
        "age":"25"
    },
    {
        "firstName":"Sally", 
        "lastName":"Simpson",
        "age":"24"
    },
    {
        "firstName":"Pete", 
        "lastName":"Daltry",
        "age":"30"
    }

]}

使用以下脚本，我已经成功地使用jQuery和上面的JSON文件：

<body>

<p id="team"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/
jquery.min.js">
</script>

<script>

$(document).ready(function(){
    $.getJSON("team.json", function(data){
        $.each(data, function(){
            $.each(this, function(key, value){
                $("#team").append(
                "First Name: " + value.firstName + "<br>" +
                "Last Name: " + value.lastName + "<br>" +
                "Age: " + value.age + "<br><br>"
            );
        });
    });
});
});

</script>

</body>

然而，我无法让SSE用JSON数据正常工作。

任何帮助将不胜感激。

- Mekong

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- appsdevpk · Accepted Answer

由于服务器发送的数据是字符串格式，因此您可以从服务器发送JSON字符串。代码如下（服务器端代码）。

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$data = array(
    'firstName'=>'Test',
    'lastName'=>'Last'
);
$str = json_encode($data);
echo "data: {$str}\n\n";
flush();

并在客户端执行。

var source = new EventSource("events.php");
source.onmessage = function(event) {
    var jdata = JSON.parse(event.data);
    console.log(jdata);
};