本SSE长连接实例,支持后台持续输出,直到脚本执行时间超时!
基础SSE的详解可参考:http://www.cnblogs.com/goody9807/p/4257192.html#commentform
listen.php 代码
Class Listen{
public function common(){
/**
* @param $returnData [string] 返回的数据,对应data
* @param $event [string] 事件类型,对应字段Type
* @param $id [id] 对应字段ID
* @param $retry [id] 服务器端三秒内没有发送任何信息,则开始重连最大间隔时间:毫秒
* @descrbe 可以参照第一张截图
*/
function return_event_data($returnData,$event='msg',$id=0,$retry=0){
$ResponseType = ['message','event'];
$str = '';
if($id>0){
$str.= "id:{$id}".PHP_EOL;
}
if($event){
$str.= "event:{$event}".PHP_EOL;
}
if($retry>0){
$str.= "retry:{$retry}".PHP_EOL;
}
if(is_array($returnData)){
$returnData = json_encode($returnData);
}
$str.= "data:{$returnData}".PHP_EOL;
$str.=PHP_EOL;
echo $str;
}
//这一段保证实时输出数据
header('X-Accel-Buffering: no');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
ob_end_clean();
ob_implicit_flush(1);
while(1){
//TODO 获取用户当前待处理的任务
//TODO 获取用户当前需要审批的审批单
return_event_data('555','bar',6,1000);
sleep(3);
}
}
}
html代码
var ListenCommon = {
master:{},
describe:"初始监听事件,可以用来监听不同获取信息的接口",
type:'SSE',
listenUrl:'',
listenStart:function(){
console.log($);
if(this.listenUrl ===''){
alert('请先填写监听URL地址');
return false;
}
var type = this.type;
console.log(type);
switch (type){
case 'SSE':
//建立连接
this.master = new EventSource(this.listenUrl);
console.log(this.master);
//触发message事件
this.master.onmessage=function(event) {
console.log(event);
};
//自己设置监听事件
this.master.addEventListener('bar',function(event) {
//这里进行回调处理
console.log('bar:',event);
});
this.master.onerror = function(event) {
//这里进行回调处理
console.log('通信出错');
};
/*这里与onerror同效果
this.master.addEventListener('error',function(event) {
//这里进行回调处理
console.log('bar:',event);
});
*/
break;
case 'WebSocket':
//TODO
break;
}
},
listenEnd:function(){
if( typeof (this.master.close) ==='function' ){
this.master.close();
console.log('关闭监听');
}
}
};
ListenCommon.listenUrl = "listen.php";
//开始监听事件(SSE长连接)
ListenCommon.listenStart();
/*setTimeout(function(){
ListenCommon.listenEnd();
},3000);*/