1、HTML5服务器推送事件介绍
服务器推送事件（Server-sent Events）是Html5规范的一个组成部分，可以用来从服务端实时推送数据到浏览器端。
传统的服务器推送技术----WebSocket: WebSocket规范是HTML5的一个重要组成部分，已经被很多主流浏览器支持，也有不少基于WebSocket开发的应用。正如名称所表示的一样，WebSocket使用的是套接字连接，基于TCP协议。使用WebSocket之后，实际在服务器端和浏览器端建立了一个套接字连接，可以进行双向的数据传输。WebSocket功能是很强大的，使用起来也很灵活，可以适用于不同的场景。不过WebSocket技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的Web应用。
----HTTP协议：简易轮询，即浏览器端定时向服务器端发起请求，来查询是否有数据需要更新。这种做法比较简单，可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑，间隔过长，会导致用户不能及时收到更新的数据；间隔过短，会导致查询请求过多，增加服务器端的负担。
2、HTML5服务器推送事件实现
1）服务器代码头：header('Content-Type: text/event-stream')
2）EventSource事件： onopen----服务器的链接被打开 onmessage----接收消息 onerror----错误发生
首先下载phpstorm并安装，在windows下，由于phpstorm没有自带Interpreter，因此，在http://php.net下载相应的文件，并在phpstorm中配置好，端口设置为9090。
php文件命名为index.php，
<?php
header('Content-Type:text/event=stream');
echo "hello world";
在浏览器中输入：localhost:9090/index.php，页面即可显示 hello world
帮助文档地址：https://developer.mozilla.org
一个例子(运行php服务器，在浏览器中输入：localhost:9090/index.html)：
index.html:
<!DOCTYPE html>
<html>
<head>
<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.php:
<?php
header('Content-Type:text/event-stream');
for($i = 0; $i<100;$i++){
date_default_timezone_set("Asia/Shanghai");
echo "event:newDate\n";
echo 'data:'.date('Y-m-d H-i-s');
echo "\n\n";
flush();
sleep(1);
}
index.js:
var serverData,statusDiv;
var SERVER_URL = "index.php";
window.onload = function(){
serverData = document.getElementById("serverData");
statusDiv = document.getElementById("statusDiv");
startlistenServer();
}
function startlistenServer(){
statusDiv.innerHTML = "start Connect Server...";
var es = new EventSource(SERVER_URL);
es.addEventListener("newDate",newDateHandler);
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;
}