首页 > html5+css > html5基础知识 > HTML5 服务器发送事件
2017
08-21

HTML5 服务器发送事件

HTML5 服务器发送事件(server-sent event)是单向消息传递,它允许网页获得来自服务器的更新,以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。

创建EventSource 对象用于接收服务器发送事件通知

var source=new EventSource("demo_sse.php");

事件open当成功与服务器建立连接时产生

事件message当收到服务器发送的事件时产生

source.onmessage=function(event){alert(event.data);}

事件onerror当出现错误时产生

另外,还需要能够发送数据更新的服务器。服务器端事件流的语法是非常简单的。把EventSource对象指定的文件中的内容类型 "Content-Type" 报头设置为 "text/event-stream"

响应文本的内容可以看成是一个事件流,由不同的事件所组成。每个事件由多种类型和对应的数据两部分组成,同时每个事件可以有一个可选的标识符。

不同事件的内容之间通过仅包含换行符的空行(“\n”或者常量PHP_EOL)来分隔。每个事件的数据可能由多行组成。

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

上面代码所示,每个事件之间通过空行来分隔。对于每一行来说,冒号(“:”)前面表示的是该行的类型,冒号后面则是对应的值。可能的类型包括:

类型为空白,表示该行是注释,会在处理时被忽略。

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

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

类型为 id,表示该行用来声明事件的标识符。

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

第一个事件只包含数据“first event”,会产生默认的事件;第二个事件的标识符是 100,数据为“second event”;第三个事件会产生类型为“myevent”的事件;最后一个事件的数据为“fourth event\nfourth event continue”。当有多行数据时,实际的数据由每行数据以换行符连接而成。

如果服务器端返回的数据中包含了事件的标识符,浏览器会记录最近一次接收到的事件的标识符。如果与服务器端的连接中断,当浏览器端再次进行连接时,会通过 HTTP 头“Last-Event-ID”来声明最后一次接收到的事件的标识符。服务器端可以通过浏览器端发送的事件标识符来确定从哪个事件开始来继续连接。

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(); //向网页刷新输出数据

?>

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。