Programmiererforum

Ich habe eine Livewire-Komponente, die ein Video in Teilen auf YouTube hochlädt. Während des Hochladens möchte ich den Fortschrittsbalken im Frontend aktualisieren, indem ich Livewire-Ereignisse für jeden hochgeladenen Block aussende. Das Problem besteht jedoch darin, dass alle ausgelösten Ereignisse erst am Ende der Funktionsausführung empfangen werden und nicht in Echtzeit, während der Upload voranschreitet. Warum passiert das und wie kann ich es beheben?
[img]https://i.sstatic.net/9Y82LwKN.png[/img]

Hier ist ein vereinfachtes Beispiel meiner aktuellen Implementierung. Die Komponente (YoutubeVideoUploader.php):
class YoutubeVideoUploader extends Component
{
public function uploadVideo()
{
for($i = 0; $i < 10; $i++) {
$this->videoUploadProgress = $i;
$this->dispatch('uploadProgress', ['progress' => $i]);
Log::info("uploadProgress: " . $i . "%"); // this works well
sleep(1);
}
}
}


Blade-Vorlage (youtube-video-uploader.blade.php):





document.addEventListener('livewire:init', () => {
Livewire.on('uploadProgress', event => {
const progress = event[0]?.progress ?? 0;
// init hours, minutes, seconds..
console.log(`[${hours}:${minutes}:${seconds}] uploadProgress event:`, progress);
});
});