Self-Host Your Own Websockets with Laravel - It's This Easy and Fast

hey everybody and welcome back to the dev marketer Channel I'm super excited to be here today to bring you guys a user requested video I always listen to your guys's feedback and a lot of you guys really enjoyed the level EKKO WebSockets tutorial that we did a while back we learned everything about setting up level EKKO to use WebSockets for real-time updates in our applications in that tutorial we used pusher you know a software-as-a-service platform that allows us to incorporate WebSockets really easily by just creating an account and adding it to our application configuration okay so that was basically what we did in that tutorial and a lot of you guys really enjoyed that tutorial is a big success but I got a ton of feedback that you guys wanted to know how you can incorporate WebSockets without needing to sign up for pusher how you could self host your own WebSocket server and I totally understand the need or desire for this and so today I'm going to show you guys how to do exactly that now this is gonna allow us to host our very own WebSocket server now this is important because this means that you can actually operate and use WebSockets without needing to sign up for an external service there's still value in signing up for these monitored and managed services like pusher but for many of you guys you may want to manage that yourself and you can do that thanks to this package level WebSockets we're gonna be able to host our own socket server complete with its own dashboard and that's what I love about this package this allows us to have our own dashboard that gives us real-time analytics real-time feedback about events that are going through our server we can use this dashboard for debugging and it even allows us to send event payloads directly from the dashboard so it's a really cool service now in addition this is also runs through PHP which is really really cool it actually runs inside of a level application so if you're familiar with level you're instantly familiar with working with this server because it runs right inside our level application we can host it along with our applications so they're just together or you can even host them separately so you have so you have it running elsewhere but it's running inside of a level application which is really convenient if you're familiar with the framework already okay so there's a lot to love about this I'm going to show you guys how to get his setup and then we'll run through some demonstrations just to kind of prove that it works and how to configure level echo to work with our new socket server [Music] all right now welcome back hopefully you guys are excited to jump into this today now I am gonna warn you we're gonna go a little faster than we normally go just because I'm assuming at this point if you're trying to run your own level WebSocket server that you already understand level echo and WebSockets so I'm not gonna go in and explain all of those details if you do get lost or confused at any point I am gonna link in the description my previous series about level echo and WebSockets and that talks about all it goes into full detail about how to get started with level echo how to use it it's like a four or five video long series and it's about an hour long and totally if you watch the whole thing front to back so it goes in a lot of good detail and get you up and running if you get lost anywhere along the way so I just wanted to mention that that's available if you feel like it's overwhelming I'm going to fast you can go down there and watch it and I go a lot slower and explain all of the steps along the way so it makes sense alright now this is the project we're going to be working with is level WebSockets okay and this is a battle-tested application I'm gonna talk more about some of the performance at the end below let's go ahead and just get started I'm setting this up I'm gonna start by showing you how to set up the server then we're going to go through we're going to show how to configure your level application to talk to your new server on the PHP end and then we're going to talk about in the third section we are going to set up level echo on the client side and talk about how to connect to your new server ok so there's kind of three steps so let's start by just setting up the server so it's running and allowing us to connect to connect to it so here's the main project we're gonna go ahead and click getting started you can come to the installation on the side and these are the steps you need to get started so we're gonna go through this really quick now the first thing we need to do is create a new layer below you can see here in the terminal I'm gonna create a brand new one we're going to call this project WebSockets layer of all new WebSockets but remember that you can incorporate this into an existing application it just uses composer and it brings it in like a package so if you have an existing application you can add this to it in fact if you have an existing application that uses pusher this is actually is going to transition almost over almost immediately because this application this this package actually replicate the pusher API so we're going to be using the pusher package for both JavaScript and the PHP package to talk to our new server because this server replicates the pusher API so it looks like pusher other than the fact that it's not pusher servers it's our server but all the plugins and packages that work with pusher are gonna work with your brand new server once we get this set up because it uses that pusher API so that makes it even easier to work with because those are those packages and plugins are available on lots of different platforms not just labels you could start using this on mobile devices TVs anything it that's how awesome this server is gonna be once we get going okay so we went ahead we got our package created let's say obviously the CD into it and then we're going to add the composer package that it says up here at the top so just composer require let's bring that project in nothing new or exciting here there we go we got our package brought in this is going to bring in all the code necessary to run our level WebSocket server so the next step is there are a couple migrations we need to run and we need to create our configuration file and those are going to be you're gonna want to probably just go to this page I'll link it in the description and the first line here under this installation guide is going to provide us our migrations so we're gonna go ahead just copy that over paste it into our terminal that's going to create the configuration file or sorry that migrate the migration file and then I'm just going to come down to this next line and set up the configuration file so this next long one will produce the configuration file I skipped over migrate because I haven't set up my database yet okay and that's basically all you need to get started so now that we got that running let's go ahead and jump into the text editor and start configuring this alright so now that we're inside of our text editor you can see we created two new files we've got our configuration file under config WebSockets and we've got our database migration over here as well if we look at the migration you can see we create a new table called website or WebSockets statistics entries this is what stores the statistics for our WebSockets so it's going to store a history of how many people were connected the number of connections the number of WebSocket messages that were sent and the number of API messages that were received in so it's gonna keep track of all of that and the default is for sixty days I will cover this in the next video into if you want to customize this server and how to set it up but we're just gonna leave everything for default for right now now that we got that up before I run the migration to create these I do just need to set some stuff up in my env file real quick personally so we're gonna set up I've created a database called WebSockets and I'm just gonna set those up here and that's all I need now I can connect to my database run the migrations let's also make sure we have a couple other things running you're gonna want to use set your app name because this project does grab the app name to kind of distinguish between multiple projects if you're working in a multi tendency solution and then also your app URL now normally this works you can see the default here is localhost if you're running on level valet this project will still work fine if you leave it like this however your analytics and statistics don't work unless you actually put the URL that level valet uses so I'm going to be using level valet just to kind of play around with the project so I'm gonna put in the the URL for my the valet URL which is WebSockets test because this is the WebSockets and I use test as my TLD just put this in here so that the analytics show up if you put localhost it works fine but it just you just don't get analytics because of the way the localhost DNS is resolved okay so once you get that set let's move on down to broadcast driver now the question is here we've got our new level server what our WebSocket server how dowhat driver do we use well one of the cool things about this is it uses and emulates the pusher API so we can use all of the pusher drivers so we're just going to tell it we're using pusher even though we're not using pusher we're using our own system where it uses the pusher API the pusher packages all that stuff so we can just say pusher is our driver here and everything's gonna work out of the box if we come down here also you can see we've got our push your app ID the key the secret and the cluster and this is also going to be important because we in order to work with our application we need to have an ID a key and a secret so this is where we're going to find those and it's gonna be used throughout our application so you might wonder well where do I get these you just make them up basically now in a production application you would want to do something a little more secure than what I'm doing right now but I'm just gonna make a couple things up for right now the point is it really it can be anything you want as long as you're consistent across using it you know I'm just gonna go ahead and just make up with key make up a secret and everything like that we don't actually use cluster so it's it's not a big deal and that's everything that we need now we will be using these variables as well once we setup echo on the client side but of course as long as you're you're keeping it consistent it won't matter alright so now that we got those env things set up we can go ahead and run our migrations and then we'll configure our server so let's just come over here run that migration and we should be good to go so we now created our new database tables here and now we can configure WebSockets through the configuration file okay now the first thing we see up here at the top is apps now one of the great things about this package is you can actually create it has multi-tenancy built out of the box what this means is that you can actually have multiple level applications or even just multiple projects in general they don't have to be label but you can have multiple projects running on a single server okay so what we need to do is we need to set up our app ID our app name key and secret and all of this is coming from our env files so we can just ignore this and again these can be art these are arbitrary pieces of information and make sure when you go to production you set up something better than what I just set up here in our example you're gonna want like a 60 character alphanumeric string that's hard to guess but these are what we're defining here and then when we set up when we set up pusher through our PHP side we'll use the app or the app key and abs secret to connect to our label server and when we set up echo on the client side we'll also use the key the same key to connect with it and that is how this project will basically validate us is with these keys and these secrets so they can be anything but you're gonna need to be consistent with them because that's how you're gonna validate those users all right so that's everything we need for these first three few elements down here you'll see that you can enable client messages set at true or false it's off by default and then statistics now the statistics are easy enough if you don't want statistics you said it defaults by default you'll be tracking and logging your statistics this is going to store records in the database of how many people were connected how many messages were coming in through the API and then how many WebSocket messages were sent as well okay so that's what it's going to be tracking and it stores that in the database with the migrations we just created now what is these client messages these are direct basically peer-to-peer client messages to clients can actually send messages to each other without going through the server now this is kind of a sketchy world if you're not careful you're allowing people to basically interact with each other's computers through this you know portal that you're creating so be really careful about turning this on I wouldn't turn this on unless you know what you're doing and you're willing to create some security around it okay so it's off by default and that's for good reason but the functionality is there and that's a cool feature to have we're going to talk about some of these other features in the next video if you're interested we're gonna finish all this stuff up in this video but if you do want to continue on to the next video I'm gonna talk about how to configure some of these additional settings if you're confused about what these various settings do we'll talk about that in the next video I'm going to keep that 1 to 5 to 8 minutes and just cover customizing your server but really with that setup that's all you need to do if you have multiple apps of course just copy this here and you can create multiple applications but we're just gonna work with one right now and that's it you're ready to start running your WebSocket server and that's what we're gonna do right now so we're gonna jump over to the terminal now and I'm gonna go ahead and just launch our server so the way we launch it is inside of our project here we're gonna run PHP artisan WebSockets serve and that is going to go ahead and start our WebSocket server so now it is running localhost we have a WebSocket server that we're running ourselves this is really really cool stuff we're gonna go over to the browser and I'm actually gonna head over to our project so if you go to WebSockets dot test of course if this is if you're using laravel valet of course otherwise just do whatever else you would you know PHP artisan serve go there do whatever but I'm using valet so we go to WebSockets test and we have our normal project here but we can go to our socket server dashboard by going by you that by default you go to / level - WebSockets and if we go there this is actually that dashboard I showed you earlier and this is basically how you interact with your server you can see if you have multiple apps they'll show up here we just have the one app that we created called layer called level and then we've got the port 6,001 which is the default port and if we click connect we can take a look at what's happening on this server with this application so we have real-time statistics up here we can create events here manually and we can see a history of all the events that have happened here now you might wonder where all these events are these are actually because we're connecting to the real-time dashboard we actually use WebSockets from our very own server to run our dashboard that's what these are so we have private WebSockets dashboard statistics the API messages and the subscribers are all located here so there's three channels being used right now and that's how we get those real-time data okay so you can see here we already have some people it's ourselves but you see a subscriber you see someone occupied this is basically like a presence indicator and we've got that for each of these three channels okay so this is a really cool start we have WebSockets we're ready to go you guys have a WebSocket server you can literally launch this by just deploying your label application and your website server will deploy with it now you do need to run this command this PHP artisan WebSockets serve but if you connect that to supervisor you can make sure that it runs constantly so you always have your socket server up and running okay so that's it that's all it takes to run your socket server now let's go ahead and talk about the next two parts which the next thing is we need to go to our server side and configure level to be able to send to send messages to our new server so when we trigger like an event and we broadcast that event we want to send it to our server not to pusher or anything else we want to send it to this server so let's go ahead and do that now so this is kind of the PHP side of that so the way that we do that is we are going to need a package and we're going to be bringing in the pusher PHP package so we'll come over here to the terminal I'm just and open up a new tab well we'll just close this for now actually we'll close our WebSocket server and we are going to bring in a new package so we'll use composer and we're gonna say composer require pusher slash pusher PHP server same thing you would pull in if you wanted to work with pusher itself remember our project emulates pushers API that's why we're using this package is because our our server has the same API as pushers server okay so it's the we can use the pusher package so it's pretty cool alright so we went ahead brought that in and that's really all we need to do for that now we can go ahead and configure it and you would configure it just like you normally would if you're working with pusher you'd come into broadcasting here you would set your broadcast driver to pusher we already have this set up in the env file so that's okay and then you come down here to your connections you'll take a look at your pusher connection and we'll set up this information here now most of this can actually stay the same as how pusher uses it we're gonna pull the app key from our env file again that's gonna keep that's gonna allow us to authenticate same with the secret again that that allows us to authenticate with our server and the app ID all that's the same right there are a few additional options we do need to do the first one is going to be and the biggest reason we need to add this is because by default we're using the pusher driver so we're using that pusher API and it assumes that we're also trying to access pushers website so in this case we have our own website not pushers website but it uses that has the pusher API on it so what we're gonna do is we're gonna say you I use pusher but we need you need to use this host not the which is that basically the URL for our website for our not our website but our socket server instead of using pushers so instead of going to like pusher do or whatever we're going to go to our own server which is localhost in this case so I'm going to do 127 0.01 which is localhost so that I can use this locally and then the other thing we need to tell it is the port to use and in our case the default port is 6,001 you can configure that when you launch your server the last thing we want to tell to do is to use HT to use the scheme HTTP all right and that's it that's all we need to do and now our PHP side should be working and be able to send messages to our new server okay so it's going to use the pusher API but it's going to use the host of local host on port 6,001 in order to connect to it and then I'll use the pressure API inside of there and that's going to allow us to work with our server now if you are using SSL we'll talk about that in the next video if you're interested in SSL but in that case you are gonna want to set HTTP and you're gonna want to set encrypted to true but because we're not using HTTP right now turn scheme just to normal HTTP and you're gonna want to comment out encrypted okay it's we're gonna comment that out but just bring it back if you have SSL on and that's it so now we're good to go so let's go ahead and test it let's create an event and let's broadcast that event and see if it shows up on our server so to do that back over on the terminal we're gonna create a new event PHP artisan make event and we'll just call this event new message we're just gonna send a message easy stuff alright we got a new event if we come up here to our app events new message we have a standard event created here we're gonna make sure we broadcast this event so implements should broadcast and again if this is confusing to you go back go in the description and watch my label echo WebSockets - tutorial goes into a lot more detail on this okay let's go ahead and set up our just going to accept a message and we're going to publish that to message as a public property all right so that should be good and then for the channel name we'll just you can be anything of course but we're going to just call it home okay and that's it so we should be good to go now we are able to broadcast our message it's going to broadcast it to our pusher channel which is going to go to our new WebSocket server okay so let's go and just shut that down and I'm gonna come over to our browser we are let's make sure we're running our server first because we're gonna test this now PHP artisan WebSockets serve should boot it back up it's going to refresh this page and connect and there we go okay so we're getting some analytics from before and it looks like it's working okay so our WebSocket server is up and running this is great now let's go through and test it we're gonna go back to the terminal and I'm gonna just open up a new window here and we're gonna use PHP artisan tinker ok so make sure you so you're gonna want to do PHP artisan tinker I just had that aliased so you're gonna want to use that and we're just gonna go ahead and trigger a new event so we just created this new event called app events new message and it accepts the message so we're just gonna say hello world and go and trigger the event okay and you saw as soon as I sent that I might do it again here you'll see the event come in here so we have this new API message which was our event from App events new message and it triggered on our server I'm gonna run it just one more time so you can see it so I'm gonna click up and run and you can see that it it popped up here okay so we are getting these messages they're going to our server it's accepting it in everything so that means the PHP side is working with all of our events are triggering to our new WebSocket server now the only problem is no one's connected to our server we need some client side some clients connected to our web sockets so we can propagate these messages down to all of our clients let's go ahead and do the third part which is setting up those clients now okay so now to do that we're actually gonna be using the label echo JavaScript library so as let's go ahead and exit our tinker and just like before we're gonna need to bring this in with NPM install let's do an NPM install real quick because I haven't done yet okay so I just did a standard NPM install I hadn't ran that yet so I want to make sure we had everything and now that we got that we're gonna go ahead and also install two packages now the first one is label echo so let's go ahead and install that and then while we're at it we also want to install pusher J s okay so just as before we're connecting to our own server but it has the pusher API so we're going to use the pusher JavaScript library to to interact with our server so that's why we have pusher J s in here okay and then laravel echo just because we're using echo all right let's bring both of those projects in all right so we should be good to go now if we go back to our project we can go ahead and actually configure this so the first thing we're gonna want to do is just go into our resources into our javascript file and into our app KS and configure level echo inside of here so actually we need to go to bootstrap I'm sorry so the bootstrap file we are gonna include app KS and normally it is an app KS but it's currently being brought in from bootstrap so we'll bring it in here okay so then while we're in here you can go ahead and kill jQuery you don't need that right now you really don't need any of these but the I think it does use Axios actually so you do might need that anyway we're gonna uncomment out this section down here to bring an echo you can see we import echo from the level echo package we just brought in and we import pusher from the pusher j/s package that we just brought in and then down here we can configure our echo instance so that it's available on all of our pages through this global now just like before most of this we can keep the same because it mimics pusher so we're gonna use the pusher broadcaster for the key we're gonna go ahead and get that key from our env file so this uses label mix then there'll arrabal mixes and env file and then the cluster again doesn't matter we're not using encrypted so let's go ahead and just comment that out and then the last two things we need to add is our port and our host just like before that since that's different than the normal pusher we need to define those two elements now what we do is we don't actually use hosts in here we use W host okay and 4ws host we're just going to go ahead and set up we can actually automate this by just doing window dot location dot host name and then the other one we want to do is the port so we're new wshh port and we're just gonna set it to evil 6,001 and that's it that's all you need to do now label echo is basically set up now in order to use this of course we need to compile the JavaScript into our JavaScript files so we're gonna jump over here and just compile that real quick we'll do NPM run dev and we'll let that run while that's running that's going to basically create an app J's file for us that contains the new level echo incidents that we've created and so now let's go ahead and just put this into our views so we can test it so we're gonna go into our view file here I am just going to close up a couple of these and down here right before the body will add some script tags and we'll bring in our app dot JS file alright and then while we're at it let's also go through and create a script tag where we can set up level echo so we should have access to level echo here as just the echo global and we're going to connect on a channel and you know what I just realized is that let's go back to our event real quick because I think we're using private channel here we are we're using private channel so back on our event let's just set it up to channel so it's a public channel you can see that up here just for this tutorial I'm not gonna mess with authentication but you can normally just do authentication as you normally would inside of your routes file or whatever okay so our your routes folder I mean okay so echo channel just to get a public channel and we're gonna tell it to listen on our home channel and we're gonna listen for the or connect sorry I subscribe to our home channel and then we're going to tell it to listen for the new message event alright and then when we get something from new message we'll just tell it to log in to the console so we're not gonna do anything super crazy we'll just tell to log the event okay in fact we'll just tell it a log event message since we're gonna just grab that message property and that's it that's all we need to do that's it for level echo we're bringing it in everything should work fine I think we do need to bring in our meta tag I because I think that's required okay so I just wanted to bring in the CSRF token I think that throws an error if you don't have that up there in the past I've experienced that perfect so I'm gonna come over here just to the console and actually what we're gonna do is I'm gonna throw this to the side and what we're gonna do is we are going to basically watch our statistics here well watch the events come in on this side and we should be able to see the console logging our events on this side and then the last thing we need is in our terminal will run the we'll actually run the command so let's go ahead and get back in to tinker and you can see here that we have something subscribed so it says subscribed and occupied on the home Channel and that's our new element if we actually click here and refresh you can see that we vacate the channel disconnect the channel and then you can see the reconnection because we refreshed okay so you see all of that data here which is really really cool all right now this is just from our events so ignore that now let's go ahead and trigger that so we're gonna say event again in fact can we just duplicate yeah there we go we can duplicate it so I'm gonna send the message helloworld by triggering that event again we should see it down here and we'll see it show up in our console basically all simultaneously ready 1 2 3 and you can see we got our new home on the home channel we got a new a peep event and we got our hello world message okay so you can see that it works here to show it again and there you go you can see it popping in you can see it showing up here and of course down there so everything just works like a charm all right so that's basically it that's all you need to do to get started with laravel WebSocket server you can host this yourself on your like right inside of your label project so it's super easy to run the only thing you really need to do is just make sure you have supervised once you deploy the application do you have supervisor watching that PHP artisan WebSocket serve command just so that it maintained it keeps running but otherwise you can run your own basically little pusher server yourself it's self hosted now one thing I will say about security I am going to or not security about performance is this performs actually very very well I'm gonna link down the description a blog post from the creator of this package and he tested this package on a $5 digitalocean droplet so a little five dollar VPS and on a five dollar VPS he was able to produce maintain 15,000 concurrent channels or concurrent connections 15,000 foot concurrent connections off of a $5 of virtual private server so that's really really powerful just for comparison if we take a look at like what pusher if we take a look at pusher here and just to compare now there's a lot of benefits to pusher lots of benefits the fact that's managed to maintain there are a lot of benefits and if I were running a definitely a large enough application I would still consider using a service like pusher just because you can you know it's gonna run and be up and running very very quickly but just to put it in perspective as far as pricing goes if we take a look here obviously on the free plan you get 100 max connections and then on the paid plan you can see that it goes you know from $50 up to $500 a month and it the number of concurrent connections is what basically goes up so on the $500 a month plan $500 a month you get 10,000 connections and according to this blog post from the developer he says you can get 15,000 connections from a five dollar private server okay so that's really really powerful he sat on a twenty dollar server you can get up to 50,000 connection concurrent connections so that's really really powerful you do have to maintain it but again it runs like a normal level application so hopefully you're already used to maintaining those and serving that information so that's a really really awesome option I think this is this is gonna change it for a lot of people a lot of people that previously weren't able to add real-time notifications and real-time WebSockets to their applications are now gonna be able to do it and I think that's a really cool opportunity now again don't ignore pusher I think pusher is a great is a great option for a lot of people and honestly if I were scaling up large enough there's some value to having what pusher provides okay but this is just another really good alternative to consider being able to host it yourself okay and it's something that you guys have been requesting so hopefully you guys found that very interesting now if you did get lost anywhere along the way in this video today I do recommend you go down to the description and take a look at my level WebSockets a tutorial it's a five five part series it's all free it's here on YouTube and you can watch it I think it's about an hour of content if you watch it like front to back all the way through and that goes into a lot of detail about the a lot of the stuff that I kind of just skimmed past here how to set up Ecco you know all the parts of you know the server side part the client side part and all that kind of stuff we also cover private channels and presence channels so it goes more into that whereas we just worked with public channels here today okay so there's a lot there if you're interested in learning more about label WebSockets be sure to check out that tutorial series down there completely free here on youtube you can take a look at it so i'll link that down in the description and that's it that's all you guys need to know now if you are interested in configuring or customizing your server in the next video what i'm going to do is just kind of go through those customization settings inside of our config slash WebSockets configuration file just kind of explain what those are and how you can customize your application depending on your needs so if that's something that's interesting to you check out that video that should only be five or eight minutes so it shouldn't be too long but otherwise if you don't need that no worries you guys know how to setup a web WebSocket server now and how to connect with it through level echoes so really cool stuff hope you guys enjoyed it and until next time I'll see you guys in the next video

Channel: DevMarketer

Views: 110,729

Keywords: code, tutorial, best, websockets, server, laravel, laravel-websockets, php, laravel echo

Id: pIGy7-7gGXI

Length: 32min 52sec (1972 seconds)

Published: Tue Feb 12 2019