Real-time with Nuxt and Laravel
Playing
03. Setting up broadcasting

Episodes

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

Transcript

00:00
Next up, we're going to get broadcasting functionality installed within our API. So head over to the API project. And the first thing that we're going to do is use PHP Artisan to install our broadcasting functionality. So let's go ahead and run this command.
00:15
And we'll be asked if we'd like to install Laravel Reverb. That's what we're using for this course. You can change this over and it would work in more or less the same way. If you were using a third party service like Pusher,
00:26
you're just going to need to tweak over some of the configuration. OK, let's go ahead and install Laravel Reverb. And once that's done, it's going to ask us if we want to install the node dependencies required for broadcasting.
00:39
Now, in our case, because we're working with an API, there's no need for that because all of the node dependencies like Laravel Echo and Pusher are all going to be installed on the client. So normally, if we were working with Laravel, we would say yes here.
00:52
That would create an echo instance for us in our JavaScript files. But we don't need to do that for our API. So let's go ahead and hear no. OK, so now that we've done this, let's take a look around our Laravel app
01:03
and actually see what's happened here. So the first thing you'll notice is that over in the environment file, let's just check this out first. The broadcasting connection here will have been set to reverb automatically.
01:15
If we go over to our reverb stuff just a little bit further down our environment file, you can see that this has created some sensible defaults for us. Now, we don't actually need to change anything over here unless we're deploying this to production.
01:29
So we have a reverb app key, which is going to be really important for the client. We have the host and the port, which is also going to be important for the client. So we'll be using these values over on the client to connect to the reverb instance that we're running.
01:44
We don't need to worry about the secret because we're going to be triggering real-time events from our backend, our API via an HTTP request to one of the endpoints in our API. That will use the secret to broadcast to our reverb server.
01:58
And our client will use the reverb key and the host and port to go ahead and pick this up, probably the app ID as well. OK, so now that this is working, let's go ahead and run our reverb server. So we're going to go ahead and run php artisan reverb start.
02:15
Now, really importantly, along the way, if you're following this, you might want to use the debug option if you don't see any of your events coming through. So I'm going to go ahead and run with debug just in case. OK, so now that we've done this, we've got a reverb server running,
02:30
which we're going to want to leave running and we can create a new tab to run any other commands. What we can now do is start to connect up on our client to the reverb server using these credentials
02:42
and start to receive events from our server. So remember, our API is responsible for pushing any events to our reverb server and our client is responsible for listening to them events. Let's go ahead and get Laravel Echo set up within our Nuxt app.

Episode summary

In this episode, we're diving into setting up broadcasting in our API. We start by heading over to the API project and running a PHP Artisan command to install the broadcasting features. You'll see a prompt asking if we want to install Laravel Reverb—which is what we'll use throughout the course. If you prefer something like Pusher, you could swap it out with just a few configuration changes.

Next, we talk about node dependencies. Since we're working with an API, we don't need to install the JavaScript dependencies (like Laravel Echo or Pusher) here, because those will live in the frontend (client) instead. If you were working on a full Laravel app with blade views, this step would be necessary, but we're going to skip it.

Once the install is done, we peek into our Laravel environment file and see that the broadcasting connection is set to Reverb automatically, along with some sensible defaults. There's a new app key, host, and port that will be important later when we connect our client to the Reverb server. No tweaks are needed unless you're pushing to production.

With the environment set up, we go ahead and start the Reverb server using the php artisan reverb:start command—feel free to add --debug if you want extra output to help with troubleshooting. Now, the server is listening for events, and it's ready for our Nuxt client to connect and start receiving real-time updates from the API. In the next step, we'll hop over to our Nuxt app to get it listening for those broadcast events using Laravel Echo.

Episode discussion

No comments, yet. Be the first!