Job Batching Progress with Laravel
This episode is for members only

Sign up to access "Job Batching Progress with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
16. Polling to show status

Episodes

0%
Your progress
  • Total: 1h 37m
  • Played: 0m
  • Remaining: 1h 37m
Join or sign in to track your progress

Transcript

00:00
Let's first of all, update our entire state here.
00:02
So if the server is provisioned, we show a message and then otherwise we're going to show our progress list. And we're going to set that to poll for a certain amount of milliseconds to update the state.
00:12
So the first thing that we want to do is come over to the server model. So let's open that up and let's go ahead and create out a helper to check if this is provisioned. So we'll say is provisioned.
00:24
And really this is just if the date is not set. So we'll just say not is null and this provisioned at, and of course you can change this up to whatever you are doing with your models. Okay.
00:37
So now that we have this helper, we're going to go ahead and just add an if statement in here and say server is provisioned. If it is provisioned, we'll go ahead and do something. Otherwise we will do something else.
00:48
And in actual fact, I'm going to end the if there, and I'm just going to duplicate this down just to keep things tidier rather than having an else. So let's end the if there, pull this up and let's go ahead and add just a little div in here with some styles.
01:05
So let's set a background to grade 200, make that rounded large, set some padding and set the text to center. And in here we'll just say server. And then output the server ID in here as well.
01:20
Okay. Let's just update this to save not provisioned. And once the server does get provisioned and we're polling, let's just go over to this and set this in here to the current day and time.
01:30
We should see this. Great. Okay. So now let's look at going ahead and pulling this to get it to update.
01:38
So to do this within LiveWire, we are going to wrap this entire thing in a div. This is incredibly straightforward to do. And of course you could use WebSockets to update this in real time. But I think pulling this, particularly if you're using a LiveWire makes sense.
01:53
We're going to say wire pull. Then we're going to give a timeout. Now you can choose anything you want in here. We'll leave it as the default.
01:59
I'm just going to say every 300 milliseconds, or we could even change that, bump it up, depending on how accurate you want this to be in real time to 500 milliseconds. So now that we're doing that, if we head back over and unprovisioned this,
02:14
first of all, we're going to create a completely new server in a second. What's happening in the background now is this is going to just keep pulling this to update it. That's probably too fast actually.
02:24
So let's go ahead and set this to every two seconds. That kind of makes sense. It's entirely up to you what you do. Okay.
02:30
So now that this is updating every two seconds, what this means is that when we create the server and we have our queue running, this is always going to be kept up to date. Let's go ahead and just get rid of everything that we've already got in
02:41
the database and redirect over to this and see what happens. So if we head over to the database, I'm going to get rid of, let's get rid of our server tasks first. Get rid of our server, get rid of our job batches.
02:54
And let's start from scratch. So now when I click create server, as long as the queue is running, so let's just make sure we are running our queue somewhere over here, PHP artisan queue work, we should see this update.
03:08
So if I click create server, that's now pulling in the backend. We know that our state is changing in the database. So when this iterates through, it's going to update this every two seconds and you can adjust this if you want.
03:21
So let's wait. I think this was five seconds. This one. And there we go.
03:27
That's been changed. And again, we're just going to keep waiting for this and there we go. So we've got a slight sort of delay in the polling because it's two seconds and we'll see some overlap, but as you can see, once that gets to the end,
03:40
the data changes and the entire view here is refreshed and we end up with our server. And then when we refresh, of course, there are no tasks it's provisioned. So we just see any of the details about our server or whatever you were running jobs for.
03:55
So super simple with Livewire just to go ahead and pull this to update it. I'm actually going to decrease this very slightly as well. So there we go. We're now getting a fresh up-to-date list of all of the status of every single task.

Episode summary

In this episode, we tackle how to use polling with Livewire to automatically show the status of server provisioning. We start off by updating our UI to check if the server is provisioned, using a little helper function right in our model. If the server isn’t ready yet, we show a progress list; otherwise, we display some details about the server.

Next, we jump into making the status update in real-time (well, sort of real-time!) by leveraging Livewire’s wire:poll directive. With a simple attribute on a div, we can make Livewire hit the server every few seconds to fetch the latest state. We play around with different polling intervals (from super fast 300ms to a more sensible 2 seconds), so you can see in practice how often you want the UI to update.

To demonstrate, we walk through adding a new server and show how the polling picks up the changes as the background provisioning job runs. Once it’s done, the UI updates automatically and displays the final server details. It's a nice way to keep users informed about progress—without needing to refresh! At the end, we tidy up and adjust our poll interval to balance responsiveness and server load.

All in all, this episode shows just how easy it is to keep your Livewire UIs fresh and dynamic by polling the backend and reflecting state updates live for your users.

Episode discussion

No comments, yet. Be the first!