Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Dear everyone,
I've been building an application lately and I am facing quite an interesting but challenging aspect in my opinion. I will try to explain it as clear as possible:
When visiting the index page of the application, a visitor (no authentication is required) can upload a file, and will then be redirected to the /files/{id} URL. This URL returns a blade view with the file model as data. It's a traditional show method on the controller.
A job will be queued that does an API call to an external service (within the payload, a callback URL (defined in my api routes file) is included. A call from the external service to my API will change the data of the file record that was created earlier.
What I want to achieve is that the data is updated real time at the visitor's screen. I know this can be achieved using broadcasting.
But how should refresh the data at the client? Should I use Vue.js component inside of my show.blade.php view, that upon receiving the broadcasting signal does an API call to a files/{file} endpoint through Axios to refresh the data displayed? Wouldn't this make the files/{file} web route and blade view redundant?
Or should I make a simple script on the show.blade.php view that upon receiving the broadcast signal forces a real page refresh?
I'm a bit confused on how to approach this. What do you all recommend or how would you do this?
What I want to achieve is that the data is updated real time at the visitor's screen.
How exactly does this update look like, is it just a single field/flag or more complex? As you already suggested you can listen to the channel for that specific upload and change whatever you want asychronously as soon as you receive the event.
Thank you for your response!
The file model can have 2 statuses: in_progress and completed.
The API call to the external service should return a 200 response: this will set the status to in_progress at my application backend.
The update is simply a status badge update. However, the API call from external service to the callback URL will set the status to completed and also fill in a results property on the file model. This should show as well.
@larstw Okay, then you could simply broadcast an event after the external API call is done for that specific upload and when the callback URL is invoked. Could be the same event (e.g. UploadStatusUpdated) containing the data you need to update your view.
@corvs Yes. But how would I update the data on the view? Use a Vue component that does an Axios call to a the files/{file} endpoint? And I would get the file ID from the current URL which is the show web route for that file? Or force the page refresh without Vue?
@larstw Your event already contains the data required to make the necessary updates to your view (status and results). No need to call another endpoint. How you do those updates is up to you. Are you already using some kind of JavaScript framework? You could use plain JavaScript, jQuery, Vue, ....
I would use Vue.
But what If the user refreshes the page? The updated data should still be there.
Please or to participate in this conversation.