火星了?利用eventSource实现后端向前端推送数据

尤里2号   ·  9月前   ·   后端语言

后端主动向前端(浏览器)发送数据我们用的最多的是轮询(长轮询)和webSocket。

其中,轮询会造成大量无用的请求,长轮询不够优雅,而webSocket服务端部署较为困难。


如果你只需要在意服务器何时向前端发送数据,那么EventSource是你最好的选择。


EventSource简单来说,是由前端发起并建立一个http连接,随时接受来自后端的数据(类似于长轮询中的iframe永久帧)。通过对应的js API,我们可以轻松的处理这些数据。


话不多说,一个php文件快速入门(index.php)


<?php
if($_GET['server']){
    header('Content-Type:text/event-stream');
    header('cache-control:no-cache');
    while (true)
    {
        echo "data:".date('H:i:s')." Hello World\n\n";
        ob_flush();
        flush();
        sleep(1);
    }
}else {?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<ul id="list"></ul>
<script>
    var e = new EventSource('./index.php?server=yes');
    e.onopen=function () {
        console.log('已连接')
    };
    e.onmessage = function(event){
        var li=document.createElement('li');
        li.innerHTML=event.data;
        document.getElementById('list').appendChild(li)
    };
    e.onerror = function(event){
        alert('连接发生错误,当前连接状态: ' +  event.readyState);
    }
</script>
</body>
</html>
<?php }?>


3 条回复   |  直到 9月前 | 435 次浏览

wispx 9月前 支持  0 | 反对  0

占个楼,这个性能不知道怎么样

水木易安 9月前 支持  0 | 反对  0

 只要思想不滑坡,困难总比办法多

登录后才可发表内容