Question

我正在尝试使用SSE构建实时应用。但是当我认为我以正确的方式写下所有内容时，它就不起作用了。请帮我解决这个问题。我知道websockets比SSE好，但我开始这是我的index.html代码

<!DOCTYPE html>
<html>
<head>
<title>Using SSE(Server-sent event)</title>
<meta charset="utf-8">
</head>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("getdata.php");
    source.onmessage = function(event) {  
        console.log(JSON.parse(event.data));
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>
</html>

这是getdata.php页面

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

    $pdo = new PDO("mysql:host=localhost;dbname=sse", 'root', 'secret');
    $obj = $pdo->query("select * from users");
    $arr = $obj->fetchAll();
    echo "data: ".json_encode($arr);
    flush();
   ?>

当我使用

时

source.onerror = function(er){
   console.log(er);   
}

我得到了这个

error { target: EventSource, isTrusted: true, currentTarget: EventSource, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false, timeStamp: 5152.813223, cancelBubble: false, originalTarget: EventSource }

我在html console.log（JSON.parse（event.data））中尝试了注释代码; 但它也不起作用。

请帮助理解SSE如何工作以及我的代码中有什么问题？

提前致谢。

Answer 1

我发现它为什么不起作用。我添加了\ n \ n

echo "data: ".json_encode($arr);

所以它看起来像这样

echo "data: ".json.encode($arr)."\n\n";

我希望它有所帮助

Answer 2

编辑（只是为了照未来的观众而离开）

check（然后在浏览器中按F12并检查＆＃34;控制台＆＃34; - 它在Firefox和Chrome中为我工作）

完全按照该服务器上的代码查看代码：

sse.html

<!DOCTYPE html>
<html>
<head>
<title>Using SSE(Server-sent event)</title>
<meta charset="utf-8">
</head>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

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

</body>
</html>

getdata.php（由于旧服务器，仍然是mysql，而不是msqli或PDO）

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

include("../../admin2/config.inc.php");
connect_db();
$query = mysql_query( "select * from ttbb" ) or die( mysql_error() );
$arr = mysql_fetch_object( $query );
echo "data: ".json_encode($arr)."\n\n";
flush();
?>

打印：

Answer 3

首先，最重要的是，PHP脚本应该永远运行，而不是执行一个查询然后死亡。（如果这是你的意图，那么你不需要流媒体解决方案，而且应该只使用AJAX。）

其次，每个data::后需要两个LF。除了ob_flush()之外，您（可能）还需要flush()。通过所有三个更改，它看起来像这样：

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

$pdo = new PDO("mysql:host=localhost;dbname=sse", 'root', 'secret');
while(true){  //Deliberate infinite loop
  $obj = $pdo->query("select * from users");
  $arr = $obj->fetchAll();
  echo "data: ".json_encode($arr)."\n\n";
  @ob_flush();@flush();  //Use @ to suppress v.rare but meaningless errors
  sleep(1);  //Poll the database every second.
  }

＆GT;

我已将它（服务器）设置为每秒轮询本地数据库。您应该根据服务器负载与目标延迟的平衡进行调整。

重要提示：这会将所有用户数据每秒发送到所有客户端。您应该重新设计SQL查询，以仅获取自上次查询以来已更改的用户。然后重新设计前端，在第一次调用时给予所有用户，然后再进行更改。

HTML5服务器发送事件

3 个答案: