Level up with a premium membership

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.

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.

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.

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.

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.

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.

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.

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.