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
07. Broadcasting new posts

Episodes

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

Transcript

00:00
By the end of this episode, we'll have real-time updates when someone types a message.
00:04
This will be broadcast to everyone else who is currently logged in and on this page, and they will see the new messages roll in. So I have opened up two windows here,
00:13
and I'm logged into two different accounts. I've created another account. So when we type something in here, that should then update on this side.
00:20
Let's get started and see how we can do this. So we are going to, first of all, create an event. So much like we did before, so phpArtisan makeEvent. And this is going to be called postCreated.
00:32
So when a new post gets created, we can broadcast this and listen on all of our other channels or all of our other users. So let's go over to our postCreated event.
00:41
Remember, the first thing that we need to do is make sure we implement shouldBroadcast. So let's implement shouldBroadcast in there. We're going to go down because we know
00:49
that this is a public channel, and we're going to rename the channel to Posts. Now, the beauty of what we're doing here, because we're working just with batches, with IDs,
00:59
we don't need to broadcast the whole object. We don't need to relook the object up. We just need to push the ID in. So we're going to get into this a post ID.
01:09
So we're going to receive into this event a post ID. That post ID is then going to be broadcast to all of the other clients that are listening, and we'll just push that post ID
01:18
into the stack of the first batch. So now that we've got this event, where do we dispatch this from? Well, we dispatch this when we create a post,
01:27
and that is over in our createPostLiveWire component. So it doesn't really matter where we dispatch this inside of here. We could do this last.
01:34
We could do it just up here, but as long as we know the ID, that's what we need to do. So let's go and just do this up here, and we're going to broadcast, like we saw before,
01:45
a new post created event, and we're going to pass the post ID into this class that we've just created. Now, we're not going to add two others just yet,
01:54
because I'm going to show you how this works, but let's take a look at picking this up and seeing what we can do with it. So where do we want to listen to this event?
02:02
Well, we want to listen with our main component here, so we can then push it on, like we did with this form that we've got. So if we head over to our post index component,
02:13
we know that we are listening for post created here, and then we prepend this post onto here. Now, what I'm going to do, we could combine these, but I'm going to create out a separate method in here,
02:24
which is specifically for when we receive a broadcast. So I'm going to create out a method here called prepend post from broadcast, and of course, you can call that whatever you want.
02:34
Into that, we get a post ID, so it's very, well, it's exactly the same as this method, but if you needed to do anything specific when you receive a broadcast,
02:43
it's better to have a separate method for this. So we're going to listen to that broadcast event, like we've already seen, and that is using echo from our posts channel,
02:53
and that is post created. So that will give us that post ID through into here. In fact, it won't, it will give us our payload. I guess that's the whole reason
03:01
why we're splitting this out into a different method. So we'll get a payload in here. Let's just die dump on that payload, just so we can see what we get.
03:08
So if we come over to here, let's go and just put something in here, and you can see that payload gets pulled in, and we get the ID in here.
03:17
So we need to extract that post ID out, and then go ahead and push it to the list. Now to do this, it's pretty simple, because we already have our prepend post method.
03:27
So we just want to access the payload, access the post ID, and just forward it over to the method that we've already got, which will push it to the top.
03:35
So let's try this out. We'll come over to our browser. I'm going to give both of these pages a refresh, so we get connected up,
03:42
and I'm going to write hello, post this, and there we go. Sure enough, that gets pushed into here. Now, what we want to do is broadcast only to other users, because remember, we have our own functionality
03:56
when we're on the page within a Livewire component, and we're listening for that just here. We don't want to receive this event in, and this event in, and do this twice.
04:05
It doesn't matter that we're doing it twice, because we're working with unique IDs, but we kind of want this just to work for other clients. So to do this, what we do is we chain on to others,
04:16
and that will not broadcast that event to us. It will just broadcast it to every other person who's on this page. So the functionality here won't be any different.
04:24
Let's just check this out. We'll type something in, post it. It gets broadcast to everyone else, so we could have 100 other people on this page,
04:32
and they would all receive this new message in, but it just won't be broadcast to us, because we're pushing this by ourselves. So that is how we do this.
04:41
Very, very easy. Once we've got our WebSocket server set up, we just broadcast an event with LiveWire. It's very easy to just listen to that event
04:49
and just push this data run. So now that we've done that, let's look at some more complex scenarios, like deleting a post and editing a post.

Episode summary

In this episode, we're taking our app to the next level by making it update in real-time when someone creates a new post. If you've ever wanted your users to see new posts appear instantly—without refreshing—you're in the right place!

Here's what we do: We start by creating a new event called postCreated that gets fired off every time someone makes a post. Then, using Laravel's broadcasting abilities, we send this event out to everyone else who is currently on the page. To test it, we even open the app in two different browsers with different accounts, showing off how new posts pop up everywhere in real-time.

We break down exactly how to set up broadcasting, including which methods to use and how to make sure only other users receive the live update. (You don't want to see your own post twice!) We also clean up the code a bit by handling these broadcast events in their own methods—so you can easily customize what happens when posts come in.

Finally, we wrap it up with a quick demo and highlight how easy this is once the basics are in place. With this broadcast system working, you're ready for even more live features, like deleting or editing posts in real-time. Stay tuned for those in the next episodes!

Episode discussion

No comments, yet. Be the first!