Building Reactive Realtime Applications with Livewire
This episode is for members only

Sign up to access "Building Reactive Realtime Applications with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
11. Editing posts and refreshing components in realtime

Episodes

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

Transcript

00:00
So by the end of this episode, we will be able to edit the post, but also see these edits reflected on all of the other clients. So I've brought up the Mabel account here so we can see these changes. OK, so let's head over to our editor and let's go over to our edit post form here.
00:18
And we're going to switch this over to edit instead of create, of course. Now, the first thing that we really need to do is we just open up our browser again. When we hit edit, we need to get this original state into here and get this working. So to do this, we are going to head over to our edit post component.
00:36
Now, we know that we're accepting the post into here. So let's go ahead and type in that post here. We're going to bring in the mount lifecycle hook and that's going to fill in the title for the body for us that we need. So we also are going to have a body in here, which will be validated in exactly the same way.
00:58
And in here, we want to pre-fill that so we can hook it up with wire model. So in here, we can just use this fill really, really convenient to use this. And then we just pass in the data that we want to fill. So from the post that we've got already, we'll say only body.
01:16
So what this will do is it will take an array. And in this case, it's just an array of the body and it will fill it into what we have here. And that means that over in our edit post template now, when we hook this up with wire model to the body, it will just automatically be filled. So over to the browser, give this a refresh, hit edit, and there it is.
01:37
So it's always in there and ready to go. OK, so over in edit post, when we do call that edit method, we're just going to do pretty much what we would expect here. The first thing that we want to do is authorize this just to make sure that we can actually edit this. So let's go and pass edit in and we will pass this post in.
01:55
Again, we're working in the context of the post itself. So we need to make sure we can update that. We can do validation before this or after this. It doesn't really matter.
02:07
So let's go ahead and make sure we validate this and then we can just bring in a really simple rule for this body. So let's go and add in our rule attribute in here. And that's just going to be required. We won't customize it.
02:19
We'll just keep it like that. So validation is done. Then we just want to update the post. So this post update.
02:26
And then again, we can use the shorthand only to grab just the body out that's been updated. And that's pretty much it. So let's check this out. Let's go over to our browser, hit edit.
02:37
And I'm just going to make a really simple change by adding A on the end. And oh, OK, so this action is unauthorized. Let's check why that might be. Let's go over to our post policy.
02:49
And oh, yeah, we did call that edit. Let's change it to update because that's more in keeping with the framework. And let's try this again. Of course, the label has disappeared now.
03:00
So if we head over to our post item, let's change this to update as well. And we should be good. So let's edit this, add a character, hit edit. That has edited it.
03:13
If I refresh the page, it's changed. We just need to cancel off that editing state now. Now, we know that we do this via the edit cancel event. So what we can actually do is take this event and dispatch this from Livewire.
03:27
And that will be picked up on the front end as well. So over in edit post, once we have edited this, we can just say this dispatch edit cancel. And if we head over here, once we have finished editing this, it will cancel off. Now the issue is that this is not updating.
03:47
Of course, we've already looked at this for other things that we've done as well. We need to make sure that this actually gets updated. So let's look at this locally first of all. So I'm going to go down here and we'll do this just before we redispatch this.
04:02
We're going to go ahead and dispatch another event in here. And let's call this post dot. Now we need to target a specific component to update or a specific post itself to update. Basically when we update something, what do we want to re-render regardless of where this
04:21
is on the page? Well, we just want to render that individual component. We just want to refresh that component. That is pretty much it.
04:29
So we don't want to say that all posts have been updated. We want to target this specific one. So we're going to do post dot X and then say edited or in our case updated just in keeping with this.
04:40
And then we're just going to replace out the ID in here. So this post ID. So now that we've done this, we can in individual components within our post item, we can listen specifically for that post item.
04:57
And that's kind of what we did with our post chunks. So remember over in post chunk, we're listening just on that chunk because we don't want to re-render all chunks, just the one that them things were in. So now that we've done this, we can just go over to our post item and we can listen in
05:14
here for this specific post and then just refresh that component. So to do this, we really just want to refresh the component. So we're just going to add in our listeners property in here and we're going to listen for posts and then remember we have our post in here.
05:31
So post ID and updated and not the most efficient thing, but we can just refresh the entire component because that kind of makes sense. Our whole post has been updated to just refresh it. So this magic refresh method will just re-render that particular component.
05:49
So just to recap before we look at this, only dispatch this or dispatch this, but only listen to it for a particular post and when a post is updated, refresh the component. So let's go over and try this out. So I'm going to edit this one, change this to C and there we go.
06:06
It works. Now, if we take a look at our network tab here, it's going to be a little bit difficult because we've not got a lot of room. Let's change this over again and see what we get.
06:16
We don't get a lot of markup back because we're just refreshing that individual component. Now just to give you an idea of how important this is with reactivity in Livewire, let's go ahead and just do it the wrong way. We can easily switch this back over in a second.
06:31
So let's say that we had a post updated event that we're dispatching. Well, if we go over to here and change this over to post updated and let's just make sure the names match post updated. So I'm just saying what a post is updated and I want to listen to a post updated which
06:47
kind of makes sense and just refresh. Now what this will do is every single post will be listening to this now because we've not targeted it down to a specific post. So if we head over now, make sure we keep our network tab open and we go ahead and edit
07:02
this post. Let's click edit. Now you've probably already noticed there was a slight delay there just because the amount of data we're working with.
07:11
Let's take a look now and you can see that we've got all of these posts now being re-rendered. That's not what we want. So compare this to the markup that we saw before and the response that we got back before when we were just targeting the post itself.
07:25
So I'm going to bring that back and bring that back. And then again, I'm just going to edit this so we can see the difference. So let's edit this here and change this to something else. Hit edit and there we go.
07:39
Much less markup being sent through, therefore it is faster. So when we react to the changes here, we only want to target the individual post. Okay, now that we've done this, it's again pretty straightforward to get this set up for real time.
07:53
So let's go and make sure we've refreshed both of these so they match up and let's create out another event. So let's say php artisan and make event post updated. And again, come over to post updated here and make sure we implement should broadcast
08:16
and then go down and change over this to a public channel, change this over to posts and then when we edit this, so over in our edit post form, we want to broadcast this. So let's do this here, broadcast new post updated, pass through the post ID and then broadcast that to others because we are handling updating this on our own end as well.
08:45
So now that we've got this, really all we need to do is over on the post item to exactly the same thing here, but just target this back from echo. So I'm going to duplicate that down and then in here, we're going to say echo and I'm just going to switch it over to posts and then post updated like we've seen before.
09:05
We've done this elsewhere, just not within a listeners property, but let's just try this and see what happens. So let's head over to here and I'm going to open up, let's just write a post from Mabel so we can open up our networks up here.
09:22
When I edit this, of course we get a network request here because we're refreshing a component, but look at what we're refreshing, we're refreshing pretty much everything here which is not good. So how do we get around this? Well now we're sort of diving into specific listening and specific channels and a channel
09:42
per post. So what we're going to do is head over and change around our post deleted or post updated event. So we're going to set this channel to an individual channel per post and that means that within
09:58
our live wire component, we can target just that individual channel. This does create a few additional channels, but it's not too much of a problem. So post ID and that should now be listening at, we didn't even pass the post ID through, so let's make sure we do that first of all and there we go.
10:18
So we're now listening on a post post ID channel and that means that in here what we can do is listen to post dot post ID for the channel and only listen on that specific channel for that update. So if we head over to the browser again and try that out again, it's a little bit slow
10:38
refreshing with the console open, but that's not too much trouble. I'm going to edit this again and just change this over completely, hit edit, look at the update here that's now only targeted just that individual component. So again we're not re-rendering too much data here and this is going to be much faster.

Episode summary

In this episode, we make it possible to edit a post and have those changes instantly show up for all users, in real time. We start by updating our edit post form so that when we hit edit, the form is pre-filled with the current post content, making editing super user-friendly. We also go through the necessary validation and authorization steps to ensure only the right users can make changes.

Once editing works, we focus on making updates efficient and real-time. Instead of refreshing all posts when one is edited, we wire things up so only the updated post component is refreshed. This means less data sent over the network and a much snappier UI. We demonstrate both the correct approach (refreshing the individual component) and the less efficient way (refreshing all posts) to help you see the difference.

To make things real-time across different clients, we use events and broadcast channels. We walk step-by-step through setting up channels per post, so each post update only notifies the clients who care about that specific post. At the end, you'll see seamless, instant post editing updates that just affect the right part of the page for everyone viewing — perfect for modern interactive applications!

Episode discussion

No comments, yet. Be the first!