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
08. Authorization and deleting posts 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 delete posts we need to be really careful about this because remember we're working in batches so we're going to have to find that post that we want to delete
00:09
and then remove it from the batch now our reactivity is going to take care of re-rendering everything for us but then a little bit later we're going to look at how this actually slows stuff down so the first thing to do is go ahead and
00:24
implement authorization because we really need to make sure that we are only allowed to delete our own posts so we're going to go ahead and make out a policy here and this is just going to be a post policy if you've worked with policies before let's open this up and have a
00:38
look we want to just implement a bunch of methods in here that work out whether we can do something or not that's pretty much it so i'm going to go ahead and create out a delete method in here we will get the
00:51
authorized user or the authenticated user into here and then we'll get the thing that we need to check against and that's going to be our post so we just need to return a boolean in here so we want to make sure that the user's id matches the post's user id
01:07
and that means that they own the post and then they can delete it so we'll go ahead and register this policy over in our auth service provider so we'll go ahead and give our post model in here and hook that up to our post policy and now we can just do this within
01:22
our blade templates and also within livewire as well so if we head over to our post item let's add some buttons down here that we can output so let's create a unordered list and a list item actually let's keep this simple and just keep this as a div
01:39
for now and inside of here we'll have a div to delete this that's just going to be a button so we'll just say delete and let's just change this over to have text indigo 500 and we'll go ahead and set these to sit next to each other
01:58
because we're going to have our edit button in there as well so item center and we'll set a space x of two okay let's see what this looks like really quickly and there we go we get our delete button now if we take a look at this mabel hasn't posted anything yet but i'm going
02:12
to say something in here obviously we get this over here but as this user we shouldn't be able to see this delete button so what we can do is just wrap this entire thing using can the directive within blade up not update delete and we can just
02:30
reference the post so we can end the can down there and then only when that hooks up to that delete method that we created in our policy and the post matches the user this will be shown so if we come over now you can see that
02:43
mabel sure enough sees delete she doesn't see delete for our posts and everything's looking good so that's the first step to authorizing this on the client side but then of course when we actually click through here with a wire click to delete a post
02:59
we need to authorize it within our live wire component as well so let's actually just call this delete because it's part of this post component and let's pass the post id down into there and we just want to know whether we can delete that so over in our post
03:13
item now we can create out a delete method so let's create that delete method and of course we get the post id through into here so we're going to handle the actual deleting of the post within this component but then we need to tell our parent
03:28
list of posts our post index that this has been removed so this will handle actually deleting the post but then we need some way to actually remove this from the list so let's go and first of all authorize this so we'll go ahead and use the built-in authorized method
03:44
with live wire we'll choose the method name and we will just reference the post itself inside of here then we're going to go ahead and find that post using the post id that we get into here and then we're just going to delete it so that will actually remove that
04:00
from the database now thinking about this we don't actually need to pass this post id into here because we could just reference the post itself because we're always in the context of a post within these individual items and we're not sending this post id
04:14
anywhere i'm actually going to get rid of this because it doesn't really make sense since we're working in the context of a post so i'm just going to invoke the delete method here if we were broadcasting this id to somewhere else
04:25
we would want to authorize it and pass in the post id okay so we're deleting the post and then we want to go ahead and dispatch the fact that this has been deleted within our live wire component so we're going to go ahead and use dispatch and we'll say post dot deleted
04:41
and we will pass in this post id so this will actually remove this from the database and we can verify that but by just deleting a post over here i've clicked that nothing's happened yet because nothing's reacting to this but when i refresh this sure enough it's gone and when i refresh
04:57
it over here it's gone as well so now our job is really just to take this event and remove it from the list so over in our post index we can do pretty much what we did here for append post and we can delete the post instead so let's go and create out a delete post
05:14
method in here we know that we're getting the post id into that and we want to listen to the post deleted event so let's pull this down here say post deleted and let's fill this in now because we don't have
05:29
a nice array of just individual ids and these are all within chunks what we need to do is iterate over the chunks find the chunk that contains the id and then remove that id from that chunk that we find so let's go ahead and start to iterate
05:44
over each of our chunks so for each this chunks as we'll pull out the index because we're going to need that and then we'll call each of these chunk now inside of here we want to do a search so this is going to be our search condition and if we do
05:59
find it really importantly we want to break out of this for each loop we don't want to keep looking through once we found it if this was in the first chunk we don't want it to roll through and look in the second chunk so what is this condition well it's just
06:11
going to be a search that we compare to false and check that it's not false so we're just going to use a standard php array search in here so array search will take in the thing that we're looking for the needle
06:28
and then the haystack is the chunk so we can assign this the key which will give back the key that the chunk is in so that will obviously be zero one two three so look for all the chunks try and find that post id within the chunk that we're iterating through
06:43
if this doesn't equal false this method will this function will return false if it can't be found then we'll just not do anything and we'll look in the next chunk otherwise we'll get the index basically this key is the index out of there and then all we need to do
06:57
is just unset it from here so let's unset this chunks and we go into the index of that chunk that we are currently within as we're searching and the key will be the position of that post id within that chunk
07:15
so we just remove that from the chunk that we found so as we're iterating we know which chunk we found it in we know which position that post id is in and then we just unset it so this should just work so we're listening for this post
07:28
deleted event and this should just remove it from the list so let's go over and just delete this one and sure enough it goes delete this one sure enough it goes now when i refresh this obviously that is going to disappear but we now need that real-time event to
07:44
get this working and that's going to be pretty straightforward because we've already done a very similar thing just here and it's going to look pretty much exactly the same so i'm actually going to copy this down we've not even created the event yet but this is going to be called post
07:57
deleted it's going to work in exactly the same way and we're going to say delete post from broadcast we will get exactly the same post id in and here we're just going to call delete post instead so really just repeating the same thing
08:09
to call a local method that we've implemented for our own use but coming from our payload from our real time so let's go ahead and create this event and we should be done so let's go and make out an event in here and of course we're going to call that
08:23
post deleted and if we head over to our post deleted event let's start to change everything around so the channel is going to be that public post channel and we want to make sure that we accept
08:37
into here a post id and really importantly we want to make sure we implement that should broadcast interface okay so where do we trigger this from well when we delete the post so let's head over to our post item
08:53
and in here we will broadcast a new post deleted event so that gets sent through our web sockets we're going to do that to others because remember we're deleting locally and we will pass this post id through into that great okay let's try this out so we're going
09:13
to go over here and delete let's just put a new one in here and just say delete me that comes through for both of these but when we delete it it gets deleted for all our clients as well

Episode summary

In this episode, we focus on two key things: setting up proper authorization for deleting posts, and ensuring that when posts are deleted, everything updates in real time for all users.

First, we tackle authorization—making sure only the owner of a post can see the delete button and actually delete their own posts. We start by building a post policy with a delete method, registering it with Laravel's Auth Service Provider, and adding some simple Blade directives to hide the delete button if the logged-in user doesn't own the post.

Next up, we wire up the delete action in our Livewire component. We make sure the backend checks permissions as well (not just the frontend!), actually remove the post from the database, and use event dispatching to alert our post list when something’s been deleted. Since our posts are displayed in paginated chunks, we also walk through the logic to efficiently find and remove the right post from the right chunk, making the UI update reactively.

Finally, we kick things up a notch with realtime events. When a post gets deleted, we broadcast a PostDeleted event over websockets. This way, if anyone else is online viewing the post list, their screen updates instantly—no need to refresh!

By the end, you’ll have post deletion working securely and in realtime, all cleanly handled across multiple clients. It’s a great step in building robust, collaborative features!

Episode discussion

No comments, yet. Be the first!