Laravel Websockets and Laravel Echo with Vue

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 web socket functionality whether you're using 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 listens to them events so to get started i've already created a fresh laravel project i've switched over the database configuration but i've done absolutely nothing else we're going to run through this completely from scratch together so the first thing i'm going to do 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 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 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 so we can check on our dashboard that stores our statistic information and once this is done we'll just run this command okay so that's all done 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 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 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 so we can actually broadcast messages to our websocket server the next thing we want to do is head over to our broadcasting config and change over our pusher settings since we're using local web sockets 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 so let's grab all of this config in here and just replace this out and all this means is that rather than hitting pushers service we hit our local host just here 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 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 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 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 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 which we can use to broadcast so uh 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 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 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 uh for now what i'm going to have to do is just come out of this serve and re-run it and we should end up with the following great so we can connect to this now and make sure 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 and let's come over and try that again there we go great so our websocket server is now up and running let's create an event which broadcasts something so we can play around with this okay so to do this i'm just going to go ahead and make an event within laravel and we're just going to call this hello let's come over to our event section and hello and let's first of all make sure we implement 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 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 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 roots is 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 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 now all we need to do is figure out how we can do this and listen for this rather than within laravel uh instead inside of a view cli bio app or in fact any view app at all it doesn't really matter now if you work with laravel before you'll know that inside resources js and bootstrap we actually have all this code here ready to be uncommented and used as long as we pull laravel echo and pusher.js in and that will read from our key from our cluster and any other settings that we provide so let's go over to the uh overall folder that i'm using which is web sockets in view at the moment we just have that api folder in there and we're going to go ahead and create a new view 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 view so let's do that and we're just going to call this client assuming that we have a separate client an api and we're just going to run through the settings 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 we would choose router view x whatever but let's just leave that how it is and we're not going to save this preset just for now okay so that's all finished let's go into that client directory and run npm run serve and that will boot up our view cli application let's just wait for that to build and let's grab the url for this here 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 we just want to listen for this event within our view client and see the output in the console so if we just head over to the client here under source and main this is probably a good place to boot this up we could put this in a completely separate file but for now we'll just kind of copy and paste everything over see what we need to change and most importantly get this working before we start to change things around so over an api let's go back under the resources tab under bootstrap and let's copy all of this and just pop this in here 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 it's going to web sockets in view but the client and let's do an npm install on laravel echo and push the js and just wait for that to finish okay so that's all done 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 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 that we're running within our api so we need to change over some of the uh key and cluster we don't actually need the cluster in this case so we can get rid of that but we do need to store our key in an environment variable now we don't have this by default within client but view cli when you build a project does support environment variables 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 and all this requires us to do is create a view 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 push a key if you want 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 push app id key and secret as local 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 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 you push this to production but for now we just want this to be localhost and we don't even need the 8000 so we're just connecting to localhost i think i might actually switch this over to one two seven zero zero one just to not complicate anything and we can do that over here as well so let's also access zero zero one here because we 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 that server let's just rebroadcast this make sure everything's coming through and it is great and we also want this to run potentially on one two seven zero zero one although it doesn't really matter too much okay 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 process emv and then we want this to be view app websockets key 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 so we're going to go ahead and define the websocket host and that is going to be one two seven zero zero one so we're going to say process emv and we're going to say view app websocket server let's pop that in there and we also need to define the port as well which is 6001 so we're just matching up the config that we set earlier over in the broadcasting within laravel like so okay so uh the next thing we want to do is make sure force tls is set to false we're on a local environment 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 we're using a pusher replacement for our api so we don't want the statistics to be sent over to pushers servers which is really important okay so now that we've got all of this in here 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 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 one which means that the uh connection is switching protocols it's pending it's basically waiting for any events to come in so now we can just start testing 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 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 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 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 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 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 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 so like i said before this is probably going to be a domain for example socket.cocos.com or something like that anywhere that you're hosting this 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 but there we go that is how we use a view application with an api the broadcasts and we can now just listen to any events

Channel: Codecourse

Views: 19,515

Rating: 4.9234042 out of 5

Keywords: learn to code, tutorials, codecourse, php, web development, learn php, php tutorials, code

Id: rNOGLLPXzwc

Length: 12min 45sec (765 seconds)

Published: Wed Sep 16 2020