通过服务器的发送事件，自动更新网页的内容
使用:
- 验证支持情况
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" 结束
