//创建一个新的 EventSource 对象，规定发送更新的页面的 URL
    var source = new EventSource("../api/MyAPI/ServerSentEvents");    //默认支持message事件
    source.Onmessage= function (event) {
        console.log(source.readyState);
        console.log(event);
    };

实例解析：
　　创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"），参数url就是服务器网址，必须与当前网页的网址在同一个网域（domain），而且协议和端口都必须相同。
　　每接收到一次更新，就会发生 onmessage 事件

检测 Server-Sent 事件支持
以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

if(!!EventSource && typeof(EventSource)!=="undefined")
{    // 浏览器支持 Server-Sent
    // 一些代码.....}else{    // 浏览器不支持 Server-Sent..}

服务器端代码实例
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP、ASP、ASP.NET、Java）。
服务器端事件流的语法是非常简单的。你需要把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
我只会C#，所以用 ASP.NET的MVC 里面的ApiController写了个最简单的服务器端：

    public class MyAPIController : ApiController
    {        /// 

        /// ...api/MyAPI/ServerSentEvents        /// 
        ///         [HttpGet, HttpPost]        public Task ServerSentEvents()
        {            //Response.COntentType= "text/event-stream"            //Response.Expires = -1            //Response.Write("data: " & now())            //Response.Flush()
            
            string data = "id: 123456\nevent: message\ndata: 666\n\n";

            HttpResponseMessage respOnse= new HttpResponseMessage
            {                //注意：COntentType= "text/event-stream"
                COntent= new StringContent(data, Encoding.GetEncoding("UTF-8"), "text/event-stream")
            };            return Task.FromResult(response);
        }
    }

代码解释:
　　把报头 "Content-Type" 设置为 "text/event-stream"
　　规定不对页面进行缓存
　　输出发送日期（始终以 "data: " 开头）
　　向网页刷新输出数据

EventSource 对象

新生成的EventSource实例对象，有一个readyState属性，表明连接所处的状态。

source.readyState
它可以取以下值：

　　0，相当于常量EventSource.CONNECTING，表示连接还未建立，或者连接断线。

　　1，相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。

　　2，相当于常量EventSource.CLOSED，表示连接已断，且不会重连。

在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：
事件　　　　描述
onopen 　　当通往服务器的连接被打开
onmessage 当接收到消息
onerror 　　当发生错误

open事件

连接一旦建立，就会触发open事件，可以定义相应的回调函数。

source.Onopen= function(event) {
// handle open event
};

// 或者

source.addEventListener("open", function(event) {
// handle open event
}, false);
message事件

收到数据就会触发message事件。

source.Onmessage= function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
};

// 或者

source.addEventListener("message", function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
}, false);
参数对象event有如下属性：

data：服务器端传回的数据（文本格式）。

origin： 服务器端URL的域名部分，即协议、域名和端口。

lastEventId：数据的编号，由服务器端发送。如果没有编号，这个属性为空。

error事件

如果发生通信错误（比如连接中断），就会触发error事件。

source.Onerror= function(event) {
// handle error event
};

// 或者

source.addEventListener("error", function(event) {
// handle error event
}, false);
自定义事件

服务器可以与浏览器约定自定义事件。这种情况下，发送回来的数据不会触发message事件。

source.addEventListener("foo", function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
}, false);
上面代码表示，浏览器对foo事件进行监听。

close方法

close方法用于关闭连接。

source.close();
数据格式
概述

服务器端发送的数据的HTTP头信息如下：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
后面的行都是如下格式：

field: value\n
field可以取四个值：“data”, “event”, “id”, or “retry”，也就是说有四类头信息。每次HTTP通信可以包含这四类头信息中的一类或多类。\n代表换行符。

以冒号开头的行，表示注释。通常，服务器每隔一段时间就会向浏览器发送一个注释，保持连接不中断。

: This is a comment
下面是一些例子。

: this is a test stream\n\n

data: some text\n\n

data: another message\n
data: with two lines \n\n
data：数据栏

数据内容用data表示，可以占用一行或多行。如果数据只有一行，则像下面这样，以“\n\n”结尾。

data: message\n\n
如果数据有多行，则最后一行用“\n\n”结尾，前面行都用“\n”结尾。

data: begin message\n
data: continue message\n\n
总之，最后一行的data，结尾要用两个换行符号，表示数据结束。

以发送JSON格式的数据为例。

data: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n
id：数据标识符

数据标识符用id表示，相当于每一条数据的编号。

id: msg1\n
data: message\n\n
浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个HTTP头，里面包含一个特殊的“Last-Event-ID”头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。

event栏：自定义信息类型

event头信息表示自定义的数据类型，或者说数据的名字。

event: foo\n
data: a foo event\n\n

data: an unnamed event\n\n

event: bar\n
data: a bar event\n\n
上面的代码创造了三条信息。第一条是foo，触发浏览器端的foo事件；第二条未取名，表示默认类型，触发浏览器端的message事件；第三条是bar，触发浏览器端的bar事件。

retry：最大间隔时间

浏览器默认的是，如果服务器端三秒内没有发送任何信息，则开始重连。服务器端可以用retry头信息，指定通信的最大间隔时间。

retry: 10000\n

--------------------------------------------------------------------------------------

规范
Server-sent Events 规范是 HTML 5 规范的一个组成部分，具体的规范文档见参考资源。该规范比较简单，主要由两个部分组成：第一个部分是服务器端与浏览器端之间的通讯协议，第二部分则是在浏览器端可供 Javascript 使用的 EventSource 对象。通讯协议是基于纯文本的简单协议。服务器端的响应的内容类型是“text/event-stream”。响应文本的内容可以看成是一个事件流，由不同的事件所组成。每个事件由类型和数据两部分组成，同时每个事件可以有一个可选的标识符。不同事件的内容之间通过仅包含回车符和换行符的空行（“\r\n”）来分隔。每个事件的数据可能由多行组成。代码清单 1 给出了服务器端响应的示例：

retry: 10000\n
event: message\n
id: 636307190866448426\n
data: 2017/05/18 15:44:46\n\n

Chrome浏览器监视视图：

响应报文头部：

var es = new EventSource(&＃39;events&＃39;);
es.Onmessage= function(e) {
    console.log(e.data);
};//自定义事件 myeventes.addEventListener(&＃39;myevent&＃39;, function(e) {
    console.log(e.data);
});

在指定 URL 创建出 EventSource 对象之后，可以通过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的作用类似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。服务器发送事件（Server-Sent Events，简称SSE）就是为了解决这个问题，而提出的一种新API，部署在EventSource对象上。目前，除了IE，其他主流浏览器都支持。
简单说，所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾。

SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：

　　WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。

　　WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。

　　SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。

　　SSE默认支持断线重连，WebSocket则需要额外部署。

　　SSE支持自定义发送的数据类型。

从上面的比较可以看出，两者各有特点，适合不同的场合。

个人完整的HTML5页面和C#（MVC实现服务端代码）如下：

前端HTML5页面：

    
    
    
    
    
获取服务端更新数据
    

C#写的服务器端：

using System;using System.Net.Http;using System.Text;using System.Threading.Tasks;using System.Web.Http;namespace WebTest.Controllers
{    /// 

    /// api/{controller}/{id}    /// 
    public class MyAPIController : ApiController
    {        static readonly Random random = new Random();        /// 

        /// ...api/MyAPI/ServerSentEvents        /// 
        ///         [HttpGet, HttpPost]        public Task ServerSentEvents()
        {            //Response.COntentType= "text/event-stream"            //Response.Expires = -1            //Response.Write("data: " & now())            //Response.Flush()
            
            string data = "";            if (random.Next(0, 10) % 3 == 0)
            {                //唤醒自定义的CustomEvent
                data = ServerSentEventData("这是自定义通知", DateTime.Now.Ticks.ToString(), "CustomEvent");
            }            else
            {                //唤醒默认的message
                data = ServerSentEventData(DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss"), DateTime.Now.Ticks.ToString());
            }

            HttpResponseMessage respOnse= new HttpResponseMessage
            {                //注意：COntentType= "text/event-stream"
                COntent= new StringContent(data, Encoding.GetEncoding("UTF-8"), "text/event-stream")
            };            return Task.FromResult(response);
        }        public string ServerSentEventData(string data, string id, string _event = "message", long retry = 10000)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendFormat("retry:{0}\n", retry);
            sb.AppendFormat("event:{0}\n", _event);
            sb.AppendFormat("id:{0}\n", id);
            sb.AppendFormat("data:{0}\n\n", data);            return sb.ToString();
        }
        
    }
}

通信在页面上的显示结果：

至此，大功告成。

以上就是HTML5支持服务器发送事件的详细内容，更多请关注 第一PHP社区 其它相关文章！