php js sse,js：服务端数据推送方式 — SSE方式

老的http协议是请求-响应式的，对于某些实时性要求比较高的需求(例如微博消息推送)，实现起来是比较麻烦的，

而html5标准中，新增了一个SSE(server-sent event，服务端推送事件)，可以方便地做到消息实时推送，并且由于是官方特性，主流浏览器对其支持是较好的。和websocket不同的是，ws是全双工的，本质上是一个额外的tcp连接，而sse是直接建立在当前http连接上的，本质上是保持一个http长连接，但是和comet不同的是：comet是每次服务端返回数据后，连接关闭然后客户端马上再次发起连接。而sse是保持长连接常驻。

而客户端对数据的通信是通过js的EventSource来进行的，EventSource提供了三个事件：

1、open：当成功建立连接时产生

2、message：当接收到消息时产生

3、error：当出现错误时产生

直接使用即可。

结合js对json对象的支持，我们可以通过sse实现json格式数据推送，从而进行扩展，demo如下：

html端：

SSE DEMO

var es = new EventSource("/sse.php");

es.addEventListener("message", function(e){

j = JSON.parse(e.data);

document.getElementById("sse_content").innerHTML += "\n" + j.test;

},false);

后端sse.php：

header("Content-Type: text/event-stream");

while(true){

echo "data:".json_encode(['test'=>date("Y-m-d H:i:s")])."\n\n";

@ob_flush();@flush();

sleep(3);

}

?>

示例：服务端发送消息的格式：

data: first event

data: second event

id: 100

event: myevent

data: third event

id: 101

: this is a comment

data: fourth event

data: fourth event continue

retry: 1

上面的消息类型解释：

空白：表示该行是注释，会在处理时被忽略。

data：表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。

event：表示该行用来声明事件的类型。浏览器在收到数据时，会产生对应类型的事件。

id：表示该行用来声明事件的标识符。

retry，表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。