Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started

Already a member? Sign in to continue

Playing

15. Handling broadcasted messages in our store

Source code

Episodes

Your progress

Total: 1h 41m
Played: 0m
Remaining: 1h 41m

Join or sign in to track your progress

Transcript

00:00

Now pushing messages from our broadcast might not seem that difficult because we've already done it when we enter a message and hit enter. But there's one thing that we need to think about here because

00:12

we are using pagination. Let's take a look now at pushing the message and then we'll see that issue. Okay so we're going to head over to where we're listening to that message created event and of course we're going to call a method on our store to go ahead and push this. Now we're not going to call store message because that's going to store it again. We'll think of another one. So

00:31

let's go and say messages store. Let's call this push message. So we want to pass in the event data which is just that structured data from our API resource and if we come over to our messages store let's go ahead and create this out now. So let's create this here and we've called that push message and let's take that message in and for now just console log that message out. Okay let's go over

01:01

and we'll open up the console here just to test this and we'll say hello and there we go. We get the content of that in there. Now I've just realized we didn't structure this properly in the last episode so let's just do that really quickly now over in the message created event that we created. All we want to do here is rather than just output the id we want to use our message resource because

01:23

we want these to be in exactly the same format. So we want to make this from the message that we get passed in and then we want to cast that to an array and this requires that we pass in the current state of our request. So that should now just broadcast that in exactly the same way as we've seen elsewhere. Let's just try this out one more time and there we go. So we've got the exact

01:44

same structure that we want to push to our list of messages. Okay so now that we have got that out of the way let's look at pushing this in. So again we're going to take our messages and we're going to do exactly the same thing that we did here and we are going to grab the current message and push that in first then we're going to spread out all of the other messages from our state. Now that

02:08

we've got this method what we can do is just use this down here. So we can just say this and push message and we can just pass in the response data here. So whether we post a message or whether one comes in from broadcast is going to do exactly the same thing. Let's go over and try this out. So let's get rid of the console let's type hey and there we go. Great so everything now is being sent

02:32

across clients picked up and pushed to our message stack. Now we're not quite done here because there's going to be a huge issue when we start to scroll up. Let's go ahead and look at that now. So I'm going to go over to the message index controller I'm going to bump this down to say 20 items and I'm actually going to go ahead and truncate all of the messages we already have. Let's get rid of all

02:52

of these and we will save that out so we are completely empty now and let's go ahead and rerun our cedar. So php artisan db seed message cedar wait for that to finish and once it's done let's pull in this new set of messages. Now the problem that we've got is whether we push a message ourselves or whether we get one from broadcast when we look at pagination it's going to reload

03:18

the next page in. Let me show you what I mean. So I'm going to type hey in here now look at the numbers we've got 499 let's scroll up here to the very top and let's just really carefully have a look here you can see that we've got a duplicate the reason that this happens is that when we push onto our message stack and then we reload the next page in when we reload that pagination the pointer

03:42

is going to be set at however many messages that we have pushed so if I were to just give this a refresh and say hey hello we're going to end up with more duplicates so if we just scroll up here this goes to the very top there we go and we've got 4981 4982 and then the same thing again. So the way that we get around this is anytime a new message gets pushed in we want to pop the

04:08

last one off the stack so when we go ahead and reload it will sync up. To do this it's incredibly easy we just want to take our messages state and use pop because this is an array we just pop the last item off the array and we're done so let's go and have a look at the difference now so I'm going to say yo and scroll up and let's wait for them to load in and you can see that these now

04:32

nicely line up there are no duplicates in here and that is exactly the same thing for the broadcast as well if we scroll up you can see that these all nicely line up so just making sure that for every new message that comes in regardless of however many there are we always pop the last one off so we don't end up with these duplicates

21 episodes•1 hr 41 mins•9 months ago

Overview

Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.

We’ll cover:

Using the Intersection Observer API to automatically load previous chat messages
State management with Pinia
Using presence channels to show online users for each room
Client-to client communication to show who’s typing
Using flexbox tricks to keep messages scrolled into view as they roll in

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!