Symfony — Докер, Nginx. PHP-fpm Загрузить индикатор загрузки не работает
Я использую docker-compose (php 7.2 ОТ phpdockerio / php72-fpm: последние)
services:
webserver:
image: nginx:alpine
nginx.con
user nginx;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /dev/stdout main;
#sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
server {
listen 80 default;
client_max_body_size 208M;
access_log /var/log/nginx/application.access.log;
root /application/public;
rewrite ^/index\.php/?(.*)$ /$1 permanent;
try_files $uri @rewriteapp;
location @rewriteapp {
rewrite ^(.*)$ /index.php/$1 last;
}
# Deny all . files
location ~ /\. {
deny all;
}
location ~ ^/(index)\.php(/|$) {
fastcgi_pass php-fpm:9000;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
fastcgi_index app_dev.php;
send_timeout 1800;
fastcgi_read_timeout 1800;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
include fastcgi_params;
}
# Statics
location /(bundles|media) {
access_log off;
expires 30d;
try_files $uri @rewriteapp;
}}
}
я создаю тестовый контроллер для обновления индикатора выполнения
/**
* @Route("/progressTest", name="progressTest")
* @param Request $request
* @return \Symfony\Component\HttpFoundation\Response
*/
public function progressAction(){
ob_start();
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$total = 10;
for($i=0;$i<$total;$i++)
{
$percent = intval($i/$total * 100)."%";
sleep(1); // Here call your time taking function like sending bulk sms etc.
echo '<script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:'.$percent.';background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">'.$percent.' is processed.</div>";
</script>';
ob_flush();
flush();
}
echo '<script>parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed</div>"</script>';
return new Response('OK '.$i);
}
запустить его в шаблоне
<div class="col-md-12">
<div id="progressbar" style="border:1px solid #ccc; border-radius: 5px; "></div>
<div id="information" style="border:1px solid #ccc; border-radius: 5px; "></div>
</div>
<iframe name="loadarea" src="{{ path("progressTest") }}" id="loadarea" style="display:none2;"></iframe><br />
но есть ожидание до конца цикла, а затем получить
<script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:0%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">0% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:10%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">10% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:20%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">20% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:30%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">30% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:40%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">40% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:50%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">50% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:60%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">60% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:70%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">70% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:80%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">80% is processed.</div>";
</script><script>
parent.document.getElementById("progressbar").innerHTML="<div style=\"width:90%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\"> </div>";
parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">90% is processed.</div>";
</script><script>parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed</div>"</script>OK 10
Как я могу обновить прогрессбар?
Решение
Скорее всего, вам не хватает заголовка X-Accel-Buffering, как описано в Потоковый ответ раздел официальной документации. По сути, ваш FPM ничего не буферизует, но NGINX делает, так что в конце вы получите все в большом количестве.
Попробуйте установить этот заголовок в no и увидеть это помогает.
На заметку, возвращающую <script> метка вроде этой кажется бегущей с ножницами. Я бы посоветовал вам полностью изменить его и позволить клиентской стороне выполнять графические манипуляции исключительно в процентах.
Другие решения
Других решений пока нет …