So we are in the final stretch of building this application, which means I took a little bit of liberty to behind the scenes add some styling choices for us when it comes to initializing a chat feature as well as an emoji feature for the live view. And so everything else is going to stay the same, but just so we can dive into the real time aspect, adding all this is client-side for the emojis. And then on the server, it's going to be, if I was to type in a new chat, hello there. It doesn't actually update on another person's end unless you were to refresh, for example. How can we make this live? How can we make this real time? And let's go ahead and do that right now.

How can we make this real time? And let's go ahead and do that right now. So let's start off with the messages. Now the Message model I added to belong to a User and the Message also has a foreign ID for a ListeningParty. So ListeningPartys have their own unique messages. So why don't we create a new event for messages to handle and say, okay, I want to listen for any time a new message has been added. So within Laravel Reverb, this is actually going to be incredibly easy because Laravel Reverb has set up the server for us and we already have that installation and connection.

So within Laravel Reverb, this is actually going to be incredibly easy because Laravel Reverb has set up the server for us and we already have that installation and connection set up within Livewire. And so now we just have to listen to the event and then refresh the component when a new message has been created. And so what we can do is create a new message event. We can say php artisan make:event NewMessage, and then what we're going to do is have this implement the ShouldBroadcastNow class so that when the message has been fired, we want this sending immediately. We don't want to have to put it into a queue because they're going to be firing off pretty

that when the message has been fired, we want this sending immediately. We don't want to have to put it into a queue because they're going to be firing off pretty quick. So this is just the alternative instead of pulling the server every second, five seconds for a new message. So what variables do we need on this event? The first thing we have to think of is we need the listeningParty and we can actually just set the listeningPartyId so that way we can connect it to whatever listeningParty we're listening for. Then we need the message itself.

we're listening for. Then we need the message itself. Why don't we set those and initialize those in the __construct? Why don't we also initiate a new public function broadcastOn, and this is where we can say return a new Channel, and this is going to be a public channel instead of a private where we can set the listening party and we'll append the listening party id here. So we'll bring in that Channel class there. And now let's also initiate a public function broadcastAs, and this is just the name of this real-time broadcast that we're going to use, and that's the new message. So one of the things I created within this chat, if I was to delete my local session

this real-time broadcast that we're going to use, and that's the new message. So one of the things I created within this chat, if I was to delete my local session and refresh the page, we cannot chat unless we log in. So one neat thing that I implemented here is in the login and register pages, we're actually checking to pull the session redirect. And what that is doing is we created a new middleware, this PersistAuthRedirect middleware, saying that if there is a session that has the authRedirect, because a session is only stored one page load, if we went to the register and then we went to the login page, maybe we already created an account, we're just not yet logged in, we're not going to be redirected to the listening party that we want to be.

we already created an account, we're just not yet logged in, we're not going to be redirected to the listening party that we want to be. So this is just a nicety feature so that if I was to click log in, and well, this isn't the login, this is a register page, so I can say already registered, well here we don't have that session anymore, but because of that middleware that we initiated, and in Laravel 11 in the app.php bootstrap, we can append it like this. So now I can log in to my account and automatically be redirected to the last page. Again, we're storing that in session until it's either overwritten or the User has been logged in. So now I can type.

logged in. So now I can type. And we can see our own messages just because in the show.blade.php, we're returning them with public function with, which is saying when the component is reloaded, we're going to grab all of those messages in order by created_at and ascending. All that we need to do with this message event handler is say when a new message happens and we can broadcast that when someone types a new message, when we run the new message event or public method within Livewire, then we're just going to listen for that. So in this sendMessage, why don't we now return an event and we want to say in the new message event, we're going to pass the listening party ID and then this message.

So in this sendMessage, why don't we now return an event and we want to say in the new MessageEvent, we're going to pass the listeningPartyId and then this message. Okay, that's looking good. We need to bring in this new MessageEvent. Now Livewire gives you a method called refresh that you can call to refresh the component at will. So Livewire has two ways of listening for events in real time. You can use an attribute over a public function. So if I want to listen for an event and then run the sendMessage function, in addition to attributes, we also can initiate a public function, get listeners array and what, oops,

So if I want to listen for an event and then run the sendMessage function, in addition to attributes, we also can initiate a public function, getListeners array and what, oops, right here, public function. And what this will do is we're going to return an array of listeners that we want to listen for. And that is going to then have an inline function to say what public function method do we want to call? And we're going to use this because then we can call the refresh method on the Livewire component. So we can say echo listeningParty.listeningParty.id.

component. So we can say echo listeningParty.listeningPartyID. And we're listening for that new message that we created. And now we can have the refresh method automatically be run. So what this is doing is it's setting up a listener saying that we want to listen on the listeningParty.listeningPartyID event. And that's the new message event that we set up here in this new channel. We're broadcasting as that new message, which would be this event here. And then we're running the Livewire method refresh, which just refreshes the component. In this case, re-grabbing all of the messages so that we can push them into the components.

And then we're running the Livewire method refresh, which just refreshes the component. In this case, re-grabbing all of the messages so that we can push them into the component's view. So this is going to look a little bit squished, but this one is not logged in and this one is logged in. So now we can see the real-time effect happen. So we have a new message and I can just say, hi there, Lyricasts. And it looks like this refreshed automatically, but let's see, hi there, folks. And it doesn't look like that's working. Let's take a look.

And it doesn't look like that's working. Let's take a look. Ah, yes. So we have the listeningPartyID being inserted here, which means we need a dot after the comma to say we have this listeningPartyID and we want to run the new message that is going to be this channel here and our broadcast event. So while this is going to be pretty squished, you can see here that this right side is not logged in. It's in a completely different browser and this side is logged in with the User. So if I was to chat here, hi there, Lyricasts, we see it automatically append on the right.

It's in a completely different browser and this side is logged in with the User. So if I was to chat here, hi there, Lyricasts, we see it automatically append on the right side. So now we have this real time broadcasting. And again, all we're doing, which Livewire makes incredibly easy, is when we are listening for this event, we're just refreshing the component because we have all the data that we need in that components array. Next one, we add real time event listening and broadcasting for this emoji display right here.

here.