HTML SSE



  • HTML5 服务器发送的事件

    Server-Sent Events允许网页从服务器获取更新。服务器发送的事件是指网页自动从服务器获取更新。之前也可以这样做,但网页必须询问是否有可用的更新。使用服务器发送的事件,更新会自动进行。例如:Facebook / 微博更新,股票价格更新,新闻源,体育赛事结果等。
  • 浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    不支持 6.0(包含)以上支持 6.5(包含)以上支持 5.0(包含)以上支持 11.5(包含)以上支持
    下面的示例创建了一个简单的接收服务器发送的事件通知的例子,EventSource对象用于接收服务器发送的事件通知:
    var source = new EventSource("/jc_script/demo_sse.php");
                           source.onmessage = function(event) {
                               document.getElementById("result").innerHTML += event.data + "
       ";
                           };
    
    尝试一下
    示例说明:
    • 创建一个新的EventSource对象,并指定发送更新的页面的URL(在此示例中为“/jc_script/demo_sse.php”)
    • 每次收到更新时,都会发生onmessage事件
    • 当发生onmessage事件时,将接收到的数据放入id =“result”的元素中
    在上面的例子中,有一些额外的代码行来检查浏览器对服务器发送事件的支持:
    if (typeof(EventSource) !== "undefined") {
                           // 浏览器支持,编写业务逻辑代码。
                       } else {
                           // 对不起不支持 server-sent events。
                       }
    
  • 服务器端代码示例

    要使上述示例起作用,您需要一台能够发送数据更新的服务器(如PHP或ASP或Java)。服务器端事件流语法很简单。将“Content-Type”标题设置为“text/event-stream”。现在您可以开始发送事件流。我们这里展示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();
                       ?>
    
    代码解释:
    • 将“Content-Type”标题设置为“text/event-stream”
    • 指定页面不应缓存
    • 输出要发送的数据(始终以“data:”开头)
    • 将输出数据刷新回网页
    服务器语言技术请学习我们的 Java教程 PHP教程 Python教程
  • EventSource对象

    在上面的示例中,我们使用onmessage事件来获取消息。但也有其他事件:
    事件 描述
    onopen 当打开到服务器的连接时
    onmessage 当接收到消息时
    onerror 当发生错误时