PHPでシェルスクリプトの実行

###前提・実現したいこと
MacOS上でCakePHP３を使用し、アプリケーションを作成中なのですが、
あるページに遷移した際、シェルコマンドを実行し、
その実行結果を随時ブラウザに表示するという処理を行いたいのですがうまくいきません。

###発生している問題・エラーメッセージ
現状の問題としては、先にシェルコマンドの実行と随時echoのメッセージ表示が行われ、
最後にレイアウトが出力される状況です。

理想としては、先にページをレンダーし、
シェルコマンドの実行結果が随時HTML上で更新されるようにしたいと思っています。

ご助言頂戴できれば幸いです。
よろしくお願いします。

###ソースコード

php
1# src/Template/Test/index.ctp
2
3<p>ok</p>
4
5<?php
6    echo '<div id="progress"></div>';
7    echo str_pad(" ",4096)."<br />\n";
8
9    $proc = popen($cmd, 'r');
10    while (!feof($proc))
11    {
12        # echo '<pre>'. fread($proc, 4096) .'</pre>';
13        echo "<script>document.getElementById( 'progress' ).appendChild(document.createTextNode('" . str_replace(array("\r", "\n"),"", fread($proc, 4096)) . "'));</script>";
14        echo "<script>document.getElementById( 'progress' ).appendChild(document.createElement('br'));</script>";
15        echo str_pad(" ",4096);
16
17        flush();
18        ob_flush();
19        sleep(1);
20    }
21?>

php
1# src/Controller/TestController.php
2
3class TestController extends AppController
4{
5
6    public function index()
7    {
8        $cmd = <<< EOF
9echo ディレクトリを作成中;
10cd ~/Documents/develop;
11mkdir ~/Documents/develop/test;
12echo ディレクトリ作成完了;
13EOF;
14
15        $this->set(compact(
16            "cmd"
17        ));
18    }
19}

行動規範の内容に同意します

回答2件

ベストアンサー

Transfer-Encoding: chunked なレスポンスを生成して， JavaScriptのXMLHttpRequestの状態変更イベントでリアルタイムに反映するのが一番綺麗だと思います． iframeでやるとずっと読み込み中の状態みたいになってしまうので…

/api/execute_shellcommand.php

php
1<?php
2
3// こういうMIMEタイプを指定しておくと，str_padで先頭を埋めたりしなくても
4// ブラウザのバッファリングを防げる
5header('Content-Type: text/event-stream; charset=UTF-8');
6
7// レスポンスをチャンクで分割する宣言
8header('Transfer-Encoding: chunked');
9
10// バッファリングを完全に無効化
11// (ob_flushのコールが不要になる)
12while (ob_get_level()) ob_end_clean();
13
14// 1行ごとにレスポンスを返す
15$pr = popen('for i in {1..10}; do sleep 1; echo $i; done', 'rb');
16while (false !== $line = fgets($pr)) {
17    // "16進数表記のサイズ\r\n"
18    echo base_convert(strlen($line), 10, 16) . "\r\n";
19    // "データ\r\n"
20    echo $line . "\r\n";
21    flush();
22}
23// 最後はサイズ0のチャンクで締めくくり，Webブラウザに終わりを知らせる
24echo "0\r\n";
25echo "\r\n";
26flush();

example.html

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>Example</title>
4<p>
5  <textarea id="response" rows="5" cols="20"></textarea><br>
6  <button id="start">コマンド実行</button>
7</p>
8<script>
9
10  /* 手抜きしてますが，ここのコードは DOMContentLoaded のイベント時実行にしたほうがいいです */
11    
12  var area = document.querySelector('#response');
13  var start = document.querySelector('#start');
14  
15  // ボタンのクリックイベントを登録
16  start.addEventListener('click', function () {
17    
18    // 実行中は2回目のクリックを防ぐ
19    start.disabled = true;
20    
21    // Ajax通信を行うためにXMLHttpRequestオブジェクトを生成
22    var xhr = new XMLHttpRequest;
23    xhr.open('get', '/api/execute_shellcommand.php', true);
24    xhr.onreadystatechange = function () {
25      if (this.status === 200 && this.readyState === 3) {
26        // chunkの一部分が返ってきたときテキストエリアを更新
27        area.textContent = this.responseText;
28        return;
29      }
30      if (this.status === 200 && this.readyState === 4) {
31        // 終了時
32        start.disabled = false;
33        return;
34      }
35      if (this.status !== 200 && this.readyState === 4) {
36        // エラー時
37        alert('エラー！');
38        start.disabled = false;
39        return;
40      }
41    };
42    
43    // HTTPリクエストを実行
44    xhr.send();
45    
46  });
47</script>
48
49