Websockets in Laravel - Part 1: Configuring Laravel for Websockets

[Music] [Music] hey everybody and welcome back to the dev architour channel so good to have you guys here we are working on part number one of our application and of learning how to add WebSockets to our label apps this is a very very fun series I'm so excited to be doing and I'm excited to get started here so in this video we are going to basically clone this repository I've created a sample application for you guys so you can follow along and basically put this to use doing exactly what I'm doing in the videos so this is gonna help you guys a lot so I've created that sample app we're going to basically clone it and get it set up and then I'm going to show you how to configure and set up level echo so or broadcasting WebSockets in general so we're gonna go through those steps in this video that's going to be this is focused on configuration and setup next video we will work on in part two we will work on creating an API for the comments because we're gonna be creating a live real-time commenting engine and then the third video we're actually going to put it all together and actually that's when we're gonna enable the WebSockets and they're actually going to everything's gonna work by part three okay so that's kind of the overview of what's going on in this video so the first five or ten five or six minutes of this video we're going to basically clone this and get it set up as a basic level project doing the sample app application that I've created for you guys and then after that we're going to from then to the end of the video it's going to be focused on what you need to do in order to set up your application if you're working with like an existing application and also to work with this one in order to add WebSockets to that application there's a few packages you need to install a few gotchas I want to make sure you guys don't get stuck on and then some some stuff for your App J's file and things like that so we'll go over that in a few minutes here okay now before we do anything I want to explain what's going to happen what are we gonna be building what's the goal of this project well of course we're going to be learning WebSockets but the project we're actually going to be building is a real-time live commenting engine so if you guys have ever like seen the Apple keynotes or the Google keynotes you go to these you know websites like CNET and The Verge will have these websites you can go to and they'll update they'll post updates live as things happen right and then as soon as a new comments in you don't refresh your page or anything it pops in instantly with the new comment at the top of the feed and all the other comments get pushed down that's we're gonna be creating in this video and by the third part by part 3 we will have a working version of that okay so that's the end goal here is a live commenting feed a live commenting engine where you see those feeds pop in immediately and if you submit a comment it gets pushed to everyone else who's viewing that same post and it updates it on their page without them refreshing their page and then if you're viewing a blog post and someone else leaves a comment on that post it's gonna pop in at the top of the comment feed pushed all the others down and you're not gonna have to do anything to make that happen it's just gonna change on the page as soon as they submit that new comment okay so that's we're gonna be creating in this video and throughout the rest of this series okay so let's go ahead and get started the first thing I want you guys to do is if you're following along with my tutorial you're going to want to go down to the description click the github link and head on over to this page so it's github comm slash dev marketer slash level echo tutorial once you're set in here this is going to be the this is the repository for the entire project in fact right here is the full project including all the finished files at the end of the entire series we're gonna go ahead and clone this and then start we're gonna move to if we go to the releases here we're gonna move to this start tag I've made a tag at the very beginning of the project where we've already created the basic structure the authentication the blog system the blog post I don't ever have to touch any of that I've created all of that for you and now all we're gonna do is basically configure it for web sockets add comments and then we're gonna put it all together and actually make the comments live ok that's we're gonna be adding so in order to start at this same place so that you have all the same code that sets up the blog posts and the authentication stuff you're gonna want to start here at this start tag okay so that's we're gonna do we're gonna clone this repository we're gonna move to the start tag and then we'll have a basic level application and then from there we'll start adding WebSockets to it because this is just like a standard application if you move the start tag the start tag is just a standard level application with some basic controllers for blog posts and stuff but it doesn't have anything to do with WebSockets and we're going to enable that and that way if you guys are following along with your own projects and you already have a level project you want to add WebSockets to it then you'll be able to kind of pick up at the same point that we do here and follow along all right so that's what we're going to do okay so let's move back to the main page here and let's go ahead and clone this repository so it's gonna take four or five minutes to do all this if you got to skip over this you can skip ahead a couple minutes I'll try to put a link here so we're the timestamp so head over to there and then from that point to the end of the video is going to be the portion that you need to add to every application so if you have an existing application that you're working with you want to do everything from that point to the end of the video in order to configure that application with WebSockets okay let's go ahead and start by cloning this application so what I'm gonna do here is we are going to start by we're inside of our project here click this green button that says clone or download and we're gonna grab this URL so let's copy it that's going to copy this URL to our clipboard and we're gonna use this to clone okay so let's come over here we're gonna now clone this project inside of our sites folder that's where I like to put everything so if we look here these are all each of these are a different project so each of these there are their own folder so I want to create another folder called echo and want to put this project this whole project here inside of that folder that's what we're trying to do okay so let's do that git clone then we're gonna paste in that URL I copied from the green button and then I'm gonna do space and then the name of the folder I want to put all this stuff in which is called echo so let's go ahead and do that click enter it's gonna go ahead and clone it and put it inside of our project and I do an LS command I now have a new folder called echo let's now CD into echo because everything I do from here on out is going to be inside of this folder once we're inside of here the next step is going to be moving to that start tag by default we cloned the entire repository including the final part of the project all the way through the end of the projects so you don't want to be there that's the end of the project you want to be at the start of the project so if you look at the releases here we want to move to this start tag so that's what we're gonna do so in order to do that you do called check out so do get checkout tags slash start and we're gonna check out that tag and then we also want to do dash be to create a new branch and we're gonna call this tutorial you can call it something else if you wanted but tutorials good let's go and click enter that's going to actually create a new branch called tutorial and then move that branch to that start tag so now you just have the beginning of the project you don't have anything after that and so now you can follow along with me now you're currently going to be on this tutorial branch but if at any point you get lost you can switch over to the master branch and that will have the final finished code okay and you can keep switching back and forth that's why git is so cool alright so there we go so that's everything we need for that we're inside of echo on our branch called tutorial alright so now that we got that done let's go and actually start setting up the project so we're going to have our composer file but we don't have anything installed so let's go ahead and do composer install and get all of the packages set up for basically like I said a basic level application that's gonna run and then the next thing you want to do is you want to run NPM right you want to bring in all those JavaScript packages that are necessary we're gonna add a few once we get to WebSockets but we'll just get the basic ones running right now so run either NPM install or I like to run yarn whichever you prefer just make sure you stick with one or the other so if you start with NPM you're gonna want to keep doing that throughout if you stick with yarn start start with your own you want to stick with that throughout the rest they don't seem to play very well when you switch back and forth okay so I'm gonna be using yarn so there we go so now we got yarn that's all setup now we have all of our JavaScript packages now the next thing that we want to do is we want to let's see the next thing we're going to do is copy our env files so let's copy the env example file and we're going to create an env file out of it okay so now we should have a nice clean env file and then after that what we're gonna want to do is just run our key so PHP artisan key generate and that's going to generate a new authentication key and put it inside of our env file and then after that what we're gonna want to do is setup our database so let's head over to sequel Pro here and I'm gonna create a new database we're call this database echo and I'm just gonna set that up there we go now I've got an empty database called echo that's perfect and now that we have that we can go ahead and put that information into our env file let's go ahead and just do that just clear this out so you can read so we're going to open up our env file in Nano and I'm just going to come down here to our database and we're going to change the database name to echo because that's why I just created make sure your username is good and your password is good for me this is correct so I don't need to change anything so everything here looks good just make sure to change everything in your your database go ahead and save the file and now you should be set up so now you can just run a normal migration migrate all of those tables and then the last thing is let's run your seed PHP artisan DB colon seed and that's going to see the database fill it with some dummy data I've already set all that up for you so you should be okay okay now that we have that I'm gonna move back to sequel pro and I want to just show you what we've created if we go to echo here you can see we have four tables migrations obviously password resets your standard thing there and then we have our blog posts you can see we created a bunch of blog posts a hundred to be precise we've got a title that's randomly generated a Content that's randomly generated they have a random boolean value whether they're published or not here and at the beginning we have a user ID to associate each blog post with a user that wrote the blog post is the idea so that's all been created and then under users we've got 25 users they all have a random name an email address a password which is the same for all of them at secret SEC ret that's been created for them so just make sure to add that and then if you want to log in as this user you would just grab their email address and then use the secret as the password and it should log you in well I also want to mention here I've created an API token for all of them and we're going to be using these API tokens in the next few videos because we're going to be using basically ajax for all of this stuff so we're going to be using api tokens to authenticate when we send a new comment and stuff like that so I created an API token as well and generated an API token everybody as well okay so that's everything we should be good to go there now you've got a head and finished your level set up that's the standard stuff that you need for every level application to get up and running so now let's say that you this is the point where basically everything we do from here to the end of the video is going to be the stuff you need to add to every level project that you want to enable WebSockets on okay so this from here to the end of the video is the stuff you always need to add to any level application to make it work for that so let's do that so first thing I want to do before we get too carried away let's go over and create a pusher account we're going to be using pusher which is a socket server service ok there's a lot of different socket server services you can use google has their own and AWS has a version has a socket server service there's PubNub there's pusher there's a ton of them if you guys want to look them up just search socket server service or something and you'll find a million of them we're gonna be using pusher just so that we don't have to set up the socket server itself now in a future video I might show you guys how to set up that socket server but what I don't want to do is I don't want you guys to get to the point where like you have a configuration problem with your socket server so then you're not able to follow along and learn how to implement level echo if we use pusher we don't need to worry about the server the socket server it just works and then we can just make sure our application is doing what we want so they handle all that kind of dirty work for us so it's got a free tier go ahead and just set it up for this tutorial if you don't want to use it going forward that's cool but for this tutorial it doesn't cost you anything you can log in with your github account it's super easy so I'm gonna come over here and sign up with github it's gonna log me in and you'll see that I'm here at the dashboard you might need to fill in a few pieces of information if it's your first time logging in once you're here we need to create an app so you can have multiple applications inside of one account right so this is my overall account what we want to move over is to our app and then we want to find you can have multiple apps here I already have one called dev marketer - echo but you might want to create a new application if you don't have one already once you create the application you can see I've got it here we're going to come over to our app keys and these the keys that we're going to need in the next few steps of this tutorial as a side note before we move on with pusher these names that you give it need to be globally unique so I already have one called dev marketer - echo which means you can't call up that as well it won't work you need to have your own name for it so what I recommend is just put your name or your brand name or whatever you want to call it your brand name here - echo and that will probably be good for you but you can't call it devoir go to - echo because I already have that one taken okay just keep that in mind that it has to be globally unique alright so there we go you can see here's our information you can create a new key and secret if you need to but this is the information that I'm gonna be using make sure to just keep this page open because we're gonna be referencing it in a bunch here in the next few steps okay so now let's it move back over to our terminal let's install a few things to get started this is in addition to the normal stuff for label that's why I saved it for this step is because this is the stuff you're gonna need to install whenever you're implementing wearable WebSockets okay so we're gonna first thing we're going to do is we're going to compose a require and we're going to require the pusher PHP server library so pusher slash push our - PHP - server and this is going to enable the pusher server for our library we do some client are some server-side broadcasting this is that's how we push the event when the event occurs server-side we push that event information over to this the pusher servers and that's what this library allows us to do is to allow us to push the event information server side over to the pusher servers okay so we went ahead and installed that next thing we're going to need to install a few NPM dependencies we are going to we can start off with the pusher - Jas library again that's the JavaScript version of the pusher library so you can do NPM install - - save pusher - j/s and that will install that or if you're using yarn just do yarn add and that's going to go ahead and install push or Jas library and again those obviously are both only needed if you're using pusher if you something else you would need to use those libraries for socket IO or for whatever okay okay now that we've got that done the final thing to install is either use NPM or yarn but yarn add we want to use level echo this is the actual level echo library which is brought in through JavaScript it's a client-side library not a server-side library that confuses a lot of people a lot of people seem to think it's a server-side library but layer will echo is actually a client-side JavaScript library okay now that we got that done we have everything installed that we need to do we can actually go ahead and take a look at this in the text editor and start working with it so here we go something happened let's try that again there we go that was weird okay so now we've got our project and you can see we've installed our vendor folder and our node modules now let's go ahead and configure the level side to enable that will do the server-side first and then we'll do the client-side stuff second okay so now the first thing we need to do is go to config slash app PHP at the bottom of this app dot PHP file is your application service providers come down here to the bottom here's your application service providers you can see there's a service provider for your app for your authentication for your events and for your routes the one thing that's commented out is you're broadcasting service provider because not every application uses broadcasting it's commented out by default so you just want to re-enable that by getting rid of the comment and now save the file and now you should have broadcasting enabled in your application pretty easy right okay next let's go ahead and configure the authentication information for pusher for our pusher library that we have so come to config broadcasting this is where you configure all of the connections for your various socket servers okay so if you scroll down to the bottom you'll look this is very similar to like the database the database connections you establish we got this array of connections and then each of these is a different connection that we can reference by this name so we can call it Redis we can call it pusher you could call it Stan you could call it remote you could call it whatever you want to do and then inside of that connection you have all the information to connect to whatever you're trying to connect to okay so we're gonna grab one of these connections and we're going to fill it in and we'll connect using this pusher name is what we're going to do all right so we're going to use the pusher driver that's good the key is going to be the pusher app key grabs it out of our env file that'll be good then we have the app secret from our env file that would be perfect the app ID from our env file and then we have some other options now we do want to define a few other options let's go ahead and do that now the first one we're gonna want to define is called cluster the cluster is going to be the location for your that your app lives on so let's go ahead and set that up in the env file as well we'll just call it pusher app cluster and then we can go ahead and set that up in the env file so it to make it easy the last thing I want to do here is encrypted this is going to be required for pusher it requires you to encrypt the information so we're just going to set that to true so set encrypted to true you don't need to worry about anything else but this is required for pusher ok that's everything else there we've got our first connection it's called pusher you could give it a different name if you wanted but we'll just call it pusher that's our connection and this is all the information that's needed to connect to that socket server again you could have multiple socket servers here that each of them has their own connection and then whichever one you want to connect to to send a broadcast out to you would just enable you would just reference that connection name and they would connect to that one and this allows you to have multiple socket servers you could connect to if you wanted to most the time you only need one but you could have multiple there we go so that's it now we've gone ahead and defined this pusher connection okay now we still need to define the environmental variables for these four components so what we're going to do is we're going to head over to our env file and set that up now if we scroll down you can see we have three of the four down here already the app ID the app key and the app secret already set up the only thing we need to do is push your app cluster that new one we created and set that one up now as well okay now we can get all this information from our brow we have all the information right here let's go ahead and copy it over so grab our app ID and paste it in here then let's grab the key and paste it in here then let's grab the secret from here and paste it in oops don't get rid of that and then let's grab the cluster mt1 for me and paste that in here as well there we go that's all the information we need we now have that connection set up in broadcasting this is all configured because we set up those env files okay now let's move up to the top here you can see we do want to define a default connection what to use if we don't specifically specify a connection what should layer we'll just assume to use by default and that's what you define here is your default one we only have one so let's just set up the one that we have as our default one in this case we want pusher that's connection we just created pusher to be the default broadcast drivers so you could define it here or again you could put it in the env file so let's come over to the env file and the broadcast driver is actually up here you can see it's set to log right now let's just change that to pusher or whatever the name of the connection is that you created there we go that's everything now before we move on I want to mention that there is a cue driver here if whenever you're working with broadcasts all broadcasts by default are queued so you are going to need some sort of cue in order to work with broadcasts now for development you can just keep the cue driver set to sync because this allows you to work in development without actually creating a cue but for production you're not going to want to use that you're gonna want to use Amazon Amazon's cue cue service you can use the you can use Beanstalk which is what I've used a lot or Redis those both work really well so you're gonna want to use some sort of cue system here in order to set these up because every time we want a broadcast to our socket server that API connection can take half a second 3/4 of a second who knows and so that connection should be cued so they doesn't hang up your server and so that's what's happening here so we want to make sure to cue that and then by default everything is going to get queued so just sure you have a queue setup and you're going to want to define the queue driver here so this is okay for our demonstration purposes this should be good okay now they got that out of the way let's go ahead and close that and that's it for all of our server-side setup now everything else is going to be the client-side setup that we need all right so we're gonna be working with actual level echo the client-side library to set some stuff up in our app KS file now before we move over to the app dot J's file there's one thing that catches up a lot of people the two biggest things that catch a lot of people is first of all the what I'm going to show you right here is inside of your main template file in app deployed PHP this is every single page inherits this app blade PHP you want to make sure you have this meta CSRF token field okay level echo is going to look for this every time it sends a request or receives a request it needs this CSRF field and if you don't have it you're gonna just get it's just gonna silently die now this throws a lot of people off because a lot of people don't realize that you need to have this meta token here and so if you don't have it then it just doesn't work the other thing that throws people off is the queue that I just mentioned it'll seem like everything works and there won't be any errors but it won't actually be broadcasting nothing's working and you won't understand why and you'll go over to pusher and you don't see anything pusher isn't receiving anything and so you're like what's going on you keep sending it well it's because everything is going into the queue and you're not actually running the queue and so that's what I'll throw a lot of people off is everything gets put in the queue they forget to run the queue and or they don't have the queue set up and so everything's just sitting in the queue waiting to send a pusher and it there's no errors because nothing went wrong right other than obviously the you haven't it hasn't the queues not running so that throws off a lot of people too so those are the two big gotchas is that not having the queue set up and not realizing that by default every broadcast is queued and then the other thing that throws people off is not having this meta token so make sure to copy it exactly like this or if you're using the authentication scaffolding for label it'll automatically put this into your app deploy PHP file if you're do the authentication scaffolding okay so that's already in here for us we don't need to do any okay so now that we got that out of the way now let's talk about setting up our app.js file so we're gonna go to our resources slash app assets /j s and then our app KS so make sure you're doing the app KS that's inside of the resources folder not the one inside of the public folder okay so inside of the JavaScript we're gonna grab this app J s and we're gonna set this file up now okay so you can see we require the bootstrap file and then we set up view we are gonna be using view to update the Dom so we're gonna want to keep this however we don't need to have a global view instance because this can cause problems so let's some well doesn't cause problems but because we're going to be enabling view on a page-by-page basis we don't want a global one because see they're both part going to be connected to the same element and that will cause problems okay so let's go and just comment this out save this file and now we want to enable level echo and that's going to be on this bootstrap file so let's go and open that up over here so bootstrap j/s if you scroll to the bottom down here at the bottom you can see we have a bunch of stuff for level echo and it's commented out so these bottom comments that you have the slash comments we want to comment back out so that they are enabled and we want to just basically enable those and this is going to set up level echo in our application now level echo you can see here we import it layer will echo from the package layer will echo this now is going to be available after we compile our app yes it'll be available on every single page and we can use it we also have access to pusher that comes from our pusher library and then down here we actually configure some defaults for the echo and we create a new echo instance again that'll be available on every page so let's go ahead and make sure you change your broadcaster to whichever one you're using we're using pusher so we can leave it alone next we've got our key we're gonna want to go ahead and put our key inside of here so we can grab that one more time let's grab this key up here this is the key that you want make sure not to put your secret on your JavaScript the secret code that never wants to be clumb on the front end of your website because this secret enables all sorts of full access to your pusher account only want this publicly this publicly safe key on the front end that's the only thing you want on the front end don't put these other things on here well clusters okay we're gonna put that here too okay so let's go and paste that in make sure you get that key not the secret and then the last thing we'll want to add here under after the key is just go ahead and set up the cluster mt1 but again if you want to reference that just come back over here and you can check it and then the final one is encrypted once again in Korea did and we want to set encrypted to true okay and then that's everything so now you've got everything set up in your app J's file just make sure that you've also commented out this because we're gonna want to use view on each individual page okay let's go and close those files that sets up your javascript file you now have everything you need the last step is just to compile your JavaScript so over in terminal we're just going to run npm run dev that's going to go through grab that app.js file compile it for development and then put it into the public folder now that it's in the public folder there you go it ran successfully now that it's in the public folder we've got that right here fjs now all of our pages will have access to what we just changed which is we added level echo into our app das file so now it's available to everything on our application so that's it that's all it takes to get set up just as a quick recap once you do the basic layer will set up all you need to do is you want to configure go to your config slash app file and you're going to want to make sure to enable the broadcast service provider right here make sure to get rid of the comments so that it's enabled after that you're gonna want to set up your connections okay so we created a connection here we put in all the information needed for it that's the next step is connections you're going to want to make sure to enable that with your default driver and then after that all you really need to do is set up your App J's file make sure to re-enable the you want to re-enable this commented out portion and then also just fill it in with any appropriate information so that it can connect to pusher okay so that's everything that it takes to really get project up and running with WebSockets we now have the groundwork laid so now the next video part two what we're gonna do is we're gonna start working on our real-time comments and the first step of doing that is just building an commenting engine just a standard way that you would save comments to the database that's we're gonna focus on in the next video we're gonna create an API so that we can submit comments via the API so that way when we when our users submit the comment they don't need to refresh the page it can happen with asynchronously without refreshing the page and then also any other users in the third video will set it up so that it gets broadcast that new comment gets broadcast to every other user that is viewing that page at that exact moment and that's gonna create that experience of a real time live commenting engine so hopefully you guys enjoyed this video and learned a lot I know it gets long but I want to make sure you guys understand all this stuff so hopefully you guys learned a lot if you do get lost or confused I recommend checking out the written tutorial which is available down in the description and it's written it's available around dev market or do so be sure to go check that out and then of course if you have any questions leave comments here on YouTube I love them leave a thumbs up if you appreciated it and then last but not least if you haven't subscribed be sure to subscribe but I bet you guys are already subscribed so no worries there that's everything I got for you guys in this video part 1 I will see you guys in part 2 the next video see you there

Channel: DevMarketer

Views: 60,722

Keywords: code, tutorial, best, easy, laravel, echo, websockets, configuration, setup, install, github, git

Id: tExUWmF6wNM

Length: 30min 46sec (1846 seconds)

Published: Tue Feb 13 2018