HTML5 Server-Sent Events 服务器发送事件

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

使用:

1. 验证支持情况

if(typeof(EventSource) !== "undefined") {
    //支持
} else {
    //不支持...
}

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

1. onopen ----打开服务器连接时
2. onmessage---当收到消息时
3. onerror ---当发生错误时

3. 案例

网页端代码

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();

爬不完的坑：

1. 设置内容类型：Content-Type:text/event-stream
2. 输出要发送的数据 格式 "data:"
3. 输出的数据要以 格式" :\n\n" 结束