Build a Realtime Chat with Laravel, Vue and Pinia
Playing
01. Introduction

Episodes

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

Transcript

00:00
In this course, we're going to build out a real-time chat interface with Laravel, Inertia, and Vue while using Pinya as our state management. This is going to work really perfectly with this because we need to keep track of all of this state, push things, update things.
00:16
And we need to do that in two places, one for when we write a message and one for when a real-time message comes in. And we can share all of this state between all of the components that we have on the page that we're going to be building out through the course.
00:29
Okay, so let's take a look at a demo of this and then we'll go ahead and start to build this out. So the first thing that we'll notice is there's quite a few messages in here, but we are only loading the first 100.
00:41
If we go ahead and scroll up, you'll see that more get loaded in. We don't want to load in potentially thousands of messages all in one go in this chat. So we're going to be using network requests to load more, push them to our store,
00:56
our pina store, and then have them shown as well. We'll keep everything nicely up to date as well. So let's go down to the bottom of here and just write in a message. And as you can see, as you'd imagine, this pushes this to the stack.
01:09
I've got another user logged in here and you can see that this was also pushed as well. So obviously it works both ways between all connected clients and everything stays up to date. We're also looking at showing who's online.
01:21
So if I go back here, you can see that Mabel has been removed from this list. Now she's not in this room. And if we head back over, sure enough, she's joined again. This will happen for everyone who is authenticated and in this particular room.
01:34
Now we can have other rooms as well. So for example, we could head over to a completely different room. Mabel is the only person in this room now. So obviously this doesn't get pushed here and the users online list has changed too.
01:46
So there's plenty to build up in this course. One of the things is this text area here, which might seem quite simple, but actually what we want to do is have the ability to have multi-line messages when we press shift, but we also want to just send this when the user hits enter.
02:02
So I can go ahead and type in a message and hit enter. We know that works, but I can also press shift to go down to the next line and continue my message if I need to. And all of that, of course, is handled with a simple view component
02:14
that we'll be building out. Another thing that we probably didn't catch here is that we have the ability to see who is typing. So if I go back over to this inertia room, let's head back over there,
02:25
and I just start typing here, you can see a little typing indicator shows for all of the users who are currently typing. So we can see that. And again, that will all be handled within this text area component.
02:36
We'll fire off an event when the user is typing, when they're not typing, and we'll update everyone who is in that room. Okay, so now that we've seen how this works, let's go ahead and build out this multi-room chat with inertia, view, and pina as our state management.
21 episodes•1 hr 41 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!