Question

我似乎无法找到服务器发送事件的任何好例子。

我的目标是向2个不同的div发送2条消息，但我是javascript的新手，所以我不知道如何解析这两条消息，有人能指出我正确的方向吗？

如果有人能解释我SSE是如何工作的，我可以运行这个php脚本send.php来推送网页更新或javascript运行脚本本身吗？

这是我的PHP代码：

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

$message = $row['message'];
$user = $row['user'];
echo "{$message}\n\n";
echo "{$user}\n\n";
flush();
?>

这是我的HTML / Javascript：

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

<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("send.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>

Answer 1

您可以将事件作为JSON编码字符串发送回服务器，并指示哪个div应该获取哪些消息。

$arr = array(
    'user' => $row['user'],
    'message' => $row['message']
)
echo json_encode($arr);

然后，解析来自服务器的JSON响应并对其执行逻辑。假设这两个div的ID为user和message

source.onmessage=function(event){
    var $data = JSON.parse(event.data);
    for(key in obj){
        if (obj.hasOwnProperty(key)) { //ensure that we're not up in the prototype chain
            document.getElementById(key).innerHTML = $data[key];    
        }
    }
}

此处的关系当然是key将是user或message。我们还希望有2个div，id="user"和id="message"我们可以修改innerHTML。这不是一项要求，但有助于简化流程。

服务器使用PHP发送事件

1 个答案: