上一节:

  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 当发生错误时
上一节: