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

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.
14 episodes1 hr 23 mins

Overview

Join a room and start chatting! This course covers building a multi-room text chat app with Livewire using Laravel Reverb for real-time updates.

Using presence channels and client-to-client whispering, we’ll also show who’s online, and who’s currently typing.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!