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
07. 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
When we write a message in the text area and submit this, remember the text area and the submit functionality exists within the entire component. We want the messages component to pick this up and the same thing for when we get to broadcasting this in real time as well.
00:17
So pretty much by doing this functionality, we can just listen a little bit later on for any broadcasted messages and reuse what we've done. OK, let's take a look at how this is going to work. So when we submit a message here, we want to emit an event. This is just going to be a live wire event that we can use to pick something up.
00:37
So let's go and say this dispatch and let's give this a name. Let's say message dot created. Now, the payload of this event that we're doing internally, we want to be the message ID that we have just created and saved out. So now that we've got this, we can pick this event up in our messages component over here and we can push to this stack of messages.
01:05
OK, let's go ahead and do this now. So we're going to create our method called pretend. Message and this, we can now listen to that event that we've just created. So let's go ahead and create out an on attribute, which will listen to any events that we fire within our application. And then we know that the payload is the ID of the message.
01:29
So now when we create a new message, that event is fired, picked up inside of our messages component and we get the ID. Let's die dump on the ID and see what we get. OK, so I'm going to say, hi, enter. And yeah, sure enough, there we go.
01:44
From our messages component, we're now getting the ID of the message. What we can now do is push to our stack of messages that we are storing up here. And we can do that because it's just a Laravel collection and Laravel collections have a push method. So we're going to access the messages collection.
02:03
We're going to push something to that. And because we're just dealing with the ID here, we're just going to introduce an additional query to pick this up. So we're going to go into models and message and we're going to find that ID and then we're just going to push it to the stack. Now, in here, of course, we also need to think about our egoloading.
02:26
So we're also going to egoload in the user so we don't get too many queries. So let's go over and see the difference. Now, we've got a scroll issue here, which we're going to fix up in the next episode. Ideally, as new messages roll in, we want the scroll to always be at the bottom.
02:42
And there's a trick that we can use to do that. We'll look at that next. OK, so I'm just going to say hello, hit enter. And yeah, as you can see, a new message rolls in.

Episode summary

In this episode, we're working on getting new chat messages to show up instantly in our messages component when they're submitted. When we write something in the textarea and hit submit, we trigger a Livewire event called message.created, passing along the ID of the new message we just saved.

The messages component is set up to listen for this event. Once it catches the event (and gets the message ID from the payload), we fetch the full message from the database — making sure to eagerly load the user so we don't trigger extra queries — and then push this message into our existing messages collection. Thanks to Laravel's collections, this is super straightforward, using the push method to update the stack of messages in real time.

At the end, we test it out: typing a new message and hitting enter makes the message appear right away in our chat UI. We also notice a little scroll issue — new messages don’t automatically scroll to the bottom — but don’t worry, we’ll tackle that in the next episode!

So, the main idea here is setting up the real-time interface for posting messages by smartly using Livewire events and collections, laying the foundation for broadcasting messages to multiple users later.

Episode discussion

No comments, yet. Be the first!