Problem: Stale Notification Count0:00
Okay, let's work on updating the notification count whenever a new notification comes in. So this won't update unless we make another request to another page or if we refresh the page. So for example, I'm logged in as another account here. If I were to comment on one of this person's ideas, so let's do this one here. Let's add a comment, okay, post a comment, so it's posted. This should be three, but it won't show up until I either refresh the page or go to a new request. So there it is, three, okay. So traditionally, you might think of using WebSockets to do this, and Laravel does have
Choosing Polling Over WebSockets0:42
So there it is, three, okay. So traditionally, you might think of using WebSockets to do this, and Laravel does have a package named Laravel Echo to make this easier, but it does still require some setup as you have to use a WebSocket server, whether it's on your own or a third-party service like Pusher. Now, for cases like this, when we're just updating a piece of UI, I think polling is the much easier solution. So the way I think of polling is refreshing the page at a set interval, or in this case, refreshing a component. So if you take a look here, Livewire refreshes the component by default every two seconds.
Using Livewire wire:poll1:11
refreshing a component. So if you take a look here, Livewire refreshes the component by default every two seconds. And all we have to do is make use of this wire:poll directive in our root element, and it will do that for us. So you can set the interval to, if you like, if two seconds isn't to your liking, you can make it more frequent or less frequent, or if you want, you can call a method, which is what we'll do here. So let's do this. Let's go into our code here. Let's go to our comment notifications.
Implement Polling in Component1:37
Let's go into our code here. Let's go to our Comment notifications. Let's go ahead and add that wire:poll. And the method we want to call, if you don't remember, we have this method that updates the count. What's it called? getNotificationCount right here. So let's call that method. Every two seconds is the default, which is fine for me.
Verify Requests and Behavior2:04
Every two seconds is the default, which is fine for me. Okay. And that's literally it. So if I refresh this page here, then polling should be active. So if you take a look at DevTools, the network tab, you'll see that every two seconds we get a new request because polling is happening in the background. So Livewire does add some nice features to it. For example, if the tab is not active, then it only sends through about 5% of the request. And there's also another feature where you can only poll elements in view. But for this demo, I'm okay with the default two seconds.
Test Update and Commit3:41
I mean, adding a comment testing polling. And now if I go here, there you go. It updates itself. And that was literally one line of code that we added. Let me just reformat this line here. So yeah, definitely make use of polling in your applications when you just need to refresh the component at a set interval. Let's go ahead and make a commit. This is a short video. This is episode 63.
This is a short video. This is episode 63. git add, git commit. Episode 63, notification, polling.
