Build a Multi-room Realtime Chat with Livewire and Reverb
This episode is for members only

Sign up to access "Build a Multi-room Realtime Chat with Livewire and Reverb" right now.

Get started
Already a member? Sign in to continue
Playing
08. Broadcasting and pushing new messages

Episodes

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

Transcript

00:00
Before we go ahead and look at this scroll issue, let's first of all tackle
00:03
our real-time broadcast of any new messages that come in. So I've gone ahead and created out another user account in an incognito window, so we can work with these independently. And of course, the goal here is to type something
00:18
like we can see here and have it automatically appear over here. OK, so the first thing we want to make sure is that we're running our real-time server. You can see that we're already getting a few events rolling, but make sure we are running that server before we do anything.
00:34
The next thing is to create out an event that we can broadcast. So let's create out a standard plain old event within Laravel, and then we will go ahead and change this so we can broadcast it to our server and get it picked up on the client side.
00:49
OK, so we're going to make out an event. We're going to call this message created. So same as we did internally within Livewire, let's create that out. Let's open up that message created event
01:02
and just take a look at this in case you're new to events. So this is pretty plain by default. If we head down, the broadcast on method is already defined for us and it allows us to push this to a certain channel.
01:17
And that's really important because remember, we're working with multi rooms. If we were just building one single chat room, we could just broadcast this on a single channel and it would work really nicely. But we need to think about how we're broadcasting this and where we're broadcasting it to.
01:34
So we haven't defined out the channel yet, but let's figure out the name of the channel that we want to actually broadcast to first. So you can add this as anything, but I'm going to say chat, meaning the overall thing, room and then dot and then the name of the room.
01:50
So in here, we need some sort of room name. It's going to look like this one, two, three, depending on the ID of the room. So let's leave that there just for now. And let's look at how we broadcast this event first of all.
02:03
And we'll ignore this just for now. OK, so the first thing that we're going to do is implement should broadcast now. Now, there's two different ways that you can do this. You can implement should broadcast,
02:15
which will tell Laravel that this needs to be broadcast to our WebSocket server. But that will put it into a queue by default. We don't want to do that. We want to immediately broadcast this rather than queue it up
02:27
because messages need to instantly appear. So we're going to implement should broadcast now. And now when we broadcast this event or dispatch this event, it's going to be sent over to our WebSocket server.
02:41
So before we look at our channels, let's look at where we want to dispatch this from. That's going to be over in our room show component where we create the message inside of this submit method. So in here, we're going to broadcast a new message created event.
02:58
And really importantly, we're going to chain on to others. We don't want this broadcast to ourselves because our component deals with pushing our own message. We just want to broadcast this to everyone else in the chat room.
03:12
OK, let's go ahead and try and create a message and actually see what happens. So we are going to just type in anything in here. And that looked like it worked. Let's open up our server here and have a look.
03:25
So it looks like at the moment, nothing is really happening. So let's go ahead and define out a new channel with broadcast and channel. And we're going to call this chat.room, same as we defined in our event. And then in here, we're going to have a placeholder for the room ID.
03:43
So let's go and create our closure for this. And for now, let's just return true and just say that we're authorized to access this. There are no rules in the application that we're building of who can access what channel. But if you did want to, you could add some logic in here
03:59
to stop a user listening on a particular channel. OK, so now that we've got this, we know that over when we create this event, we need the room to be able to broadcast on that specific channel. So we're going to pass through the room to message created.
04:18
Let's open this up and just define this out in our constructor. So we're going to have a room available now as a public property inside of this class. And then down here, we can just add on that we want to broadcast to chat.room. and then the ID of the room.
04:38
So we've defined a channel that we can listen on. We've defined an event that broadcasts to that channel. Now we just need to figure out how to listen to that channel. Let's go ahead and just send another message in here just to make sure everything is good.
04:53
And yeah, that's appearing here. Obviously not here yet. OK, so how do we pick up this channel that we want to listen on? Well, we've defined this as a private channel.
05:04
It doesn't really matter in this instance if you define it as a public or a private channel. Private channels just need the user to be authorized to access this channel inside of here based on this. Now we do want to set this to a private channel because
05:19
we're going to look at presence channels in a second. But let's go ahead and pick this up with Livewire so we can actually get it on the page before we touch any of that. So where do we want to listen for any broadcasted messages on a particular channel?
05:33
Well, we want to do that over in our messages component. Pretty much the same as when we listen to our internal message created event, we want another event to listen on Echo, Laravel Echo. Now remember, we looked at slightly at Laravel Echo earlier.
05:50
This allows us to listen on our WebSocket server and connect to our WebSocket server to listen to anything. But we can do this directly within Livewire without having to really write any JavaScript. So let's create out another method in here,
06:05
which specifically is prepending a message. So we'll give it the same name, but this is from a broadcast. So we're prepending a message locally, but we also want to prepare messages when they come in from a broadcast.
06:19
Now to listen using Laravel Echo, we're going to use on in exactly the same way as we did. But we're going to say Echo and then this is private. So it's a private channel that we want to listen on.
06:32
So we're going to use hyphen private. Then we're going to go and give the name of the room or the channel. So chat.room. and then it's the ID of the room we want to listen on. Now we've got the room in here and what Livewire allows us to do
06:47
is use a placeholder here to access the property or any property or model within this component and then extract out the ID. So this is now going to listen to chat.room.1 if it's one and it's all good. Now the last thing that we need to provide is the actual event
07:04
or the broadcasted event name that we're listening to. We call that message created. So we just need to provide a message created. If this is within a subdirectory,
07:15
you'll need to provide the full namespace to this. But for now, we've just created that directly within our events directory. OK, let's just dive up here and let's grab out the payload that we get through from this event.
07:30
And just dive down on the payload just to see what we get. OK, let's go over and just try this out. I'm going to give both of these a refresh. I'm going to type something in here.
07:39
And there we go. So remember, we use broadcast to others. That won't have affected Mabel. It will only have broadcasted to Alex and anyone else that is in this channel.
07:50
So you can see here we've got room and we've got the ID of the room and all of the details about this room as well. Now, you can customise the payload that gets sent through your broadcasted messages. Now, we don't actually need the room here,
08:07
so we're going to slightly customise the data that gets sent through with this event. Let's do that now. And of course, we actually need the message itself, which we haven't done. So let's go back over to where we are creating out this event
08:22
and let's pass through the message that we actually want to broadcast. That's really the most important thing. We only passed the room in so we knew which channel to broadcast it to. So over in message created, let's go and pull in the message, which will be a model.
08:38
So let's pull that out of our models and call that message. So we've now got a public property, which again, we already know will be sent in the payload. Let's try this one more time. So I'm going to say, hey, and there we go.
08:49
We now have the message with all the details. Now, this isn't great because we don't need all of this data in here. Really, the only thing we need to broadcast is the message itself. And to be honest, we just need the message ID.
09:03
So let's go ahead and change the structure of this so we're not broadcasting too much data. Now, to do this inside the event, we're going to use broadcast with, and this is going to return an array of the structured data that we want to broadcast. So what we could do is just kind of structure this out like we want to see it with a message ID
09:24
in here, and we'll just directly access the message ID. That's all we need to broadcast to be able to pick this up and show it on the page. So now that we've introduced this broadcast with method, let's take a look at the difference. So I'm going to say, hey, in here again, and yeah, there we go.
09:39
We've got much less data, which is much better for our server. And we'll just pick this up now using the same method and push it to the stack. Okay. So let's go back over to our messages component and what do we want to do here?
09:55
Well, we've already got a method in here to prepend a message using the ID, and we've got the ID within the payload. So we can just defer to this method. So prepend message, and we'll just pass in the payload message.
10:13
ID, and that should be enough now to push it locally, but then also push it from a broadcast. Let's go over and try this out. So again, we're not looking at this auto-scrolling just yet. We'll do that in the next episode.
10:26
Let's go ahead and write a message and see what happens. So I'm going to post a message from this side, and there we go. You can see it's appeared over here, and I can do the same thing over this side as well. And it appears for all other clients.
10:40
Great. So we have got now a broadcasted message to everyone. Let's go over and just fix up this text area. So it always scrolls to the bottom.

Episode summary

In this episode, we dive into real-time broadcasting of new messages in our chat app. The main goal is to make sure that when someone sends a message in a chat room, it instantly appears for everyone else in that room without requiring a page refresh.

We start by making sure our real-time WebSocket server is running and then move on to creating a Laravel event called MessageCreated. We talk about how events work in Laravel and why using ShouldBroadcastNow ensures the message gets sent out immediately, without being queued. Then, we set up broadcast channels in such a way that each chat room gets its own channel—making sure messages only go to users in the right room.

Next, we integrate broadcasting into the message creation process, making sure to only broadcast to other users, not to yourself (since your own message is already handled locally). We also look at the channel authorization, set it to private (preparing for presence channels down the road), and show how to customize the broadcasted payload. Instead of blasting all the message or room data over the wire, we trim this down to just the essentials (like the message ID), keeping everything nice and lightweight.

Finally, we connect everything on the frontend with Livewire and Laravel Echo, so messages received via broadcast push straight into the Livewire component—no JavaScript needed! At the end, we see it all working: sending a message in one browser instantly appears in another. Next up, we'll tackle auto-scrolling, but for now, we've got real-time message updates working smoothly.

Episode discussion

No comments, yet. Be the first!