web前端学习（二）html学习笔记部分（8）--服务器推送事件3

1.2.22 html5服务器推送事件

1.2.22.1 html5服务器推送事件介绍

　　服务器推送事件（Server-sent Events）是HTML5规范中的一个组成部分，可以用来从服务器端实时推送数据到浏览器端。

　　传统的服务器端推送数据技术：Websocket：WebSocket规范是HTML5中的一个重要组成部分，已经被很多主流浏览器所支持，也有不少基于WebSocket开发的应用。正如名称所表示的一样，WebSocket使用的是套接字链接，基于TCP协议。使用WebSocket之后，实际上在服务器端和浏览器之间建立起一个套接字连接，可以进行双向的数据传输。WebSocket的功能是很强大的，使用起来灵活，可以适用于不同的场景。不过WebSocket技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的web应用。

　　HTTP协议：简易轮询，即浏览器端定时向服务器端发出请求，来查询是否有数据更新。这种做法比较简单，可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑。轮询的间隔过长，会导致用户不能及时接收得到更新的数据；轮询的时间过短，会导致查询请求过多，增加服务器的负担。

1.2.22.2 html5服务器推送事件实现

　　服务器代码头：

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

　　EventSource事件：

　　onopen事件：服务器链接被打开

　　onmessage事件：接受消息

　　onerror：错误发生

代码记录

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
</head>
<body>
    <h1>Status:</h1>
    <div id="statusDiv"></div>
    <h1>Server Data:</h1>
    <div id="serverData"></div>
    ？？？
</body>
</html>

index.js

var serverData;
var statusDiv;
var SERVER_URL = "index.php";
window.onload = function () {
    statusDiv = document.getElementById("statusDiv");
    serverData = document.getElementById("serverData");
    startlistenServer();
}
function startlistenServer() {
    statusDiv.innerHTML = "start connect Server......";
    var es = new EventSource(SERVER_URL);
    es.addEventListener("newDate",newDateHandler);
    //上面一行用来检测php中echo的内容有没有event:newDate，有的话执行函数newDateHandler；
    //它其实和onmessage函数有相同的功能在这里都是显示date日期的。

    //有用到EventSource的自定义事件的知识
    es.onopen = openHandler;
    es.onerror = errorHandler;
    es.onmessage = messageHandler;
}
function openHandler(e) {
    statusDiv.innerHTML = "Server open";
}
function errorHandler(e){
    statusDiv.innerHTML = "error";
}
function messageHandler(e){
    // serverData.innerHTML = e.data;
//    注释用来测试自定义事件。
//    不注释就是和下面那个函数一个功能，重复功能了。
}
function newDateHandler(e){
    serverData.innerHTML = e.data;
}

index.php

<?php
/**
 * Created by PhpStorm.
 * User: lin
 * Date: 2018/11/24
 * Time: 10:59
 */
/*
 * echo "hello";
echo 'data:'.date("Y-m-d H-i-s");
echo "

";
flush();
*/
header('Content-Type:text/event-stream');
/*不带上面这一行的话打印
没有反应，不会换行*/
for($i = 0; $i < 100;$i++){
    date_default_timezone_set("Asia/Shanghai");
//    时区设置；
    echo "event:newDate
";
    echo 'data:'.date('Y-m-d H-i-s');
    echo "

";
    flush();
    sleep(1);
}