Как перехватить сообщения EventSource во время работы процесса? - PullRequest
Новая
       19

Как перехватить сообщения EventSource во время работы процесса?

0 голосов
/ 27 февраля 2020

У меня есть приложение codeigniter, которое принимает пользовательский ввод, использует JS для извлечения / POST ввода в контроллер, который обрабатывает его моделью. Модель должна отправлять обновления прогресса пользователю во время процесса, но кажется, что обещание получения захватывает все сообщения до того, как источник событий сможет их получить, и не будет отображать их, пока процесс не будет завершен.

Есть ли способ остановить выборку от скрытия всех сообщений источника событий? Или, может быть, поймать каждого и отобразить их по мере их поступления, а не до завершения процесса?

Мой индекс. php

    <form id="form1">
      <div class="form-group">
        <label>Date From -></label>
        <input type="text" class="form-control" name="date" id="magento-date" placeholder="2019-10-15 06:46:30">
      </div>
      <div class="form-group">
        <label>Date To <-</label>
        <input type="text" class="form-control" name="dateTo" id="magento-date-to" placeholder="2019-10-16 06:46:30">
      </div>

      <button id="submit" type="submit" class="btn btn-default">Submit</button> 
    </form>
    <div class="progress progress-striped active">
      <div class="progress-bar" id="progress" style="width:0%"></div>
    </div>
    <div id="message"></div>

    <script>

    document.querySelector("#submit").addEventListener("click", function(event) {
      event.preventDefault();
      const url = <?= "'".base_url('classic/classicFirearmByDate', 'http')."'"; ?>;

      var myHeaders = new Headers();

      const form = new FormData(document.querySelector('#form1'));

      // The parameters we are gonna pass to the fetch function
      let fetchData = {
          method: 'POST',
          headers: myHeaders,
          body: new URLSearchParams(form)
      }

      //{method: "POST",header:myHeaders,body:{date:'2020baby'}}
      fetch(url, fetchData, message())
      .then((res) => res.text())
      .then(text => console.log(text))
      .catch((error) => console.log(error));

    }, false);
    function message() {
      var evtSource = new EventSource(<?= "'".base_url('classic/classicFirearmByDate', 'http')."'"; ?> );
      var eventList = document.querySelector('#message');

      evtSource.onopen = function () {
          console.log("Connection to server opened.");
      };

      evtSource.onmessage = function (e) {
          console.log(e);
          var newElement = document.getElementById("message");

          newElement.textContent = "message: " + e.data;
          // eventList.appendChild(newElement);
      };

      evtSource.onerror = function () {
          console.log("EventSource failed.");
      };
    }
    </script>

Мой контроллер. php

<?php
class Classic extends CI_Controller{
    . . .
    public function classicFirearmByDate() {
        $data['title'] = 'Classic Firearms';
        $sandbox = $this->input->post('sandbox');
        . . .
        $date = trim(htmlspecialchars($this->input->post('date')));
        $dateTo = trim(htmlspecialchars($this->input->post('dateTo')));
        $data['body'] = $this->classic_firearms->get_firearm_by_date($date, $dateTo, $sandbox, $this->input->post());

Моя модель. php

<?php
class Classic_firearms extends CI_Model{
. . .
    public function get_firearm_by_date($date, $dateTo, $sandbox, $test) {
            $this->sessionId = $this->login($sandbox);
            $filter = array('complex_filter' => array(
                    array(
                            'key' => 'updated_at',
                            'value' => array(
                                    'key' => 'from',
                                    'value' => $date//'2019-10-03 09:44:30'//
                            ),
                    ),
                    array(
                            'key' => 'updated_at',
                            'value' => array(
                                    'key' => 'to',
                                    'value' => $dateTo//'2019-10-03 09:46:30'//
                            ),
                    ),
            ));

            $productId = $this->proxy->catalogProductList($this->sessionId, $filter);


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

            if ($productId != null || $productId != [] ) {
                    . . . //Many cURL requests and data conversion
                            echo 'data:  Working on {$product_name} Product!', "\n\n";

                            // flush the output buffer and send echoed messages to the browser
                            flush();
...