H5ServerSent事件单向消息传递

虽然以前知道这个技术，但是一直没去了解过，今天在这里记录一下，先看W3school说的

这意味着可以做一些简单的消息推送
下面是我的代码：
html页面

js代码：

var source,message,timer;
/**
* 开启签到 - 开始检查服务端是否有更新
*/
$("#open").click(function () {
countdown();
if(typeof(EventSource)!=="undefined") {
source = new EventSource("http://10.3.140.139:8082/index/test/getuser");
source.Onmessage=function(event)//接收到消息
{
message = event.data;
var len = message.length;
if (len > 0) {
message = JSON.parse(message);
$(".handle_message tr").append(code(message['head_pic'],message['username']));
}
};
} else {
layer.msg('抱歉，你的浏览器不支持 server-sent 事件...');
}
});
/**
* 关闭监听
*/
$("#close").click(function () {
cz_close();
});
/**
* 关闭监听操作
*/
function cz_close() {
timer = $(".paging").val();
clearTimeout(timer);
$('#test').html('签到结束');
source.close();
$.post("http://10.3.140.139:8082/index/test/clearcache");
layer.msg('停止监听服务器更新');
}
/**
* 追加代码
* @returns {string}
*/
function code(pic,name) {
var code = '' +
'' +
'

'+ name +'

php代码：

/**
* @return mixed
* 学生端签到页面
*/
public function index()
{
return $this->fetch();
}
/**
* @return mixed
* 教师端开启签到页面
*/
public function demo()
{
return $this->fetch();
}
/**
* 将签到的学生加入缓存
*/
public function post()
{
if ($_POST) {
$img = self::curlInfo();
$_POST['head_pic'] = $img;
$info = json_encode($_POST);
Cache::set('user_info',$info);
}
}
/**
* 缓存取出用户
*/
public function getUser ()
{
//取出并清除当前缓存
$info = Cache::pull('user_info');
////服务端事件标准规定（将MIME类型设为text/event-stream）
header('Content-Type: text/event-stream');
////告诉Web服务器关闭Web缓存
header('Cache-Control: no-cache');
echo "data:{$info}\n\n";
//立即发送数据（而不是先缓冲起来，等到PHP代码执行完毕再发送）
flush();
}
/**
* 清除缓存
*/
public function clearCache ()
{
Cache::clear();
}
/**
* @return mixed
* 获取用户随机头像
*/
protected function curlInfo ()
{
$url = 'https://api.66mz8.com/api/rand.pic.php?type=%E4%B8%AA%E6%80%A7&return=json';
$curl = curl_init();//初始化CURL句柄
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST,FALSE);
curl_setopt($curl,CURLOPT_HTTPGET,true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($curl);
curl_close($curl);
$info = json_decode($output,true);
$img = $info['imgurl'];
return $img;
}

参考链接：http://www.w3school.com.cn/ht&＃8230;
http://www.hangge.com/blog/ca&＃8230;