Laravel Websocket Package By BeyondCode and Spatie | Free Real Time System

[Music] welcome to bit fumes and we are going to start with larval WebSockets this is a package fault level by freak and Marcille or you can say beyond code and spicy so it is a combination of these two great minds and that's why it is a super cool package but what this package will do this package removes the use of pusher on your real-time systems so with level WebSockets allow you to have the real-time system the socket system in your real name app just like you use pusher but pusher is paid you don't have to pay any amount here it's just a server running on your system it's not going to broadcast messages to other server just like on the pusher it goes to push our server then come to back to your project but not here so let's get it started and this is the website and by the way I will put each and every link in the description so you don't have to worry about where these links come from so that's why I am here so get it started but here is the github repository so if you click there you will get the github repository which is having just some of the information and obviously the codes then you can see this website itself uses the WebSocket and here is the 252 users currently reading the documentation and just for the fun if you click there everyone knows that hey someone is there so if you click here on 252 users this Bell will move like just like this so let's get started so here we have to get started and go to the installation part and by the way I have a fresh installation of level so here I will go and install this package so I will copy it and install so while this is installing what fun part about this package is that yes it reduces the use of pusher but exactly the pusher server but you need to use the pusher PHP server the library of pusher and obviously the front-end library which is level echo so we are going to use both of these but not pusher so let's just wait while this is going to complete so this package is now installed or we can say we have used this package and the next part is we need to publish this so let's publish this content so we have published this but yeah it says it is on the database migrations and if we have a new migration for our WebSocket so this is the table but why we need a database or table for this actually this package has a very good monitoring system on the backend so if you want to see what are the connections you have what are the sockets data is sending and how many users are there online each and everything can be monitored on this package monitoring system so that's why they are using this migration and it able to have that thing and next part is using the migration to have all the tables on our database so I have already created a database called WebSocket and on my dot in we file I have configured the database WebSocket root and password is null so what I will do I will simply say PHP artisan migrate and it will migrate all the tables so go to the next part which is having the publishing of the configuration so let's go on the vyas code and publish this so it says publish to config slash WebSockets so conflict and WebSocket in this configuration we have defined various things but we will talk about these things later and let's just configure everything first so yeah we have all these things and next part is go on the pusher replacement so as I told you we actually going to require this package of pusher although we are not actually going to use the pusher so let's require this one and also we need to change the broadcast driver to pusher on the dot E&B file so open dot env file and hair on the pusher driver it has to be pusher knot pusher driver it's broadcast driver to pusher and one more thing it's not given on the documentation on the app dot PHP file if you go down you need to uncomment this one that's good that's the only part we need to configure so after that it is installing we have changed the driver to pusher then on this pusher broadcasting dot PHP file we need to change something so let's copy these three thing host port and scheme then go to the broadcasting dot PHP which is inside config folder and here you need to just paste these things so these three are here great next we to require the front-end side obviously so on the front-end side we are going to use the level echo so let's open the documentation for level echo and let's install both of these so let's grab these and and now we need to open a new tab here and then I'm going to firstly say NPM install so now let's install NPM and then after we will install the level echo also and the pusher PHP server is already installed and we are just a few step behind the real-time system so on this part we need to have some configuration on our bootstrap dot PHP files so go to bootstrap dot JS file not bootstrap dot PHP so bootstrap dot JS file which is inside resources GS and at the bottom what you need to see yeah we need to uncomment all of these things so yes as I told you we are not actually using pusher Bert push your settings are always there so just remove these things paste it here and we also need the key that's right and here comes a weird part you know because we are going to use this level websocket but not the pusher so do we need to have actual pusher key absolutely no so I will say here my key here just a random name so I will go to dot E&B file and here I will say my ID like this then my key and my secret and these things are so funny that we are going to use pusher settings but not actually pusher so here we have and these things are done so let's open our terminal and yeah it's done so I will finish sorry NPM install level echo so for that I need to copy this one and then paste it here and yes it is now installing and yes you can see it is also installed so I will say finish NPM run watch and this is going to watch everything whatever whatever the changes I do here so I don't have to do any changes actually so it is done and yeah this is also done is there anything left here and which is not so everything is setup and we just need to check how it is going to work but before that what I'm going to show you is that if you open a new tab and if I will say PHP artisan server yeah it will open and it will set up a new server for this project and if I go there yeah project is here but if I say slash level - web sockets and please spill socket correctly so sockets and you can see web socket dashboard is here but if I click on connect it's not going to connect because our server or we can say WebSocket server is not running so let's run WebSocket server also so another tab and WebSocket server is started so let's allow it and yeah it's doing something and this means if I now now go and you can see it has some of the channel which are actually going to used by this dashboard that's why they have this thing and this is the actually dashboard where you can monitor all the events and channels etc so that's the part of this how we can check that everything is working on on real-time basis so I will say localhost colon 8080 HP artisan make OTT so that I have some login system so I will go here and refresh and yes login in register so register there so Salter and Santa CAD bit films.com and password it secret and let's now register so register yeah we are logged in so now what I can do I can open GS components and example component and here we have the actual example component so let's use this example component on our home god blade PC file and inside this instead of this I can say example - come then close it sieve and stem if i refresh and yeah you have we had this so yeah everything is working absolutely fine so this means now what I will do I will go here on the lateral documentation and then I will find this one yeah this presence channel which is this one so echo and copy all these things go to example component on this mounted part I will paste it so here let's give a name for the channel as chat symbol chat nothing else and console dot log users okay so now let's see if I go here and refresh this page hmm we have some problem on broadcasting dot earth that is because we need to now set up that channel so on the routes folder we have a channels folder or channels file actually and here we are going to create this so copy and paste and here we will say simply chat and just one argument as the user no authentication and let's just return user only so like this yeah we have that so if I go refresh once more that error is gone and now you can see we have the name which is static add bit films.com so what I will do to show you the cool part is that if I now go to incognito window register a new one so I will say uncle add big films.com and password a secret new registration and this means you can see now we have two persons and it says hunker is here so let's just modify simple things like if I use backticks here like this and [Music] dollar sign and I will say joint and same thing I will do here so backticks and dollar sign then I will say lived like this so let's go once more here refresh here also refresh and this time if I say here you can see sad that leaves are joined so if I go to homepage yeah it's has it has to say Salta cleaved which is there so this means our real-time system is absolutely working fine so this is all about the coolest part of this package is that you don't have to use pusher settings or now it is fully fully free so that's why we have this end you can see you can monitor the things like events and the channels so if you have any doubt if you have any problem using this package you can just comment me and message me Vee I am already there and all the links in the description so let's get started with this awesome package end don't forget to say thanks to freak or muscle and you can have you can actually comment here also and if you want to learn more about this there is some great thing like where's that blog post yeah this is a great blog post by freak and it gives you the insight of actually this package how the spec is is actually going to work so read it and let's understand it thank you for watching and we will meet in the next episode till then good bye

Channel: Bitfumes

Views: 37,469

Keywords: laravel websocket server, laravel websocket, laravel websockets tutorial, laravel real time notification, laravel real time notification pusher, laravel real time application, laravel pusher tutorial, laravel pusher notification, laravel pusher chat, laravel real time chat, laravel real time chat socket io, laravel real time chat application, ratchet php tutorial, ratchet php websocket, ratchet php library

Id: mDnsC-sfG7I

Length: 15min 20sec (920 seconds)

Published: Thu Dec 06 2018