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.

Episode summary

Welcome to the course! In this episode, we take a look at what we're going to build: a real-time chat interface using Laravel for the backend, Inertia for seamless front-end routing, and Vue with Pinia as our state management tool.

We kick things off by demoing the final result. You'll get a feel for how messages load (just the first 100 at first, with more added as you scroll up—so we don't flood the browser with thousands at once), and see how new messages appear in real-time for all connected users. We also handle switching between rooms, show who's online in each room, and manage chat state super efficiently with Pinia.

Plus, there are some neat details we'll dive into as we go, like letting you write multi-line messages with Shift+Enter, sending messages with Enter, and showing real-time typing indicators when users are composing messages. All these features come together in a slick chat experience, and we walk through how they're connected behind the scenes.

By the end of this intro, you're set up and ready to start building your own multi-room real-time chat app, step by step, with modern Laravel and Vue techniques!

Episode discussion

No comments, yet. Be the first!