Протестировав это становится понятно, что этот скрипт отобразит только отправку браузером, а отправляет все 5 мб фото он практически мгновенно и одномоментно.
То есть реальной картины пользователю, сколько ждать пока сервер получит данные и ответит, этот скрипт не даст.
А остальное реальное время отправки файла (по проводам наверное) до ответа сервера как прикинуть? Сколько ждать пользователю пока сервер ответит? Как делается прогресс-бар, который отобразит реальное приблизительное время ожидания?
Не знаю даже как сформулировать для гугла вопрос, подскажите куда рыть). Спасибо.
lutskboy
Сколько ждать пользователю пока сервер ответит?
зависит от вашего скрипта обработчика
обычно он с картинки уменьшенные копии делает и мб вставляет в бд запись
а ето доли секунд.
что тут ждать то
AlenDelan
да, вот именно, скрипт-обработчик на сервере тоже работает доли секунд,
я и говорю, что на форме, сразу после события submit, при тестировании, все байты отправляются мгновенно (это я увидел запустив скрипт который выше). Потом проходит секунд 10 прежде чем сервер ответит (что файл принят и скопирован).
То есть, еще раз, нажимаем submit, объект xhr со всеми его событиями при аплоад отрабатывает практически мгновенно (все, xhr сказал что он все байты отправил), потом ждем секунд 10-15-20 (когда файл большой, мегабайт 5 к примеру) и потом уже приходит коротенький ответ сервера что все ок, файл получен. То есть вот эти 10-15-20 секунд и есть реальное время ожидания при аплоад и непонятно как их измерить-прикинуть. И как строить прогресс-бар, на основании чего, ведь xhr все отправляемые байты уже выплюнул до начала этих 10-15-20 секунд.
lutskboy
если у вас ничего там на сервере не делается то 10-15-20 секунд не должно быть
а если так то когда файл загружен можно вывести гифку или надпись типа
файл успешно загружен на сервер. идет его обработка…
AlenDelan
да ничего на самом сервере не делается 10-15-20 секунд, там файл обрабатывается мгновенно.
Но реально, временная схема выглядит так, еще раз:
— делаю по кнопке отправку формы с файлом (фото 3 мб например);
— тут же, мгновенно, объект xhr сообщает в консоли что он выплюнул все 3 мб из 3 мб;
— жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу — жду меньше, больше файл по весу — жду больше).
… не смогу поверить что у вас файл 3 мб даже при очень хорошем интернете отправится за секунду,
danforth
Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера. Если задача «долгоиграющая», например выгрузка какая-то, можно сделать отдельный URL и UUID у задачи, по урлу можно получить current, total, percent, а на фронте рисовать прогресс на основании того, сколько бекенд уже обработал. То что у вас сервер 20 секунд что-то делает, фронтенд никак не узнает о том, сколько ещё осталось, если вы не научите фронтенд узнавать это отдельно, делая запросы.
———- Добавлено 30.03.2020 в 19:00 ———-
AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?
AlenDelan
AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?
делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
LEOnidUKG
— жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу — жду меньше, больше файл по весу — жду больше).
в этом примере ничего нового нет, просто рюшечки добавлены, а суть та же
———- Добавлено 30.03.2020 в 22:31 ———-
AlenDelan: делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
потестил большее кол-во раз, и создается очучение, что симуляция 3G затрагивает только симуляцию (замедление) отображения переданных байтов, в то время как ответ сервера уже готов и пришел, и ждет пока эта симуляция закончится.
danforth
AlenDelan: о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
А что с файлами делается? И что за бекенд у вас? Если nginx — то он сначала буферизирует запрос, затем передает его на php. Если что-то другое, то может быть потоковая обработка: пока файлы шлются (медленно), они обрабатываются (тоже медленно), и в итоге последняя долетевшая пачка байтов быстро обрабатывается, и отдается ответ.
AlenDelan
danforth: Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера.
начинаю думать что на всех реальных проектах сделана именно такая тупая симуляция… что вот-вот «щас все будет».
AlenDelan
Куча примеров в интернете про прогресс-бар upload файла, но реальной картины пользователю такой скрипт не даст, итак, примерный скрипт из интернета:
есть форма с <input type=»file»>
function upload(file) {
const xhr = new XMLHttpRequest();
// по событию progress логаем байты
xhr.upload.onprogress = function(event) {
console.log(‘Отправлено на сервер’ + event.loaded + ‘ байт из ‘ + event.total );
}
// настройка
xhr.open(‘POST’, ‘upload.php’);
// пристраиваем отправляемый файл
const formData = new FormData();
formData.append(‘userfile’, file);
// отправка
xhr.send(formData);
}
Протестировав это становится понятно, что этот скрипт отобразит только отправку браузером, а отправляет все 5 мб фото он практически мгновенно и одномоментно.
То есть реальной картины пользователю, сколько ждать пока сервер получит данные и ответит, этот скрипт не даст.
А остальное реальное время отправки файла (по проводам наверное) до ответа сервера как прикинуть? Сколько ждать пользователю пока сервер ответит? Как делается прогресс-бар, который отобразит реальное приблизительное время ожидания?
Не знаю даже как сформулировать для гугла вопрос, подскажите куда рыть). Спасибо.
lutskboy
зависит от вашего скрипта обработчика
обычно он с картинки уменьшенные копии делает и мб вставляет в бд запись
а ето доли секунд.
что тут ждать то
AlenDelan
да, вот именно, скрипт-обработчик на сервере тоже работает доли секунд,
я и говорю, что на форме, сразу после события submit, при тестировании, все байты отправляются мгновенно (это я увидел запустив скрипт который выше). Потом проходит секунд 10 прежде чем сервер ответит (что файл принят и скопирован).
То есть, еще раз, нажимаем submit, объект xhr со всеми его событиями при аплоад отрабатывает практически мгновенно (все, xhr сказал что он все байты отправил), потом ждем секунд 10-15-20 (когда файл большой, мегабайт 5 к примеру) и потом уже приходит коротенький ответ сервера что все ок, файл получен. То есть вот эти 10-15-20 секунд и есть реальное время ожидания при аплоад и непонятно как их измерить-прикинуть. И как строить прогресс-бар, на основании чего, ведь xhr все отправляемые байты уже выплюнул до начала этих 10-15-20 секунд.
lutskboy
если у вас ничего там на сервере не делается то 10-15-20 секунд не должно быть
а если так то когда файл загружен можно вывести гифку или надпись типа
файл успешно загружен на сервер. идет его обработка…
AlenDelan
да ничего на самом сервере не делается 10-15-20 секунд, там файл обрабатывается мгновенно.
Но реально, временная схема выглядит так, еще раз:
— делаю по кнопке отправку формы с файлом (фото 3 мб например);
— тут же, мгновенно, объект xhr сообщает в консоли что он выплюнул все 3 мб из 3 мб;
— жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу — жду меньше, больше файл по весу — жду больше).
… не смогу поверить что у вас файл 3 мб даже при очень хорошем интернете отправится за секунду,
danforth
Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера. Если задача «долгоиграющая», например выгрузка какая-то, можно сделать отдельный URL и UUID у задачи, по урлу можно получить current, total, percent, а на фронте рисовать прогресс на основании того, сколько бекенд уже обработал. То что у вас сервер 20 секунд что-то делает, фронтенд никак не узнает о том, сколько ещё осталось, если вы не научите фронтенд узнавать это отдельно, делая запросы.
———- Добавлено 30.03.2020 в 19:00 ———-
AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?
AlenDelan
делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
LEOnidUKG
Чудеса. Что-то у вас не так работает.
Тут например есть более расширенный пример:
http://know-online.com/post/javascript-indikator-zagruzki-faila
AlenDelan
Тут например есть более расширенный пример:
http://know-online.com/post/javascript-indikator-zagruzki-faila
в этом примере ничего нового нет, просто рюшечки добавлены, а суть та же
———- Добавлено 30.03.2020 в 22:31 ———-
делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
потестил большее кол-во раз, и создается очучение, что симуляция 3G затрагивает только симуляцию (замедление) отображения переданных байтов, в то время как ответ сервера уже готов и пришел, и ждет пока эта симуляция закончится.
danforth
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?
А что с файлами делается? И что за бекенд у вас? Если nginx — то он сначала буферизирует запрос, затем передает его на php. Если что-то другое, то может быть потоковая обработка: пока файлы шлются (медленно), они обрабатываются (тоже медленно), и в итоге последняя долетевшая пачка байтов быстро обрабатывается, и отдается ответ.
AlenDelan
Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера.
начинаю думать что на всех реальных проектах сделана именно такая тупая симуляция… что вот-вот «щас все будет».