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

13. Setting up Reverb

Source code

Episodes

Your progress

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

Join or sign in to track your progress

Transcript

00:00

Just in case you're new to reverb, let's go ahead and get broadcasting set up within Laravel and get our reverb server running so we can get on with the real time functionality in the rest of the course. Okay.

00:10

So by default, Laravel does not come with broadcasting functionality. We need to manually install this. To do this, we just use PHP artisan install and broadcasting. When we hit this, it's going to do a couple of things.

00:22

The first thing is create up a broadcasting config file. It's also going to publish out a channels root file, which we'll be modifying soon. It's then going to prompt us. Do we want to install Laravel reverb?

00:34

In our case, we do. You can use any real time server you want with this functionality, but reverb is super simple, particularly on a local environment to get set up. So of course we're going to say yes.

00:45

Once that's done, that will have created now an echo.js file, which is Laravel echo, which is what we're going to use on the client side. We're going to install all of the node dependencies that we require now, rather than doing this manually.

00:58

So everything is set up for us. Okay. Now that's done. Let's just take a quick look around at what's happened inside of our app.

01:05

If we open up our EMV file, you'll notice that when we look at our broadcast connection, this has been changed to reverb. And if we search for reverb, you can see that some sensible defaults have been added for our reverb server.

01:17

Now, all of this config is for when we broadcast a message from our server to our reverb server. And then we can pick this up on the client side using echo. That's why we have a bunch of Vite values exposed here so they can be read.

01:33

And we know that we're connecting to the right server. So if we open up the file browser here, let's go ahead and look at what else has changed. So over in our roots, we now have a channels file, which has created one

01:45

for us, but we're going to modify this. And we'll also have a inside of our resources directory. JS. We'll have echo dot JS.

01:55

So this is Laravel echo, which we'll use on the client side to connect to our reverb server, to listen in for any events. Now, the good news is we don't need to change any of this stuff on a local machine. So we can just leave everything as it is now start up our reverb server and start

02:13

to broadcast any messages that we need. So let's go ahead and start up our server. Cause we're going to need that running for the rest of the course, and then we're good to go.

02:21

So to start a reverb server, we're going to go ahead and run PHP arts and reverb star. And for the purpose of just checking that the right messages are coming through, we're going to use the debug option.

02:33

We can run it without that. And in production, you wouldn't have debugging enabled, but for us, we are going to go ahead and have that. So now our reverb server is running.

02:42

We're going to open up a new tab for any commands that we want to run. But we're going to leave this hanging. So when we get to broadcasting messages, these run through our reverb server and we can pick them up on the client side with Laravel echo.

02:54

Okay. That's it. Reverb is installed. Let's get on with our real time stuff.

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!