html5 server sent event,HTML5 Server-Sent Events 服务器发送事件

通过服务器的发送事件，自动更新网页的内容

使用:

验证支持情况

if(typeof(EventSource) !== "undefined") {

//支持

} else {

//不支持...

}

使用Server-Sent Events就是通过 EventSource 对象来接受服务器端消息,有一下几个事件：

1. onopen ----打开服务器连接时

2. onmessage---当收到消息时

3. onerror ---当发生错误时

案例

网页端代码

if (typeof(EventSource) !== 'underfined') {

// 实例化 对象，接收一个url

let source = new EventSource('data.php');

// 成功与服务器发生连接时触发

source.onopen = function (e) {

console.log(e);

}

//出现错误时触发

source.onerror = function (e) {

console.log(e);

}

// 收到服务器发生的事件时候触发

source.onmessage = function (event) {

console.log(event);

}

// 自定义事件

source.addEventListener('myEvent', function (e) {

console.log('event:' + e.data);

})

} else {

console.log('该浏览器不支持');

}

服务器端代码PHP示例

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

header("Cache-Control: no-cache");

$time = date('Y-m-d H:i:s');

echo "retry:1000\ndata: {$time} \n\n";

echo "id:5\n".

"event: myEvent\n".

"data: hello world\n\n";

flush();

爬不完的坑：

设置内容类型：Content-Type:text/event-stream

输出要发送的数据 格式 "data:"

输出的数据要以 格式" :\n\n" 结束