Advanced Laravel | Broadcast, Pusher, Laravel Echo #17

[Music] in this episode we are going to see how we can use the broadcasting system in larel so with that I'm your host saruk this is the channel where I talk about larel and the cool thing about larel so if you are new to this channel don't forget to subscribe and like bit fums on Facebook Twitter and Instagram so what is sub broadcasting actually broadcasting is a way where you can get data without refreshing the page and even without eject system okay so it uses web socket means Whenever there is a change in your server then you can get that event and prompt your user for that changes so it's just like you will you will get a notification on Facebook so this is the same thing and let's see how we can use that so firstly we have to get the Pusher so I will install Pusher on my project okay so let's close this yeah so I will install Pusher and while Pusher is installing I will create account on my Pusher so pusher.com and I have to sign in so login and login with Google okay so it's asking and yes we have done this so go to your app section your app section and create new app so I will say uh Advance LEL okay and if you want you can choose these things but it's not necessary so let's click on the create my app and it will create your app now you have to get these app keys so app keys are here okay we need these things so again it's installing pretty slow doesn't matter okay so we will copy these things and put it on our EnV file so app key is going here onv at the bottom app key is here then app ID app ID is here secret secret is here okay and you have to make changes for your broadcast driver it's now log you have to make it Pusher okay so no change nothing other than this so let's move on so we have completed this part so now Pusher is already installed so let's see what we have to do next so after Pusher is installed we have to make this thing so copy this cluster and encrypted and go to your config file then broadcasting and here on The Pusher section you will get this options part here paste that thing but remember it's now EU but in our Pusher app its cluster is ap2 and when you create your pusher maybe the cluster name will be different so use your cluster name okay so save this and close next what next is so next yeah we will use LEL Echo so our Pusher is okay so what we need first we need to have some kind of event so that we can make that event a broadcasting event and in the last episode we have created an event called task event and we are calling that event from this route of Slash event so we will pass this data hey how are you okay so how we will call this task event as a broadcasting event you just have to do one thing what you just have to say Implement should broadcast so should broadcast is here save this file and here in the bottom of this same task event page you have to make your new channel name so channel name consider channel name as a simple way simple way of telling that you are on a same path so if you are sending your message on one road then other person will receive the message on that road only so consider it as a road okay so I will say again test Channel simple okay so we have completed this thing so let's see what's the next procedure okay so here it's giving these things so whatever we are giving we have receiving these things things in a public message so we will passing that message and in the event but here listener is no more useful because event itself is broadcasting that to Pusher okay so what next we have to do we have to let's see okay we have to create firstly our event so we will fire that event and now we have to receive that event but before receiving what we have to do one important thing is that we have to go to our config folder then in our app folder and if you scroll down to the providers you will see this broadcast service provider and uncomment this that this is very important thing okay so now close and let's try to see so I will go to Local Host slash event refresh nothing happened because yeah that's good because we have not done anything with that route but if I go to debug console of Pusher and now when I hit one more time it's not doing anything because we have make changes innv file now we have to restart our server so let's restart our server and now when I go here and I hit enter here and go to Pusher you can see now we have this message hey how are you so this is because we have sent our event with this message hey how are you next task is to listen to this message on our page okay so what we need so firstly let's create one one route called listen so I will create a get route called listen and that will be again a function I'm not going to use any controller here so here we have we will return a view oops not this view view called listen broadcast okay so we have to create this um view so let's copy this one and open resources views and create that file. blade. PHP and now what we have to do let's create HTML 5 markup okay so let's go again to broadcasting larel documentation and for listening we will go to receiving broadcast yeah we have to download this echo laral echo so let's go and download that larel Echo so I will install that LEL Echo here and while it's installing let's see what next we have to do we have to create this thing so let's go to our public folder and not public resources folder assets folder and and this JS and app.js you will see we are getting these this app this view app is here so we are using View and if I go to broadcast at the bottom you can see we have all these things commented so uncomment all these things and as before we have to give here key so Pusher key so let's go and app key and let's copy this one from here give it here and one more again we have to provide the cluster and en type cluster and encrypted and our cluster name is ap2 so ap2 okay so we have given these things so let's see our Echo is already installed now we have to do we have to run npm Dev to compile all these things into app.js file so firstly we have to include that app.js file so Source will be um JS app.js and where this file is this file is inside public folder JS app.js so this will compile to this file so let's include uh CSS also so yeah we have to use asset I forgot that so CSS SL app. CSS and same thing here set and yeah okay and let's get that compiled version so I will use npm uh run Dev so it will compile but it's giving error it says cross EnV not found I think I have not installed npm so I have to say npm install so it will install so while it's installing let's see what next we have to do uh we have to obviously go to that route so that route is listen so Local Host slash listen and let's open console and yeah console is clean for now but we will see what error we are getting so it's installing and and meanwhile I will explain you what what's going on here we are providing Echo as a listener so Echo will listen and then we will give that echo part here inside our view so we will create firstly uh created for method which is like whenever the app is loaded do something so if I say alert so it will alert something but we don't have to alert it so what we have to do we have to listen for the event so we have to copy this one echo. channel and something something so paste it here so echo. Channel but our channel name is test Channel so copy this paste it here okay and listening to which event are event name is Task event and make sure the spelling so spelling task event okay so we are going to console everything we are getting from The Pusher so let's see what is going on it's also installing now so next what we have to do okay I think we have done this we just have to wait to install the npm and which is completely installed let's run npm run I will run watch so it will watch every time whatever I am changing on my app.js file so it's now compiling it will take little time but it will compile properly and which is done and now what I can do I can refresh this page so while I refresh you can see I am getting so much errors so first error is cross EnV for the LEL so we have to copy this meta tag for our csrf fields and go to listen broadcast and paste it here on the head part and let's create a div with the ID of app otherwise we will get error so you can see it's giving error so let's refresh one more time and yeah our errors are gone some is here which is from Pusher so it says one more time that app key is not found so key is good key has to be this one why I have given this key so refresh and clean no error okay so next what we have to do whenever we have written here whenever we are listening to any echo part then console. log that thing so we are giving from here so when I hit enter you can see I will get my data here so once more we will hit enter we will get here message called hey how are you you and here inside console we should get that thing but we are not getting let's see what happen Okay so we are not getting this thing because you can see we have to give here firstly private Channel and whenever we are creating a private Channel we have to make sure we have the user logged in so what I will do I will just create PHP artisan make author it will quickly convert everything for me for logging in so I will log in here with the ID this 1 2 3 4 5 6 and yeah I'm logged in and this event I will fire from incognizant window I will log in here also I have already registered so okay so what I will do I will merge these two windows here okay and now here I will close this and now go to listen and here we have listen part and clear this console here I will go to event part so let's go here one more time and open this route file channels file and and create a new broadcast channel which is our channel name called test Channel and here return simply true okay so what we are doing here we are providing the channel as accessible by the logged in person so we every time we are returning something that means that channel is accessible to the that person so we can also check via comparing the IDS so that's okay okay so now I will clean up this console once more and clean up these messages from here and now what I do I again hit enter here and wait for some time and you can see we have this hey how are you message popped up here we have not done anything in this page but we are getting this so every time I hit here you can see we are getting this message here okay so this is event broadcasting and we will use this to create an awesome real time chat application which is coming very soon in one or two or 3 days so please watch these things and wait for the next episode and we will meet in the next episode with some new new cool features Advanced features of larel and until then don't forget to subscribe like bitfumes on Facebook Twitter and Instagram support me on patreon.com and we will meet you in the next episode till then goodbye

Channel: Bitfumes

Views: 69,813

Keywords: laravel 5.5 broadcast, laravel echo, laravel broadcast, pusher, laravel pusher, laravel notification, laravel vuejs, vuejs echo, broadcast event, laravel 5.5 event broadcast, websocket, socket.io, real time update, real time chat

Id: 2PTgJwxf6UI

Length: 18min 12sec (1092 seconds)

Published: Mon Jul 31 2017