Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

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

Episodes

0%
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

Episode summary

In this episode, we're handling broadcasted messages in our app's message store, and making sure everything works smoothly—especially with pagination.

We start out by pushing new messages received via broadcast just like we do when a user submits one by pressing enter. We create a method in our message store called pushMessage to handle this, so all new messages—whether coming from the user or broadcast—go through the same process. After making sure the structure of the broadcasted data matches what our app expects, we test it out and see that it's working.

But there's a subtle issue! As we scroll up through our paginated messages and load new pages, we notice that duplicates are starting to appear. This happens because when we add a new message to our stack, then fetch another page, the overlapping message gets pulled in again. To solve this, we simply pop the last message off our stack every time we push a new one in, which keeps everything in sync and prevents duplicates.

In short, by tweaking how new messages are handled and popped from the stack, we get a nice, clean, real-time messaging experience, even when dealing with chat pagination and broadcast events.

Episode discussion

No comments, yet. Be the first!