HTML5 服务器发送事件浏览器检测兼容支持-W3CAPI 在线教程

HTML5 服务器发送事件简介

什么是HTML5 服务器发送事件（server-sent event）？

概念：HTML5 服务器发送事件（server-sent event）允许网页使用监听器来获得来自服务器的消息，也就是我们可以在网页中接收来自服务器的消息，类似于Socket双工概念，可以由主动请求变被动接收。

特性：

Server-Sent 事件可以让网页自动获取来自服务器的更新。
HTML5之前的实现是通过网页对服务器进行轮询（循环进行请求）是否有可用的更新。通过 HTML5服务器发送事件，服务器的消息更新客户端可以自动接收。
可以应用的场景：Facebook/Twitter 更新、估价更新、博文更新、赛事结果、股票趋势、天气预报等。

为什么需要HTML5 服务器发送事件（server-sent event）？

我们的Web应用开发是基于HTTP协议，它是一个请求响应协议，客户端向服务器发送一个请求，然后服务器响应这个请求将相关数据返回到客户端并断开连接，所有的业务逻辑都是基于由客户端进行请求，然后服务器响应。

这样的模式并不适用于全部的业务场景，比如我们要想实现一个天气预报的功能，我们需要通过向服务器请求最新的天气信息，这个时候我们就需要在客户端开启一个定时循环，持续不断的向服务器进行最新天气的获取，这样的业务处理情景会导致如下问题：

加重对客户端性能的消耗，需要不断重复的进行请求
加重对服务器带宽和性能的消耗，需要不断重复的处理请求

使用 HTML5 服务器发送事件（server-sent event）的功能可以让客户端由主动变为被动，我们不需要重复去向服务器请求获取数据，我们只需要等待服务器向我们发送最新的天气信息即可。

HTML5 服务器发送事件浏览器检测兼容支持

除了 Internet Explorer有兼容问题外，所有主流浏览器均支持并兼容 HTML5服务器发送事件功能。我们需要在使用之前对浏览器进行兼容检测，代码如下：

if(typeof(EventSource)!=="undefined")  {
    // 您的浏览器支持 Server-Sent
    // 业务逻辑代码.....
} else {
    // 您的浏览器不支持 Server-Sent..
}

HTML5 服务器发送事件使用方法

服务器端实现业务代码：服务器端事件流的语法是非常简单的，把 "Content-Type" 报头设置为 "text/event-stream"。我们就可以开始发送事件流了。
```
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:i:s');
echo "data: The server time is: {$time}\n\n";
flush();
```
1. 把HTTP响应报头 "Content-Type" 设置为 "text/event-stream"
2. 声明HTTP响应报头“Cache-Control”规定浏览器不对页面进行缓存处理
3. 输出发送日期（始终以 "data: " 开头）
4. 向网页刷新输出数据
客户端浏览器检测 Server-Sent 事件支持
创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL：time_sse.php
```
var source=new EventSource("/static/example/html5/time_sse.php");
```
实现 EventSource 对象消息回调，每接收到服务端的一次更新，就会发生 onmessage 事件回调
```
source.onmessage=function(event)  {
    document.getElementById("result").innerHTML+=event.data + "<br />";
};
```
在 EventSource 对象消息回调 onmessage 中，把已接收的数据显示到页面 id 为 "result" 的元素中
```
document.getElementById("result").innerHTML+=event.data + "<br />";
```

HTML5 服务器发送事件实例

一、使用 HTML5 服务器发送事件（Server-Sent Events）获取服务器时间的更新显示

前端代码：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
</head>
<body>

<h1>获得服务器更新</h1>
<div id="result"></div>

</body>
<script type="text/javascript">
    if(typeof(EventSource)!=="undefined")  {
        // 您的浏览器支持 Server-Sent
        var source=new EventSource("/static/example/html5/time_sse.php");
        source.onmessage=function(event)  {
            document.getElementById("result").innerHTML+=event.data + "<br />";
        };
    } else {
        // 您的浏览器不支持 Server-Sent..
    }
</script>
</html>

后端PHP代码：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:i:s');
echo "data: The server time is: {$time}\n\n";
flush();

执行一下

HTML5 服务器发送事件 EventSource 对象

我们在使用 HTML5 服务器发送事件功能时，最主要用到的 JavaScript对象就是 EventSource 对象，他是HTML5 给我们提供的实现服务器发送事件监听的具体实施者，如下为 EventSource 对象包含的所有功能的表格：

方法/属性	说明
onopen	回调方法，当通往服务器的连接被打开时会回调此函数
onmessage	回调方法，当接收到服务器消息时，回调此函数
onerror	回调方法，当错误发生时，回调此函数
url	属性，客户端要监听接收消息的服务端接口地址
readyState	属性，HTTP请求状态
withCredentials	属性，是否跨域请求

HTML

HTML 5 基础教程