Build a Multi-room Realtime Chat with Livewire and Reverb
Playing
02. Setting up Laravel Reverb

Episodes

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

Transcript

00:00
Let's get a fresh app set up and we'll go ahead and get Broadcasting and Laravel Reverb installed at the same time with a single command. So let's use Laravel new to create out a project called Larachat. Of course, call this whatever you want.
00:15
We're just going to use the default Laravel Breeze functionality with Livewire. We can choose whatever we want here. I'm going to choose the Vault Class API. We don't care about dark mode.
00:26
We'll just choose PES for testing and we'll go ahead and hit no for the Git repository and just wait for this to prompt us about our database. OK, so we're going to choose MySQL here and we want to go ahead and run the default migrations as well. Once this finishes, we'll get this open in our editor and we can get started. OK, that's finished. Let's go into that Larachat directory and go ahead and open this up with our text editor.
00:50
Once that's open, we are going to first of all, just run npm run dev to keep our assets compiling. We're going to create out a new terminal tab to run reverb when we get this installed and then just a third one so we can issue any commands. So I'm using Laravel herd and you can see here that this is already available at the Larachat.test domain. Let's go ahead and register a user quickly just so we can be booted into the dashboard and we'll go ahead and create out some pages a little bit later.
01:21
OK, great. So we're in our dashboard and we're all set up. Now, let's go ahead and get the broadcasting functionality with Laravel installed alongside of reverb. Now, before we do that, let's just take a look around our application. So if we head over to our EMV file and we search for broadcast connection, you can see that at the moment this is just set to log.
01:43
So any events that we create in our application and broadcast will just be dumped to our Laravel log. Now, that's not what we want and we're not actually going to have to configure this. The install broadcasting command will do this for us. What you'll also notice is over in the resources directory under JavaScript, we just have two main files app.js,
02:03
which requires bootstrapping and we've got bootstrap as well. So pretty clean at the moment. Let's go ahead and look at what happens when we issue this command to get broadcasting set up. So we're just going to run PHP artisan install and broadcasting.
02:19
So let's go ahead and hit enter on that. And you can see it prompts us whether we want to install Laravel reverb. There are a bunch of options for servers, WebSocket servers that you can use. So you can install broadcasting functionality without installing reverb.
02:35
But of course, here we're looking at reverb, so we're going to say yes. OK, so let's wait for that to finish and then let's take a look at our application and see what we need to do. We're also going to hit yes to building up our node dependencies required for broadcasting as well. OK, so now that that's done, let's first of all head over to our EMV file.
02:53
And you can see that already the broadcast connection here has been set to reverb. Let's also search for reverb inside of here. And you can see that a couple more options have been added here. We've got a reverb app ID, key, secret, host port and scheme.
03:09
Now, because we're working on local, we don't need to adjust any of these values. We could go ahead and set the host to larachat.test since that's the domain that we're working on. But it doesn't really matter too much. We'll have a separate course on deploying this to production if you wanted to do that a little bit later on.
03:25
We also have an exposed set of these credentials with Vite. Let's take a look inside of our JavaScript directory that we saw earlier. You can see that a new echo file has been created, which is required at the bottom of our bootstrap file. This goes ahead and creates a new echo instance using reverb to broadcast or in our case, listen.
03:47
This is the client side stuff. So essentially what we're going to do is run a server. We're going to broadcast an event because we have that broadcasting in our EMV file set to we just find that again, reverb. That's going to broadcast the event within Laravel to the reverb server.
04:06
And then on the client side, we can use echo to pick up any of the events and all the credentials match here because they're just taken from EMV. So we're not going to have to configure anything here. This should just work out of the box. OK, so next up, let's take a look at our channels routes file.
04:27
So this is where we're going to define the channels that we want to broadcast on. Now, Laravel gives you one by default here, which we're not going to use. We want to broadcast on a specific channel for the room that we're creating. So if we join a room called Laravel where we can talk about Laravel, that will broadcast to that specific channel.
04:48
If we have another one dedicated to Livewire, it will only broadcast to that channel. So we're going to need to adjust this later as well. Now, lastly, we have some new config in here. So we have some reverb config, which contains stuff that we don't really need to worry about at the moment.
05:05
So we've got the default reverb server, which we have set to reverb just here. This is just all of the reverb stuff that we have in our EMV. So we don't really need to modify any of this unless we have any specific requirements. But we have this server set up here.
05:20
We also have the option to have multiple apps. So at the moment, we just have one app, but this can handle multiple apps if you need it to. So you can jump into the config if there's anything you need to change a little bit later. But for now, we're all good.
05:34
OK, so we've seen what the broadcast and reverb install has done to our application. Let's actually get this server up and running. So what we're going to do is run PHP artisan reverb star. And if we run the help command, there's a couple of things that we can do here.
05:49
We can set the host port and host name on the fly, which, again, we're not interested in. We're just working locally. The one thing that we are going to do is set debug because then we will see any of the messages that are being broadcast. We're going to see any of the clients that are connecting.
06:05
We're going to see any of the whispers or the presence channel stuff come through as well. So we're going to run PHP artisan reverb star and we're going to pass the debug option in. And that is now started. So we're going to leave this running throughout the course as we're building stuff up.
06:22
And we should start to see stuff trickle in here when we start connecting up. OK, so we've installed broadcasting. We've got Laravel Reverb installed and running as a server. Now we can just start to build out everything that we need, broadcast events and listen to them on the client.

Episode summary

In this episode, we’re setting up a fresh Laravel app and getting Laravel Reverb ready for real-time broadcasting. We walk through installing everything from scratch using the laravel new command (our project is called "Larachat," but you can name yours whatever you like).

After spinning up the new app, we install basic authentication with Laravel Breeze and Livewire, choose a database (MySQL), and get migrations running. Once the project is open in our editor, we fire up npm run dev to get assets compiling and set up multiple terminals: one for the server, one for Laravel Reverb, and another for general commands. We even quickly register a user just to make sure everything’s working and end up on the dashboard.

With the app bootstrapped, we use the handy php artisan install broadcasting command to install Laravel’s broadcasting features and Laravel Reverb at the same time. The process updates our environment variables and JavaScript files automatically, including setting up the Reverb connection and adding an Echo client for the frontend so we can listen for broadcast events.

We briefly check out the important config changes and explain the basics of channel routing for broadcasting to rooms (think chat rooms per topic like "laravel" or "livewire"). Finally, we actually start the Reverb server using the php artisan reverb:start --debug command. With everything running, any new broadcast events or presence channel activity will show up in real time in our terminal.

So by the end of this episode, you’ll have Laravel broadcasting and Reverb installed, configured, and running locally—ready to build out real-time functionality in your app!

Episode discussion

No comments, yet. Be the first!