This episode is for members only
Sign up to access "Real-time with Nuxt and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
04. Using Laravel Echo with Nuxt
Episodes
01. Introduction
02. Realtime Basics with Nuxt and Laravel
03. Private channels
04. Broadcasting to others
Transcript
00:00
When we installed broadcasting earlier it prompted us whether we wanted to install the dependencies into our Laravel app. Now we didn't want to do this because we're working with a Nuxt client here. We want Echo on the client so we can start to connect to any channels and listen for events. So let's go ahead and run through the steps that we need to do that now.
00:18
Okay so over in our client the first step is to install Laravel Echo with npm. So we're going to install Laravel Echo and alongside of this because Laravel Echo would use the pusher.js api to get this working with reverb we also need to pull in the pusher.js library. So both of them have been installed but how do we get this set up? Do we come over to our app component create out a
00:42
script section up here and start to set this up? Well probably not. Since we're working with a Nuxt it's going to be incredibly easy to just go ahead and create out a plugins directory and build our own plugin. So let's create a plugins directory in the root of our project and let's go ahead and create this out now. So we're going to create this out using TypeScript so don't worry too much if
01:02
you're not familiar with TypeScript it shouldn't be too tricky and we're going to give this plugin a name. So we're going to call this Laravel Echo you can just call it Echo if you want but really importantly we're going to end this with the client prefix. So that will create out a let's just have a look here LaravelEcho.client.ts file. The reason that we've ended with a postfix client is because
01:24
we only want this to work on the client. There's no need for real-time events to come through on the server so this is purely a client plugin. Now just before we register this plugin let's go ahead and create out the scaffolding for this. So we're going to go ahead and export from here define Nuxt plugin and inside of the callback here we can go ahead and just do anything. For now let's just
01:44
go ahead and console.log plugin just so we know that this is working and let's go ahead and register this over in our nuxt.config.typescript file. So to do this we just create out a plugins array and we just reference here any of the plugins that we've created. In our case it's LaravelEcho.client we don't need the ts extension here that will be implied. Okay so now that we've done this that
02:07
plugin has been created if we hop over to our app and bring up our console sure enough you can see plugin is being console logged out. Perfect so we've created a plugin now and we can just start to fill in what we need to do. Now the nature of Laravel Echo is it really gets registered on the window object this is the same for a standard Laravel application so it might feel a bit strange
02:28
but since we're working only with a client-side plugin it doesn't really matter too much. So let's start by importing both echo and pusher so we're going to pull echo in from Laravel Echo and we're going to go ahead and import pusher from pusher.js that we pulled in a little bit earlier and now what we can do is inside of the plugin definition we can start to create these out. So the first
02:50
thing that we need to do Laravel Echo has a dependency on the pusher window object which is pretty annoying but it's fine for now so we're going to go ahead and assign window.pusher to pusher. Ignore the error that we get here the typescript error that we get here we're going to add in a definition for these in just a second. Okay so the next thing is to create out an echo
03:11
instance on our window object as well this is a little bit more complicated but let's go ahead and get this started. So we're going to create out a new Laravel Echo instance we're going to go ahead and choose the broadcaster that we want in here which could either be pusher or reverb it doesn't really matter both are going to use the pusher API. Then we're going to use a key which is going to be
03:31
the application key that we have and also a host so a websocket host. Let's leave these empty for now and just to find them out and then we'll pull these over from our config. So the websocket port here is I know it's 8080 so I am going to fill that one in. Cluster doesn't matter necessarily because this isn't supported so we're just going to choose empty one it doesn't really matter
03:52
what we choose for this let's pull that in and we're going to go ahead and set force TLS to false and then that's caps so let's go ahead and pull that in as well. Okay so what we're going to do just temporarily is copy these and hard code them into here we'll get to using environment variables a little bit later so if we swap back over to our Laravel project open up our environment
04:14
file we're going to grab the app key just here so let's pull this over to our project here and the same thing for the host as well. Now the host we already kind of know if we hop over to our Laravel project the host is localhost but that's not going to be the case for the host here the host is going to be the actual API's host so we know that is realtime-nuxt-laravel.test
04:40
so that's all we need to do. Okay so now that we've defined this out let's just go back over to our project and give this a refresh and this should go ahead and start to connect up so let's go over to our network tab let's go over to our websocket section and take a look here and you can see that sure enough this has created a connection to realtime-nuxt-laravel.test on the
05:02
port we specified using the app we defined in our Nuxt plugin and we get a 101 switching protocols which means that the websocket connection here to our reverb server is successful. We can test if this isn't successful by just coming back over to our API project and going ahead and getting reared or closing off our reverb server and if we go back over and give that a refresh you can see
05:26
that sure enough this didn't connect so we don't get a connection here. Okay so we can go back over and rerun reverb start and you would have seen some debug options in here when we started to connect as well you'll get some logs come through here but we now know that we are successfully connected to our reverb server which is a great start.
12 episodes•1 hr 2 mins•9 months ago
Overview
Using Reverb and Laravel Echo, let’s add real-time broadcasting to a Nuxt SPA, driven by Laravel.
We’ll start with the basics of public channels without authorization. Once we’re set up and able to broadcast to all clients perfectly, we’ll dive into authentication and authorizing private channels by modifying how Laravel Echo authorizes with our API.
By the end of the course, you’ll have everything you need to start adding real-time broadcasting to your Nuxt/Laravel applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!