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
06. Displaying messages

Episodes

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

Transcript

00:00
Let's create out a new component for our messages.
00:02
And this is really important, because when we receive an event from our broadcast eventually, or when we just receive an event from our form to say that this has been submitted,
00:13
we want to go ahead and update the list of messages. So we want this to update to include any new messages that we have. So putting that in a separate Livewire component
00:22
makes sense, so we can control that. OK, let's go ahead and build out a Livewire component for this. Let's put this in the same directory, but we'll just put this inside of the root of our chat.
00:34
And let's just call this messages. So save that out, and let's replace all of this out with that Livewire component. So we're going to say chat.messages,
00:46
and there is our messages component. Now, for the messages to be displayed, we're going to re-fetch them from the room itself. So we're going to pass through the room
00:57
that we have within our overall room show to this component so we can grab the messages for that room only. So if we head over to the main messages component, let's go ahead and again pull in the room that we have here,
01:14
and we should be good. So that should work. Obviously, we're not seeing anything at the moment, but we can now start to extract all of the messages
01:21
out that we need. Now, we're getting ahead of ourselves here, but we're going to do this in a slightly different way. What we could do is within our messages component,
01:30
just go ahead and access the messages relationship on our room, which we don't even have yet, but we can easily add that. Now, that's not what we're going to do,
01:39
because when we get a new message, either via a broadcast or when the user enters a new message, we want to push to a collection of messages. So let's define this relationship out first of all.
01:53
So let's head over to our room model, which we haven't looked at just yet, and let's just say that this has many messages. So again, a really simple relationship in here.
02:03
So we'll say this has many and message. There we go. OK, now that's done, let's go and look at this collection. So what we're going to do is initially
02:14
store a Laravel collection of messages up here. Then when we mount this component, we're going to fill the messages in using any query that we need to extract these out in any kind of order.
02:29
So let's create out the mount method within lifecycle hook here. We can either directly assign this, or I like to use fill within Livewire to fill this in.
02:40
So we're going to fill the messages property with the messages from the room. So let's say this room messages, and then we're going to add on to our query.
02:50
What this means now is that we've got a collection of messages stored in a property that we can push to, remove from if we need to, and then Livewire will update the template.
03:01
OK, so we're going to say oldest. We want the oldest at the top, and we're going to just grab and limit this to 100 messages initially. And obviously, you can increase that value if you want to.
03:13
OK, so now that we have got the messages in here, we can now access this property directly within our messages template and output all of these messages. OK, so let's keep this fairly simple.
03:27
On the outer wrapper, I'm going to go ahead and set a specific height to this, because we're going to be looking at scrolling and also scrolling in a couple of episodes time.
03:37
We're going to set an overflow wide to scroll. So if this gets beyond the 64 height, it will scroll. And we'll just add a really simple border in here. Let's say gray 200.
03:47
OK, we'll add some other styling to this, like making this rounded. And we'll set a padding on the x-axis of 4, padding on y of 3.
03:57
OK, so inside of here, we're going to have a container which will iterate over all of our messages. So let's space out each of the messages
04:06
that we are going to add in here using the space y utility. And we'll set a padding of bottom of 4 as well, just so the last message doesn't touch too near the bottom.
04:18
OK, so let's iterate over each of our messages. So let's do a for each here on our messages that we've pulled through as message. And let's just dump out the message body just for now.
04:31
OK, let's go over. And there we go. Of course, it doesn't look great at the moment. They're both next to each other.
04:36
But we've now got this container. And of course, we can see the messages, which is really important. Now, what we're going to do here is
04:44
create our separate Livewire component for each individual message. And there's a couple of reasons why we're going to do that. The first reason is that when Livewire re-renders this,
04:56
if we have this within its own component and we have a key attached to this, it means Livewire is not going to re-render anything that's not necessary.
05:05
Think about it this way. You could have hundreds of messages inside of the chat. You don't want to re-render every single message on that page.
05:13
You only want to really push and re-render to show a new message. So let's go ahead and create out a new component. So let's make a message component, just a single,
05:23
or you could call that message item. And let's go ahead and output that in there. So we'll say chat message. And what data do we need to pass through to here?
05:31
Well, we need to pass the message itself so we can output any information about it. And really importantly, we want a unique key on here. So Livewire can keep track of what it needs to re-render.
05:42
So we'll just use the message ID. OK, now we've got this component. Let's head over to message.blade.php, style it out, and we should be good to go.
05:52
So again, we'll try and keep this as simple as possible. Let's add flex on here with a space on the x-axis of 3. Here, we're going to have the user's image. And here, we're going to have the message body.
06:04
Let's work on the message body first of all. So we can output the most basic here, which is just the body itself. So let's say message and body.
06:13
And just before we forget, let's go over to that message component that we have created just here over in chat. And let's make sure we're allowing this message to be passed through.
06:26
We've given the same name of our component as we have for our model. So we just need to be careful about what we are pulling in here.
06:33
OK, so just by doing that and then outputting the message body, we shouldn't see any difference. But obviously, we can now update individual components. So let's create out a wrapper in here for the user's name.
06:47
So let's create a div with a class of font bold. And let's grab the user's name from here. So over on our message model, go into the user and grab their name.
07:00
Pretty straightforward. And just for now, we're going to look at this later. Let's just output the full created at date. So let's just say created at.
07:09
We're going to come back to this a little bit later to make this look a little bit nicer. And let's just style this up really quickly with some very basic styles.
07:18
We'll make that text extra small. And for both of these things, we want them to sit next to each other. So let's say flex items baseline.
07:26
So they sit on the baseline of the font. And we'll say SpaceX 2. OK, that should be looking a lot better. We've got the date.
07:33
We've got the message. Let's just really quickly output this user's avatar. And then finally, make sure we're eager loading so we're not running too many queries.
07:42
So if we head over to the user model, we've not done anything with this just yet. But we can very easily just add in a simple avatar method in here, which returns to us the user's avatar.
07:53
I have this in my notes. And of course, you can copy this from the GitHub repository. But basically, we're just going to use a third party service, encode the name, and pass it in, and have that generated for us.
08:05
OK, so for the image then, let's go ahead and style this up. We'll set the source to that image. So let's just change this over to an image tag here. And of course, get rid of that ending.
08:16
We'll set the source here to the user's avatar. So again, go into message, user, and just use avatar. Let's add some styling to this. So we'll set this as a size 12 and round it large.
08:30
And that should be enough to get that working. Great. OK, so we've got our messages. But we're not egoloading anything.
08:38
So just make sure we do that now before we forget. Let's go ahead and pull in debug bar. So let's do a composer require on Laravel debug bar for dev. And once that's done, we should just be able to refresh this
08:52
and see any duplicate queries. Let's give this a refresh and head over to the query section. And yeah, we're not egoloading anything at the moment. But let's do that now.
09:01
So we do that over in our overall messages component. So let's open this up just where we're doing this here. So when we do pull these messages in, we want to make sure that we pull in the user for each
09:13
of these and egoload each of these. And yeah, sure enough now, we are not egoloading. So the more messages that roll in now, we shouldn't see our query count increase.
09:23
Great. OK, so now that we are outputting our messages, let's hop over and look at how when we type something, we automatically push to this stack of messages.

Episode summary

In this episode, we're focused on displaying chat messages in a clean and efficient way. We kick things off by creating a new Messages Livewire component, which is responsible for showing the list of messages for a specific chat room. We talk about why using a separate component makes sense—especially since we'll want to update this list both when a form is submitted and when we receive broadcast events in the future.

We walk through setting up the relationships in our models so that each room has many messages, and then we fetch and display those messages in the component. We do some quick and simple styling to make our messages area look nicer, including scrollable overflow and padding so it feels more like a proper chat.

Then, to optimize performance and make our UI even more modern, we split each individual message into its own Livewire component. This way, Livewire only has to re-render what's necessary (e.g., just the new message, not the whole list), which is especially great when there are loads of messages.

Inside the message item component, we display the sender's name, avatar, the message body, and the timestamp. We show how to generate a user avatar with a third-party service if you don't have profile images. To avoid performance issues, we make sure to eager load user data with messages so we're not hammering the database with unnecessary queries—debugging with Laravel Debug Bar to check our work.

By the end of this episode, we have a nicely structured chat message area that's efficient, good-looking, and ready for enhancements like real-time updates!

Episode discussion

No comments, yet. Be the first!