PHP+SSE流推送技术，如果卡页面的话，记得session存储到redis或memcached

toooooop8

于 2024-07-31 15:49:04 发布

阅读量51

点赞数

文章标签： php 开发语言 sse

本文链接：https://blog.csdn.net/toooooop8/article/details/140824811

版权

/**
 * @function 与客户端server send event通信方式
 * @param    $callback    callable 回调，若返回数组代表要输出json，返回null代表本次循环不进行输出
 * @param    $millisecond int      数据分发间隔，单位：毫秒
 * @return   string
 * @other    void
 */
function sse($callback, $millisecond = 1000) {
    set_time_limit(0);
    ini_set('output_buffering', 'off');
    ini_set('zlib.output_compression', false);
    while (@ob_end_flush()) {}
    header('Content-Type: text/event-stream; Charset=UTF-8');
    header('Cache-Control: no-cache');
    header('Connection: keep-alive');
    header('X-Accel-Buffering: no');
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Methods: *');
    header('Access-Control-Allow-Headers: *');

    ob_start();
    while (true) {
        $callback_res = $callback();
        if($callback_res !== null) {
            $data = json_encode($callback_res, JSON_UNESCAPED_UNICODE);
            echo "id: ".uniqid('', true)."\n" . "event: message\n" . "data:{$data}\n\n";
            if(isset($callback_res['code']) && $callback_res['code'] === 1){
                break;
            }
        }
        ob_flush();
        flush();
        usleep($millisecond * 1000);
    }
}

前端javascript

                if(!! window.EventSource) {
                    let sse = '';
                    const url = window.location.protocol + "//" + window.location.hostname + ":" +  window.location.port + "/admin/erweifile/goodserweilist/getInitCodeStatus"
                    sse = new EventSource(url);
                    //通信事件
                    sse.onmessage = function (event) {
                        const response = JSON.parse(event.data);
                        // layer.msg(response.msg);
                        Toastr.success(response.msg);
                    };

                    // 打开事件
                    sse.onopen = function (event) { console.log('连接成功'); };

                    //关闭事件
                    sse.onclose = function(event) {console.log('连接关闭');};

                    //错误事件
                    sse.onerror = function (event) {console.error('连接失败');};

                    sse.addEventListener('message', function(event) {
                        const response = JSON.parse(event.data);
                        console.log(response);
                        if (response.code == 1) {
                            console.log('Received end signal from server. Closing SSE connection.');
                            sse.close();
                        }
                    });
                } else {
                    alert('您的浏览器不支持SSE');
                }
            }