16

Encontrei alguns exemplos em que o desenvolvedor implementa um setInterval tentando prever o tempo de importação e no complete do ajax colocar 100% fazendo aquele progress bar ficar "meio bugado" ou saltar do nada para o final.

Exemplo:

var progressBar = $(".progress-bar");

setInterval(addProgress, 1000);

function addProgress() {
  var width = progressBar.width() + 15;
  progressBar.width(width);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <br>
  <h4 class="text-center">Importando arquivos</h4>
  <div class="container">
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only"></span>
      </div>
    </div>
  </div>
</div>

Minhas dúvidas:

Como vou prever quanto tempo irá demorar a requisiçao ?

Existe alguma forma de fazer onprogress para pegar o progresso da requisição ?

Se sim essa quebra em multiplas requisicoes pode afetar o trafego( por que dependendo do tamanho da tarefa irá demorar e custar várias requisições)?

Existe alguma outra forma recomendada de fazer progressBar?

Atualização:

Estou realizando a importação de algumas informações que pego em vários arquivos .csv.

Em outro sistema que usa Delphi, eles conseguem determinar o tempo de execução para realizar progressBar contando quantas linhas possuem o arquivo.

Eles fazem duas barras de progresso, uma geral, que será a soma de todas as linhas dos arquivos, e uma que é a soma das linhas do arquivo atual.

Preciso reproduzir o mesmo comportamento, porém não sei como reproduzir isto usando Ajax e PHP, gostaria de uma explicação analítica se possível.

4
  • 1
    Eu ia oferecer uma recompensa por essa pergunta, preciso urgente de uma solução, estou usando um método mequetrefe que da ate vergonha rsrsrs. Estou testando também as demais respostas! Commented 12/01/2016 às 16:53
  • @JúniorMoreira e ao autor, atualizei minha resposta para demonstrar um exemplo funcional, no entanto é fácil notar pela minha explicação que trata-se de um processo complicado e pode não valer o esforço. Commented 12/01/2016 às 18:04
  • Conseguiu implementar a barra de carregamento? Possui mais alguma dúvida adicional? Commented 15/01/2016 às 17:58
  • @MarcoAurélioDeleu ainda não, estou tentando garantir que toda minha importação esteja funcionando para que depois eu me preocupe com a parte de progressbar, pensei que seria rápida mas são várias validações Commented 15/01/2016 às 17:59

4 Respostas 4

15
+50

Fundamentalmente, seu problema está em determinar o tempo em que o servidor levará para responder sua requisição. O problema com as soluções que dependem do XMLHttpRequest é que você só pode medir o tempo de upload da requisição, isto é, quanto tempo seu computador levaria para subir o arquivo .csv até o servidor (por exemplo).

Como vou prever quanto tempo irá demorar a requisiçao ?

Sua melhor chance é por tentativa e erro em determinar uma fórmula aproximável f(x) = t onde x seria o número de linhas do arquivo e t o tempo que seu servidor levaria para processar tal requisição.

Mesmo assim, você estaria sujeito a precisar de pelo menos 2 requisições distintas para que o PHP te responda o número de linhas do arquivo antes de começar a processá-lo OU fazer essa contagem no JavaScript (ambas má soluções).

Ainda nessa linha de raciocínio, se um dia quando você trocar de servidor¹, sua fórmula poderá ser declarada errada em caso de incompatibilidade. Processadores, Memórias ou disco rígidos com maior eficiência levarão tempos distintos para processar um mesmo algoritmo. O mesmo vale para atualização de aplicações servidoras, atualização de sistema operacional ou versões do PHP que influenciam desempenho.

Nota¹: Em caso de aluguéis de servidores compartilhados, a troca da máquina pode ocorrer sem que você seja notificado.

Existe alguma forma de fazer onprogress para pegar o progresso da requisição ?

Existe uma diferença entre envio da requisição e tempo de resposta. Pode até ser relativamente fácil calcular o tamanho (em bytes) da sua requisição e determinar quando ela finalizará, mas isso só leva em conta a primeira etapa do processo (o envio da requisição). O tempo de resposta não pode ser descoberto no momento em que a requisição ocorre.

Se sim essa quebra em multiplas requisicoes pode afetar o trafego( por que dependendo do tamanho da tarefa irá demorar e custar várias requisições)?

Não entendi muito bem o que está querendo dizer aqui, mas se está se referindo a enviar 1 linha de cada vez (por requisição ajax) só pelo bel prazer de construir uma progress bar fiel, eu fortemente recomendo que não o faça. Isso poderia gerar um número muito alto de consumo de recursos totalmente desnecessário. Tenha em mente que uma vez que você sobe um arquivo inteiro, houve processamento na máquina cliente até que a requisição alcance o servidor, processamento do servidor web e em seguida inicialização da sua aplicação em PHP. Se cada linha do arquivo for tratado em uma requisição separada, você estará utilizando o seu servidor Web para inicializar uma mesma aplicação PHP múltiplas vezes desnecessariamente.

Existe alguma outra forma recomendada de fazer progressBar?

Existe uma opção teoricamente válida que sugere múltiplas requisições para perguntar ao servidor sobre o andamento da requisição principal. No entanto, acredito que tal opção só é possível se sua requisição principal for suficientemente longa. O processo consistiria em algo que respeitaria algumas regras:

  • Executa a requisição principal.
  • Atualizar uma informação compartilhável sobre o progresso da requisição de tempos em tempos.
  • Criar um laço no frontend que executa uma requisição específica a cada x tempos
  • Essa requisição secundária seria capaz de ler a mesma informação que a requisição principal está atualizando de tempos em tempos.

O consumo de servidor seria em função da varável x que você determinaria para solicitar ao servidor o o progresso. A resposta de tal requisição seria capaz de lhe oferecer uma informação tão confiável quanto você conseguiria medir o progresso dentro do seu código principal (requisição principal).


Update

Utilizando como base o repositório jQuery-Ajax-Progress por englercj, consegui implementar o conceito que apresentei como teórico. O que deve ser levado em consideração são os seguintes itens:

  • Cada vez que você "interrompe" o processo principal para salvar o progresso (nesse caso, função setProgress dentro do laço), sua requisição principal gera um processamento extra e demora mais.
  • Cada requisição que o cliente faz para o servidor afeta o desempenho do seu servidor.
  • Esse é um exemplo altamente simples com o único propósito de ensino, pois utilizo o sistema de arquivos do servidor para salvar o progresso (acesso a disco rígidos são muito lentos!)

Você pode clonar meu repositório em https://github.com/deleugpn/jquery-ajax-progress ou acompanhar os snippets a seguir (ou verificar um demo online aqui http://solucoesideais.com.br/dev/progressbar/demo.html)

Nota: Se sua requisição status.php estiver esperando o fim de progress.php para poder ser disparado, seu problema pode estar no seu navegador não autorizando a chamada.

progress.php

Este é o arquivo que contém sua requisição principal.

ini_set('max_execution_time', 60);

// The bigger this number, the longer the request will take
$max = 100000000;

/**
 * Store the current progress in a file to be read by status.php
 * @param $progress
 */
function setProgress($progress) {
    $file = __DIR__ . '/p';
    if (!is_file($file))
        touch($file);
    file_put_contents($file, $progress);
}

// Loop to delay the request a lot
for ($i = 0; $i < $max; $i++) {

    /**
     * Each 100'000 runs, the progress will be "recorded"
     * This is where you should learn what number is good for your loop that won't affect
     * the requests' performance.
     */
    if ($i % 100000 === 0) {
        setProgress(($i * 100) / $max);
    }
}

echo true;

status.php

Este é o arquivo que lhe dirá como está o andamento da sua requisição principal.

// Make a request to another domain so browser doesn't block you
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');

if (is_file(__DIR__ . '/p')) {
    echo file_get_contents(__DIR__ . '/p'); // Note: if the file is busy (being rewritten, this will result in nothing.
} else {
    echo 0;
}

demo.html

Este é o arquivo de demonstração da barra de progresso.

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Progress</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

    <!-- Google CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css"/>

    <!--<script src="js/jquery.ajax-progress.js"></script>-->
    <script>
        var request = {
            checkStatus: function () {
                $.ajax({
                    method: 'GET',
                    url: 'server/status.php',
                    dataType: 'json',
                    success: function (data) {
                        if(data)
                            request.setStatus(data);
                    }
                });
            },
            setStatus: function (status) {
                $('#prog')
                        .progressbar('option', 'value', status)
                        .children('.ui-progressbar-value')
                        .html(status.toPrecision(3) + '%')
                        .css('display', 'block');
            },
            _interval: null,
            clearInterval: function () {
                clearInterval(request._interval);
            }

        };
        $(function () {
            $('#prog').progressbar({value: 0});

            request._interval = setInterval(request.checkStatus, 1000);

            $.ajax({
                method: 'GET',
                url: 'server/progress.php',
                dataType: 'json',
                success: function () {
                    request.clearInterval();
                    request.setStatus(100);
                },
                error: function () {
                    request.setStatus(0);
                    request.clearInterval();
                    console.log('AWWW! Error!!');
                }
            });
        });
    </script>
</head>
<body>
<div id="prog"></div>
</body>
</html>
7
  • +1,Excelente resposta, estou testando possível solução! Commented 12/01/2016 às 18:49
  • Vou passar para meu programador PHP testar! +1 Commented 12/01/2016 às 20:01
  • @JúniorMoreira como especifiquei na resposta, não é uma opção muito recomendada. É muito trabalhosa e cara (em recursos computacionais) e só é útil se a requisição ocupar pelo menos mais de 10 segundos do processamento do servidor. Commented 12/01/2016 às 20:28
  • @MarcoAurélioDeleu Já que você não recomenda o uso de progressbar, o que você utilzaria para informar o progresso da importação para o usuário ? Commented 13/01/2016 às 10:22
  • @GabrielRodrigues As vezes que trabalhei com importação de arquivos, geralmente quem as executavam era eu e não um usuário final. Nunca desenvolvi um módulo de importação voltado ao usuário final. Se seus arquivos levam menos de 15~20 segundos para serem processados, sugiro simplesmente usar um "loader" como o Android usa, algo que fique carregando 'infinitamente'. Se o tempo excede essa média de 20 segundos, talvez seja melhor você simplesmente fazer upload do arquivo, salvá-lo em disco (no servidor) e avisar seu usuário que a importação acontecerá na próxima hora. Commented 13/01/2016 às 10:34
5

Segue uma possível solução, esta solução se baseia no subscribe do evento progress da XMLHttpRequest utilizada pelo helper $.ajax da jQuery.

var progressBar = $(".progress-bar");

function addProgress(percentual) {
  progressBar.width(percentual);
};

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        addProgress(percentComplete * 100 + '%');
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        addProgress((percentComplete * 100) + '%');
      }
    }, false);
    return xhr;
  },
  type: 'POST', //Or 'GET',
  url: "http://posttestserver.com/post.php",
  data: {
    post: true,
    postfor: 'fun'
  },
  success: function(data) {
    alert(data);
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <br>
  <h4 class="text-center">Importando arquivos</h4>
  <div class="container">
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only"></span>
      </div>
    </div>
  </div>
</div>

segue um exemplo: http://jsfiddle.net/xvv2whsb/

2
  • Você ja testou? testei aqui e o evt não me retorna o lengthComputable, muito menos o evt.total para realizar a divisão pelo evt.loaded que aparece. Commented 7/01/2016 às 12:48
  • 2
    @Highlander adicionei um jsfiddle na resposta Commented 7/01/2016 às 13:01
5

Exemplo que onde a porcentagem acompanha o upload do arquivo:

Necessário incluir esses arquivos:

<script src="../Content/js/jquery.min.js"></script>
<script src="../Content/js/jquery.form.js"></script>  
<script src="../Content/CSS/bootstrap/js/bootstrap.min.js"></script>

Script:

<script>
    $(document).ready(function() {
        var progressbar     = $('#progressbar');
        var statustxt       = $('#statustxt');
        var submitbutton    = $("#submit");
        var myform          = $("#upload");
        var output          = $("#output");
        var completed       = '0%';
        $(myform).ajaxForm({
            beforeSend: function() {
                submitbutton.attr('disabled', '');  //dasabilita o o botao submit
                statustxt.empty();
                progressbar.width(completed);
                statustxt.html(completed); //set status text
                statustxt.css('color','#000');
            },
            uploadProgress: function(event, position, total, percentComplete) {
                progressbar.width(percentComplete + '%')
                statustxt.html(percentComplete + '%');
                if(percentComplete>50)
                {
                    statustxt.css('color','#000');
                }

            },
            complete: function(response) {
                myform.resetForm();  // reseta o formulario
                submitbutton.removeAttr('disabled'); // habilita o submit
                window.location.replace("pagina.php?id=<?=$id?>");    
            }
        });
    });
</script>

Barra de progresso (do bootstrap):

 <div class="col-md-6">
       <label>Arquivo: <b class="red">*</b>  </label>
       <input type="file" class="form-control" name="arquivo" value="" required >
 </div>

 <div class="col-md-12">
    <div class="progress" style="display:none;" id="progress">
        <div class="progress-bar" id="progressbar" role="progressbar"  >
            <div id="statustxt">0%</div>
         </div>
    </div>
</div>
3

Analisando o modelo apresentado de acompanhamento de uma requisição detalhado na resposta do @Marco Aurélio Deleu.

Verifiquei que haveriam algumas desvantagens que ele mesmo citou. Em alguns testes de importações, eram executadas mais de 300 requisições para checar o status de uma requisição principal.

Pesquisei por outros métodos e encontrei um que segue um consumo menor de recursos, e permite um controle mais fácil não necessitando de um arquivo adicional para acompanhar o status, sem simular também o setInterval para analisar de x tempos qual é a porcentagem do progresso.

Esta técnica resumidamente permite com a utilização de buffering o retorno de dados (porcentagem do progresso) enquanto é executado o processo principal, isentando a necessidade de requisições em paralelo.

Então vamos lá, a minha ideia é usar buffer(ob_start(),ob_flush(),flush(),ob_end_flush) do PHP com onprogress do ajax, abaixo um exemplo simulando uma importação com progress-bar:

Exemplo:

JS:

var progressBarGeral = $("#geral");
var progressBarAtual = $("#atual");

$.ajax({
     type: 'POST',
     url: 'importador456.php?&acao=importacao',
     xhrFields: {
        onprogress: function (e){
           var data = e.currentTarget.response;

           if (data.lastIndexOf('|') >= 0) {
              var val2 = data.slice((data.lastIndexOf('|') + 1));
              var val = val2.split("-");
              var numProgressGeral = parseFloat(val[1]);
              var numProgressAtual = parseFloat(val[0]);

              progressBarGeral.width(numProgressGeral + '%').text(numProgressGeral + '%');
              progressBarAtual.width(numProgressAtual + '%').text(numProgressAtual + '%');
           }
        }
     }, success: function (data) {
        console.log(data);
     }, error: function (data) {
        alert(data.responseText);
     }
});

PHP:

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: application/xml; charset=utf-8");

ob_start();
set_time_limit(0);
$arr = array(50000,50000);
$a = 0;
for ($j = 0; $j<=1; $j++):
   for ($i = 0; $i<= $arr[$j]; $i++):
      echo '|'.(($i * 100) / $arr[$j]).'-'.(($a * 100) / ($arr[0]+$arr[1]));
      usleep(1);
      ob_flush();
      flush();
      $a++;
   endfor;
endfor;
ob_end_flush();

HTML:

<label>Progresso Geral</label>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" id="geral">
    <span class="sr-only"></span>
  </div>
</div>
<label>Progresso Atual</label>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" id="atual">
    <span class="sr-only"></span>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .