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
12. Liking and broadcasting

Episodes

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

Transcript

00:00
Okay so let's implement the like count now and how we increment and broadcast that and it's pretty much going to be the same thing. So if we head over to our editor let's go and just design this
00:13
up really really quickly. So let's close everything off here and let's head over to our post item. So let's close off what we have here and we know that we want this to be next to what we have here so that's probably going to go down there and let's just put likes in there for now just so we can see that and there it is. Okay so let's just change this around to have a shrink of zero and
00:39
we'll say flex items start and let's say self stretch because we want this to be the same height as the other items that we have in there because we want this to sit in the middle. Okay so inside of here let's just keep this really really basic for now and create out a button and inside of that button it will be the like count for the post and let's say posts a post and likes and then let's
01:04
just style this button up really quickly so it looks a bit more clickable. So we'll set a padding on the x-axis to two and then a padding on the right of three in fact we'll do that on the x-axis and then we'll set a padding on the y-axis of one that will do. Okay so in here we're going to say item center we want to make sure that is flexed we'll set the background to slate 100
01:28
and we'll set this to rounded large let's just keep it like that for now you can add an svg icon in there a little bit later if we need to and we might do that. Okay so when we click this what do we want to do well we just want to hook this up to a like method within this component so let's open up our post item in here this is going to be really straightforward because if we implement our
01:50
like method and then we just say this post increment which is a eloquent method on likes that will just increment this in the database and save it for us so now if we head over to here we can click on this sure enough that increments now it updates for us of course because when we click on this we are reloading this component because we have called a method let's just check out our
02:14
network tab just to make sure this looks all good and if we click on this yep not too many updates we'll scroll down to another one down here and let's click on this one and check it out and yeah again we're just updating that individual component which is what we need okay so let's go ahead and broadcast this now so we can get this nicely working in real time and of course we're
02:36
just going to go ahead and make out an event and we're just going to call this post liked let's go over to post light and fill this in we've already seen this so this channel again is going to be post but we're going to be listening on an individual post channel so we don't globally listen to this and update all of our components so this will be on post dot and this post id let's
02:59
make sure we bring that into our constructor post id and then last but not least let's go ahead and make sure we implement should broadcast in here great okay so now when we actually like this we can go ahead and broadcast this so new post liked and we'll do that to others because obviously this will re-render for us post light takes in the post id and that should be pretty much it we can now
03:28
listen to post light so over in our post item here this is where we're going to listen to this so we can do exactly the same thing and we listen to post light and we refresh the component so let's just sort that out and there we go that should refresh now this isn't an ideal solution because what we're doing here is we're listening to whether something is liked which is technically just
03:53
increasing a number and we're refreshing the entire component when that happens we'll leave it like this for now we might change this over a little bit later for a more front end based solution but at least for now we're only just refreshing that individual component so there's not too much of a speed issue okay so now we've got that new event in there let's click and you
04:13
can see that this is kept up to date in real time and once again if we open up our network tab and we inspect this we're just updating that individual component and we're not refreshing an entire list of things just for this and again it's going to work in the same way because of the way that we've set this up and we're listening individually to components if we come down and like one of
04:34
these that will be updated in real time as well we've got a huge amount of records here so let's scroll down to one of these here and i think that's this one here and there we go you can see that regardless of where we are on the page this still works and again over on this side as well we're only going to be making a very small live wire re-render for each individual component as well

Episode summary

In this episode, we dive into implementing the like count feature on posts, making it interactive and real-time. We start by heading back to the code editor to set up the UI for the like button, positioning it neatly within each post item. A bit of styling is added to make the button look clickable and visually appealing (with the promise of maybe adding an icon later).

Next, we hook up the button to a like method so that clicking the button will increment the like count for that specific post in the database. We verify that the count is actually updating and check the network activity to confirm that only the specific post component is re-rendering—so we're not needlessly refreshing the entire page or component list.

To make the like count update in real time for everyone else, we then set up broadcasting with a PostLiked event. This is scoped to individual posts (instead of globally), so only the relevant post updates. We modify the component to listen for this broadcasted event and refresh itself when received. While refreshing the whole component might not be the most efficient solution, it's simple and works well for now; a more frontend-driven update could be considered later.

Finally, we test everything out, confirming that the like counts stay in sync in real time across browser tabs or users, and only the relevant post's data is being updated. Success—all the like updates are fast and smooth, even when we have a bunch of posts on the page!

Episode discussion

No comments, yet. Be the first!