SSE - Codeigniter - 输出内容

我在PHP Codeigniter应用程序中实现Server-Sent Events。</ p>

我有一个长时间运行的脚本,SSE显示用户的进度条。</ p>

这个位很有用。</ p>

缺少的部分:如何 所有数据准备就绪后显示我的HTML内容?</ strong> </ p>

PHP:</ p>

 公共函数LongRunningScript(){

header(“Content-Type:text / event-stream”);
header(“Cache-Control:no-cache”);
header(“Connection:keep-alive”);

函数 send_message($ id,$ progress){
$ d = array('message'=&gt;“”,'progress'=&gt; $ progress);
echo“id:$ id”。 PHP_EOL;
echo“data:”。 json_encode($ d)。 PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}

// LONG RUNNING TASK
for($ i = 1; $ i&lt; = 10; $ i ++) {
send_message($ i,$ i * 10);
sleep(1);
}

//现在所有数据都准备好了,我想做这样的事情:
// $ this-&gt; data ['content'] = $ this-&gt; load-&gt; view('view.php',$ this-&gt; data,true);
}
</ code> </ pre >

JS:</ p>

  function startTask(){
event_source = new EventSource('controller / LongRunningScript');

// a 收到消息
event_source.addEventListener('message',function(e){
var result = JSON.parse(e.data);

if if(e.lastEventId =='CLOSE'){
// addLog('Received CLOSE closing');
event_source.close();
var pBar = document.getElementById('progressor');
pBar.value = pBar.max; //最大化进度条
} else {
var pBar = document.getElementById('progressor');
pBar.value = result.progress;
var perc = document.getElementById('percentage');
perc.innerHTML = result.progress +“%”;
// @ perc.style.width =(Math.floor (pBar.clientWidth *(result.progress / 100))+ 15)+'px';
}
});

event_source.addEventListener('error',function(e){
event_source。 close();
});
}

函数stopTask(){
event_source.close();
}
</ code> </ pre>
</ div>

展开原文

原文

I am implementing Server-Sent Events in my PHP Codeigniter application.

I have a long running script and SSE shows progress bar for the user.

This bit works great.

The missing piece: how do I display my HTML content when all the data is ready?

PHP:

public function LongRunningScript() {
    header("Content-Type: text/event-stream");
    header("Cache-Control: no-cache");
    header("Connection: keep-alive");

    function send_message($id, $progress) {
        $d = array('message' => "", 'progress' => $progress);
        echo "id: $id" . PHP_EOL;
        echo "data: " . json_encode($d) . PHP_EOL;
        echo PHP_EOL;
        ob_flush();
        flush();
    }

    //LONG RUNNING TASK
    for ($i = 1; $i <= 10; $i++) {
        send_message($i, $i * 10);
        sleep(1);
    }

    // now all data is ready and i would like to do something like this:
    // $this->data['content'] = $this->load->view('view.php', $this->data, true);
}    

JS:

function startTask() {
    event_source = new EventSource('controller/LongRunningScript');

    //a message is received
    event_source.addEventListener('message', function (e) {
        var result = JSON.parse(e.data);

        if (e.lastEventId == 'CLOSE') {
            //addLog('Received CLOSE closing');
            event_source.close();
            var pBar = document.getElementById('progressor');
            pBar.value = pBar.max; //max out the progress bar
        } else {
            var pBar = document.getElementById('progressor');
            pBar.value = result.progress;
            var perc = document.getElementById('percentage');
            perc.innerHTML = result.progress + "%";
            //perc.style.width = (Math.floor(pBar.clientWidth * (result.progress / 100)) + 15) + 'px';
        }
    });

    event_source.addEventListener('error', function (e) {
        event_source.close();
    });
}

function stopTask() {
    event_source.close();
}

doudang1052
doudang1052 问题编辑,以显示JS
3 年多之前 回复
dtudj42064
dtudj42064 你通过ajax访问这个?如果是这样-请显示js功能
3 年多之前 回复

1个回答



您有两个选择:您可以将新视图的所有html发送到SSE连接,然后让前端断开连接。 </ p>

但更简单的是让JS代码检测进度表何时达到100%,然后:</ p>


  1. 断开连接 SSE连接</ li>
  2. 请求一个新的URL,它将获取并显示您想要发送的新视图。</ li>
    </ ol>

    即 使用SSE作为进度表,使用正常显示的正常请求。</ p>
    </ div>

展开原文

原文

You have two options: you could send all the html for the new view down the SSE connection, then have the front-end disconnect.

But simpler would be to have the JS code detect when the progress meter has reached 100%, and then:

  1. Disconnect the SSE connection
  2. Request a new URL, which would fetch and display that new view that you want to send.

I.e. use SSE for the progress meter, use a normal request for the normal display.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问