создать функцию Vue для обновления текстовой области без буферизации - PullRequest
0 голосов
/ 30 мая 2018

Итак, у меня есть приложение laravel, которое получает данные с сервера и отображает их в текстовой области.Я хочу, чтобы текстовая область обновлялась постепенно (без буферизации), когда данные возвращаются с сервера.Сейчас он ждет, пока все данные будут получены, а затем обновляет текстовую область.Подробнее:

В приложении laravel есть функция vue, которая обновляет текстовую область.Он делает это в этой строке в следующем большом разделе:

axios.post('/' + task + '/' + websiteid, this.$data).then(function (response) {                
return _this3.comment_body += '|------  ' + task + ' output  ---->\n' + response.data;

.

new Vue({
    el: '#app',

    data: {
        comment_body: '', 
        updated: false,
        errors: new Errors(),
        commandoutput: new CommandOutput(),
        pending_response: false,
        prefix: 'example',
        updating: false
    },
    mounted: function mounted() {
        window.onbeforeunload = this.leaving;
        // window.onblur = this.leaving;
        // window.onmouseout = this.leaving;
    },

    methods: {
        onSubmitUpdate: function onSubmitUpdate(websiteid) {
            var _this = this;

            // eventually hook this thing up
            this.$data.loading = true;
            this.$data.updating = true;
            axios.post('/websites/' + websiteid + '/updates', this.$data).then(function (response) {
                return location.reload(); 
            }).catch(function (error) {
                return _this.errors.record(error.response.data.errors);
            });
        },
        saveProgress: function saveProgress(websiteid) {
            var _this2 = this;

            axios.post('/websites/' + websiteid + '/save', this.$data).then(function (response) {
                return location.reload();
            }).catch(function (error) {
                return _this2.errors.record(error.response.data.errors);
            });
        },
        onCommand: function onCommand(task, websiteid) {
            var _this3 = this;

            axios.post('/' + task + '/' + websiteid, this.$data).then(function (response) {                
                return _this3.comment_body += '|------  ' + task + ' output  ---->\n' + response.data;
            }).catch(function (error) {
                return _this3.errors.record(error.response.data.errors);
            });
        },
        leaving: function leaving() {
            if (document.getElementById("update-comment").value.trim() !== "" && this.$data.updated == false) {
                return true;
            }
        }
    }
});

Это текстовая область, которую он обновляет:

<textarea name="comment_body" id="update-comment" placeholder="output goes here, feel free to notate" rows="10" class="update-comment"></textarea>

ВотPHP-код, который получает данные с сервера

var_dump( "something1");
echo "$command";
$this->process_wrapper($command);
echo "something4";


public function process_wrapper($cmd, $data = null)
{
    $descr = array(
        0 => array(
            'pipe',
            'r'
        ) ,
        1 => array(
            'pipe',
            'w'
        ) ,
        2 => array(
            'pipe',
            'w'
        )
    );
    $pipes = array();
    echo "something2";
    //ob_flush();
    flush();
    echo "something3";
    $process = proc_open($cmd, $descr, $pipes,realpath('./'),array());
    if (is_resource($process)) {
        while ($f = fgets($pipes[1])) {
            echo $f;
            //ob_flush();
            flush();
        }
    }
}

Всякий раз, когда я раскомментирую один из этих двух вызовов ob_flush (), он выдает мне ошибку и говорит, что у меня нет буфера.Это хорошо, я не хочу никакого буфера, я хочу, чтобы все отображалось, как только оно отражается или создается.

Однако Vue ждет, пока все не будет сделано, и затем отображает все сразу (будь то в выражениях var_dump или echo или в данных с сервера). Как бы я отобразил все из PHP, поскольку он работает без буферизации?Я уже проверил мою буферизацию Apache с помощью этого скрипта https://www.jeffgeerling.com/blog/2016/streaming-php-disabling-output-buffering-php-apache-nginx-and-varnish, и здесь проблема не в этом.Я не использовал Vue раньше.Спасибо.

РЕДАКТИРОВАТЬ: Так как операторы echo в php не отображаются до позже, я думаю, что где-то есть какой-то буфер, который перехватывает весь вывод из операторов echo и ожидает их отображения до тех пор, пока метод "onCommand"в Vue работает.Я нашел это в другой части приложения, но я не уверен, что это как-то связано с этим:

/**
 * Runs when a command is due to be sent.
 *
 * @param Swift_Transport_SmtpAgent $agent            to read/write
 * @param string                    $command          to send
 * @param int[]                     $codes            expected in response
 * @param string[]                  $failedRecipients to collect failures
 * @param bool                      $stop             to be set true  by-reference if the command is now sent
 */
public function onCommand(Swift_Transport_SmtpAgent $agent, $command, $codes = array(), &$failedRecipients = null, &$stop = false);

РЕДАКТИРОВАТЬ: это может быть актуально:

/**
 * Run a command against the buffer, expecting the given response codes.
 *
 * If no response codes are given, the response will not be validated.
 * If codes are given, an exception will be thrown on an invalid response.
 *
 * @param string   $command
 * @param int[]    $codes
 * @param string[] $failures An array of failures by-reference
 *
 * @return string
 */
public function executeCommand($command, $codes = array(), &$failures = null)
{
    $failures = (array) $failures;
    $stopSignal = false;
    $response = null;
    foreach ($this->getActiveHandlers() as $handler) {
        $response = $handler->onCommand(
            $this, $command, $codes, $failures, $stopSignal
            );
        if ($stopSignal) {
            return $response;
        }
    }

    return parent::executeCommand($command, $codes, $failures);
}

(на самом делепохоже, что он вообще не запускается)

РЕДАКТИРОВАТЬ: сотрудник фактически исправил это с помощью socket.io с помощью адаптера redis для отображения данных, который опубликует исправление, как только у меня будет время.

1 Ответ

0 голосов
/ 30 мая 2018

Я не совсем понимаю, что вы пытаетесь сделать, и я не читал ваш PHP-файл, но вы должны привязать данные comment_body к вашему вводу (textarea), Vue делает это возможным с помощью v-Модель - очень похожа на Angular.<textarea v-model="comment_body"></textarea>

Кроме того, данные должны быть функцией.Так что вместо

data: {
 comment_body: ''
}

должно быть

data() {
 return {
  comment_body: ''
 }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...