SSE长连接 EventSource的实时输出

2019独角兽企业重金招聘Python工程师标准>>>

本SSE长连接实例，支持后台持续输出，直到脚本执行时间超时！

基础SSE的详解可参考：http://www.cnblogs.com/goody9807/p/4257192.html#commentform

listen.php  代码 

<?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代码

<script type="text/javascript">
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);*/
</script>

 

转载于:https://my.oschina.net/querying/blog/1036952