Laravel Websockets with Vue
Playing
01. Laravel websockets with Vue

Episodes

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

Transcript

00:00
In this snippet, I'm going to show you how to get Laravel Echo working in a Vue CLI build project using an API which has some kind of WebSocket functionality,
00:10
whether you're using a driver like Pusher or if you're using the popular Laravel WebSockets package. So essentially, we're going to end up with an API which creates some kind of event and then our client which
00:24
listens to them events. So to get started, I've already created a fresh Laravel project. I've switched over the database configuration,
00:31
but I've done absolutely nothing else. We're going to run through this completely from scratch together. So the first thing that I'm going to do
00:38
is go ahead and just migrate the default migrations. And really, the first step is just to get some kind of real-time functionality set up within Laravel.
00:47
So we're going to use Laravel WebSockets for this, although, like I said, you can use Pusher. So if we head over to the installation instructions for this, you may already have this set up.
00:55
But let's go ahead and pull down the Composer package for Laravel WebSockets. Once that's done, we're going to go ahead and publish the migration.
01:02
So we can check on our dashboard that stores our statistic information. And once this is done, we'll just run this command. OK, so that's all done.
01:11
Let's go ahead and paste that command in to publish that migration. And let's run php artisan migrate. Next thing to do is get the config set up.
01:19
So let's publish that configuration file over here. And what we should end up with is a WebSockets configuration file over in here, which we don't need to do anything with just now.
01:31
So the next thing to do, and one step that I always forget, is come over to our main config file, come all the way down to where our service providers are, and make sure we enable the broadcast service provider
01:44
so we can actually broadcast messages to our WebSockets server. The next thing we want to do is head over to our broadcasting config and change over our Pusher settings
01:53
since we're using local WebSockets here. So if we come down to the Pusher replacement section over on Laravel WebSockets, we need to do a couple of things here, but let's get this config added first.
02:03
So let's grab all of this config in here and just replace this out. And all this means is that rather than hitting Pusher's service, we hit our local host just here
02:13
on this specific port. So the other thing that we need to do is make sure that we actually have the Pusher PHP server running.
02:19
So let's go ahead and pop that in there. And just while that's finishing, we also need to change over the broadcast driver to Pusher as well, and that's over in our EMV.
02:28
So let's come down and switch that over to Pusher. So now that's done, let's go ahead and boot up a local web server for this. I'm going to go into that API directory
02:36
that I've installed this in, and we're just going to run php artisan and serve just to get this started up. So if we come over to the browser now,
02:44
we should see a fresh Laravel application, which is great. Now, we're not going to pull in any authentication scaffolding or anything like that. We literally just want a test event,
02:54
which we can use to broadcast. So let's also, at this point, go into that folder in API and also run php artisan websockets and serve. Now, what that should allow us to do is come over and access
03:09
our Laravel websockets endpoint. At the moment, we don't have an app key set, so we'll go ahead and do that as well. But we should then see the dashboard, which will
03:18
allow us to connect to our app. So just because we're working locally, I'm going to set the ID key and the secret to local. For now, what I'm going to have to do
03:26
is just come out of this serve and rerun it, and we should end up with the following. Great. So we can connect to this now and make sure
03:34
that this is working. At the moment, it doesn't look like it's working. That's just because we need to also restart the server just here.
03:41
And let's come over and try that again. There we go. Great. So our WebSocket server is now up and running.
03:48
Let's create an event which broadcasts something so we can play around with this. OK. So to do this, I'm just going to go ahead and make
03:55
an event within Laravel, and we're just going to call this Hello. Let's come over to our Events section and Hello. And first of all, make sure we implement
04:04
the Should Broadcast interface. That will actually broadcast that. And we're going to switch this over to a standard channel, and I'm just going to call this Channel.
04:13
And I'm just going to choose a payload here to broadcast with since we're testing. So we're going to say Broadcast With, and we're just going to return an array in here
04:23
with a key of Hello and a value of there. Great. So now what we should be able to do, perhaps over in our web routes, is
04:30
create out a really simple route to test this out. So let's copy this down. Let's change that to Broadcast, and let's use the Broadcast Helper to broadcast a new Hello event.
04:42
And of course, that would be any event within your application. So now we should be able to head over, duplicate this, call Broadcast, and if we head over to our dashboard, we should see that event being broadcast.
04:55
Now all we need to do is figure out how we can do this and listen for this, rather than within Laravel. Instead, inside of a Vue CLIO app, or in fact,
05:04
any Vue app at all. It doesn't really matter. Now, if you've worked with Laravel before, you'll know that inside of Resources, JS, and Bootstrap,
05:11
we actually have all this code here ready to be uncommented and used, as long as we pull Laravel Echo and push a JS in. And that will read from our key, from our cluster,
05:21
and any other settings that we provide. So let's go over to the overall folder that I'm using, which is WebSockets in Vue. At the moment, we just have that API folder in there.
05:31
And we're going to go ahead and create a new Vue application. So if we head over to here, let's go and come over to Creating a Project, and we're going to create a new project with Vue.
05:42
So let's do that, and we're just going to call this Client, assuming that we have a separate client and API. And we're just going to run through the settings
05:50
that we need. I'm going to go ahead and uncheck Linting, just for now. And we don't need anything else here. If we were actually building an application, of course,
05:57
we would use Router, Vuex, whatever. But let's just leave that how it is, and we're not going to save this preset, just for now. OK, so that's all finished.
06:05
Let's go into that client directory and run npm run serve. And that will boot up our Vue CLI application. Let's just wait for that to build. And let's grab the URL for this here,
06:16
and just pop over to the browser so we can test this out. So I'm just going to duplicate this over, pop that in, and there is our application. So we're not going to do anything in terms of styling.
06:25
We just want to listen for this event within our Vue client and see the output in the console. So if we just head over to the client here, under Source and Main, this
06:35
is probably a good place to boot this up. We could put this in a complete separate file, but for now, we'll just kind of copy and paste everything over, see what we need to change, and most importantly,
06:44
get this working before we start to change things around. So over in API, let's go back under the Resources tab under Bootstrap, and let's copy all of this and just pop this in here.
06:58
Of course, we can tidy it up later. So we need to install Laravel Echo and Pusher.js. So let's come over to the terminal. Again, opening up a new tab, let's go into WebSockets
07:08
in Vue, but the client. And let's do an npm install on Laravel Echo and Pusher.js, and just wait for that to finish. OK, so that's all done.
07:18
Let's go back over here, and let's just run this and see what happens. So let's come over here and give that a refresh. So the first thing we've got is you
07:26
must pass your app key when you instantiate Pusher. Now, remember, we're connecting to our API. We're not connecting to Pusher, or rather, we're connecting to the WebSocket server
07:35
that we're running within our API. So we need to change over some of the key and cluster. We don't actually need the cluster in this case, so we can get rid of that.
07:42
But we do need to store our key in an environment variable. Now, we don't have this by default within client, but Vue CLI, when you build a project, does support environment variables.
07:53
All you need to do is create an EMV file in the root of your project. And that should, of course, go in the client directory. So let's move that.
08:00
And all this requires us to do is create a Vue underscore app underscore, and then the name of our environment variable. So in this case, I'm going to call this WebSocket key. You could call it Pusher key if you want.
08:13
It doesn't really matter. But this is set to local. We already know that because we set this up in our API here to have the Pusher app ID key and secret as local.
08:21
So we just need the public key for this, which is local. So of course, you can generate that and change it out a little bit later. Now, what we also need is the location to our WebSocket
08:33
server. So I'm going to create a WebSocket server variable here. Now, this isn't going to be something like HTTPS or HTTP. It's likely going to be a domain name when
08:43
you push this to production. But for now, we just want this to be local host. And we don't even need the 8,000. So we're just connecting to local host.
08:54
I think I might actually switch this over to 127.0.0.1 just to not complicate anything. And we can do that over here as well. So let's also access 0.0.1 here, because we
09:05
might see an error with that. And we can do the same with this as well. As long as it connects, we're all good. So let's just reconnect to that server.
09:12
Let's just rebroadcast this, make sure everything's coming through, and it is great. And we also want this to run potentially on 127.0.0.1, although it doesn't really matter too much.
09:21
OK, so we've got our two environment variables in here. We can replace these out now inside of main.js. So we want the key to be processenv. And then we want this to be viewAppWebSocketsKey.
09:34
So let's switch that over. But there's a really important change that we need to make here, because at the moment, we don't know the host that we're connecting to.
09:43
So we're going to go ahead and define the WebSocket host. And that is going to be 127.0.0.1. So we're going to say processenv. And we're going to say viewAppWebSocketServer.
09:55
So let's pop that in there. And we also need to define the port as well, which is 6.0.0.1. So we're just matching up the config that we set earlier over in the broadcasting
10:07
within Laravel, like so. OK, so the next thing we want to do is make sure forceTLS is set to false for on a local environment.
10:15
And really importantly, we want to disable stats. The reason for this is, by default, if anything happens in here, if we get any kind of activity, this will, by default, be sent to pusher.
10:27
We're using a pusher replacement for our API. So we don't want the statistics to be sent over to pusher's servers, which is really important. OK, so now that we've got all of this in here,
10:37
that should be good. Let's come over, give this a refresh over on our client. And it says here you must pass your app key. I think we just need to close this off and rerun it
10:47
to bring them environment variables in. And there we go. So if we head over to our Network tab, filter by WebSockets, we should see a 1.0.1,
10:59
which means that the connection is switching protocols. It's pending. It's basically waiting for any events to come in. So now we can just start testing,
11:08
listening for this event over on our client. So everything in our API is done. Client's almost done. We just need to, somewhere in our app,
11:16
start to listen to this using pusher. Now let's reference main.js again, because we've got window echo here. So we can easily just, in some kind of mounted hook maybe,
11:26
say window echo. And we can start to listen on a particular channel. So the channel that we're listening to here is called channel. Of course, that would probably be different for you.
11:37
And then we want to listen for a particular event. Now the event is just called hello. So we're just going to pop that in there. We get a closure in here with the event data,
11:46
which we can just really easily console log out. So we've got our web server set up or our API set up that can broadcast events. We've got our client,
11:56
which is listening on this with this particular key on that specific port. And we're disabling stats being sent through to pusher. So what we should now be able to do
12:06
is head over to our broadcast route, come over to our client and see that that has been picked up. Now, of course, there are going to be changes when you push to production.
12:15
So like I said before, this is probably going to be a domain, for example, socket.cocourse.com or something like that. Anywhere that you're hosting this,
12:25
we have a separate course on doing that. If you want to get this set up on production, and then you just need to switch over all of your environment variables to match up.
12:34
But there we go. That is how we use a view application with an API that broadcasts. And we can now just listen to any events.

Episode summary

In this episode, we're diving into getting Laravel Echo working in a Vue CLI-based project so that your Vue frontend can respond to real-time events broadcasted from your Laravel backend using WebSockets.

We start completely from scratch—fresh Laravel install, database config done, but nothing else. We run through installing the Laravel WebSockets package (though you could use Pusher, too), publishing the config and migrations, and wiring up the broadcast driver to use the local WebSockets server. You'll see how to set up all the relevant config and environment variables to make your API ready for broadcasting.

On the Laravel side, we create a simple event (called Hello) that implements the ShouldBroadcast interface so we can test out event broadcasting, then set up an easy test route to trigger that event and see it show up in the Laravel WebSockets dashboard.

Once the backend is set up, we turn to the Vue client. We spin up a new Vue CLI app, install the laravel-echo and pusher-js packages, and show you exactly how to copy over and adapt the Echo initialization from Laravel’s boilerplate. For local dev, we walk through getting the needed environment variables and settings right—pointing to your local server and avoiding Pusher stats being sent to a third party.

Finally, you'll see how to listen for broadcasts of your Hello event in your Vue app, console log the received data, and confirm that the real-time connection is working flawlessly. There’s discussion on how the setup would slightly change for production, but by the end, you’ll have a Vue app listening to real-time events from Laravel via your local WebSockets server!

It’s a longer one, but highly practical and hands-on—covering every step from infrastructure to code in both Laravel and Vue!

Episode discussion

No comments, yet. Be the first!