How To Use Broadcasting In Laravel | What is Broadcasting in Laravel?

what's up developers it's dory here and welcome back to a new video where we're going to talk about broadcasting in laravel with some pretty cool new tools such as pusher and larval echo quick pause do you want to support the channel and want me to continue on pushing content well you can support the channel through patreon right now you will also get benefits such as a private discord group where everyone is helping each other out with their coding issue so if you are interested to join the link will be in the description down below in the previous video we've touched on events in largo and with that broadcasting is a pretty hot topic broadcasting events happen over something which is called a websocket and i'll try my best to explain in simple terms what websocket is you can see it as a protocol popularized by pusher which makes it very simple to communicate between devices what we have done up until this point was sending http requests which is pretty alright but in some cases you do want to provide real-time communication between devices think about facebook messenger or instagram messenger or actually any type of web messenger if you do receive a message from one of your friends or someone that you're actually talking to the page isn't refreshing when you receive a message right you might think that this is being done with the ajax request but in most cases it's actually not since it's being done with a websocket don't get me wrong you can obviously do it with an ajax request as well but why should you do it if you got broadcasting it feels like i've been saying it in the last 20 or so videos that is very easy to use websockets since laravel has a built in set of tools that you can use in order to broadcast your event to a websocket server the only thing that you just need to do is to change up some settings let's start off by changing our driver inside the convict folder in the root of our application you'll find a file called broadcasting.php let's open it now all files inside the convict folder make use of a default driver as you could see right here it's either being grabbed from the emv file or it has a default value which in the case of the broadcaster has been set to no if we scroll down you'll see a connections part right here where you can choose between different drivers for broadcasting you have the option to choose for pusher ably readers we have the log file and we have no which basically means nothing i must admit that using the log driver is pretty cool to use when you want to log and debug your broadcast when you want to make use of broadcasting you do need to pull in a composer package called pusher so let's do that as well let's open the terminal all right and inside our larval broadcasting folder let's run composer require pusher forward slash pusher dash php dash server hit enter this might take a second all right it's already done now to double check it let's open our composer.log file let's press command f or control f and search for pusher let me close up this error message right here all right let's hit true and right here you can see that pusher has been pulled in with a version of 7.0.1 followed with the source but that's not something we need right now today's video is brought to you by cloudways a managed hosting platform for your applications cloudways has enabled businesses to scale and reach new milestones instead of worrying about server hassles with reliable 24 7 support cloudways offers complete peace of mind from server level nightmares furthermore its superior tools and works enhance your productivity so you can focus on creating incredible experiences with your applications it's a fast managed solution for agencies smbs and e-commerce businesses what i personally like about clyde ways is their slogan moving dreams forward now that we've made sure that we are using pusher in this particular project it's time to set up our emv credentials to interact with pusher we do need to set up an account on the official website of pressure so let's navigate to the browser let's open a new tab and go to pusher.com hit enter i want you to sign in create an account pause the video and i'll see you back when it's done once you have set up your account you have the option to choose between two sandbox plans the first one is called channels and the second one is called beams let's click on the get start button of the channels part let me actually zoom in here as well all right so what we need to do is to create a new application right here so let's start off by the name let's get rid of it let's give it a name of laravel dash broadcasting whoops that's a typo all right now select a cluster to a location that's near to you since i'm living in the netherlands my cluster will be eu now you can choose your technology stack but it's optional let's just click on view.js and for the back end we're obviously working with laravel and that's it create app this will navigate you back to the dashboard where you have a menu on the left side right here and inside the menu let's click on app keys right here you will find 4 values that you need to paste inside your emv file to make sure that you can interact with your pusher so let's start off by copying the app id let's navigate to visual studio code let's open the dot emv file scroll to the bottom and right here you'll see four environment variables that have no values so let's paste the values here one by one let's paste the id go back copy the key paste it and push your underscore app underscore key let's do the same thing for the secret and the cluster is eu now that we're here we also need to change our environment variable of broadcast driver right here let's change it to pusher we could also change it in the broadcasting.php file but i think that this is the right place to change that up now that we have pretty much set up everything that we need it's time for a new section where we are going to broadcast an event like i said before broadcasting works with events so let's create a new event inside the cli let's perform the php artisan make me event called message notification hit enter if we open the app folder let me close off the convict folder actually you'll see a new folder called events with a new file called message notification you'll see that the illuminate contracts broadcasting should broadcast has a lighter color than the dispatchable serializes models private channel interacts with sockets and that actually means that it's not being used what this actually will do is interact with the broadcast on method that we have at the bottom right here that will then return an array string or channel object for us with a private websocket channel in order to make use of the well should broadcast class which is actually an interface you need to add it inside the class our class has a name of message notification but we're going to implement the should broadcast interface let's scroll down and right below our use statements let's add a property right here called public variable message if you want to use the public message inside your class you need to add it inside the constructor so let's pass it in as a param and inside our constructor let's say that this message is equal to the property now the real magic happens in the broadcast on method that we have right here we're going to broadcast one channel with a message and you see by default a private channel is being called right here which is a method you have the option to choose between three options and i think that i should mention them before we continue on you have a public channel where any type of user can subscribe whether they are authenticated or not you have a private channel but it requires the end user's javascript to authenticate in order to join the channel and you also have a presence channel which is pretty much the same as a private channel but it allows messages to be passed through what i want to do in this video is to use a public channel object syntax since we're not going to use authentication right there you can also choose a string syntax but you do need to return an array since your event will serialize it as a json so what we can do is replace private channel to channel essentially what the channel will do is ping in your application to learn whether the current user that is logged in or not is authorized at the moment we have a public channel so we have no authorization so we need to change the channel name to something that is related to the class or to the action that we're going to do so let's rename channel dash name to notification because we're going to notify someone with a message before this even works we need to change up some things inside the app.php file with larval before this even works we need to change up some settings inside the app.php file that we got inside our convict folder so let's open it and let me actually make the terminal a little bit smaller alright with larval you have a list of server providers that will be automatically loaded then a request will be done of your application laravel will comment out the broadcast server event so what we need to do is to uncomment it in this file so let's scroll down to the well where is it provider section right here and if we scroll to the bottom you'll see the broadcast service provider class has been commented out so let's uncomment it let's save it and let's close it off and right now it's time to move it a step further by installing larval echo and what larvo echo essentially is is an advanced framework feature with a javascript package that takes advantage of those features and drastically reduces the amount of code that you need to write it's also a very common package when it comes to broadcasting now you can't use it right off the bat because you need to pull it in through the cli which will then add it inside the package.json file so inside the cli let's perform npm install pusher dash js space larval dash echo and we're going to pull it in in safe mode so double dash save this might take a second but it will be done shortly so pause the video with us adding this insidethepackage.json file it's pretty much assuming that we're compiling the app.js file with larvalmix and it actually does so let me quickly show it to you if we scroll down inside the root over application and go to the webpack.mix.js file you'll see that on the first line a constant called mix is being made which requires laravel mix and at the bottom right here you can see that the resources forward slash js forward slash app.js and the css file are both being compiled to the public folder right here what we need to do right now is to add two new routes inside our web.php file one which will fire the event and the second one that will listen to the event and do something with it so let's open our resources folder routes folder web.php file scroll down and right below our first route create a new one so let's define a route column column get it has an endpoint of in single quotes forward slash event instead of passing in a controller we're going to return a function so inside the function we do need to call the event method to call the event class that we have what we want to do right here is to call a new message notification inside the parentheses we need to pass in the message that will communicate with the constructor of our event so let's say that this is our first broadcast message now the second route that we're going to create will be with the view so right here let's create a new one so route column column get with the endpoint of forward slash listen comma function because we're only going to return a view and it's unnecessary to create a controller for that so what we're going to do is to return a view called listen now we obviously need to create the view since we don't have it at the moment so let's do it right now let's open the resources folder views folder and create a new file called listen.blade.php write down doc and hit tab alright whenever you want to use laravel echo you need to keep in mind that you need to have a csrf token for protection i expect that we all know how to use a csrf token inside a form but it's a little bit different when it comes up to your entire file since we're going to use it inside the meta tag of our html template so right below our last meta tag let's create a new one let's give it a name of csrf-token it has a content of larval snippets and we're going to call the csrf underscore token method we're also going to compile our app.js file inside our html template so right above our closing body tag let's create a script tag with a source of the asset methods and we're going to call the js forward slash app.js file now the next step is to load larval echo and pusher as a library insider.js file this will then allow us to open the websocket connection to pusher if we open our resources folder which we already have open our js file you'll see two javascript files the first one is app.js and the second one is bootstrap.js if we open the bootstrap.js file and scroll to the bottom you'll see a section right here which is commented out so let's uncomment it for a second right here you can see that we're importing echo from the larval dash echo file which is a file inside the node underscore modules folder then it's pulling in pusher as a window which is requiring the pusher dash js file what the pusher dash js file will do is making sure that echo provides pusher as our broadcast adapter then on the line below we're saying that a new echo object needs to be created with a broadcaster of pusher it has a key which is being grabbed from the dot erb file called mix pusher app e which is alright the cluster as well the force tlc is true and we also need to add a encryption well we don't need to add the encryption but we need to set it to true so let's say encryption is true in pusher we said that we want to work with vue as our frontend component so inside the cli let's say composer require larval dash view and then we can run php artisan ui view to pull in view alright now if we open the app.js file scroll down to the bottom you'll see that a content called app is being made with a new view and it's expecting an id of app inside the listen.blade.php file let's hit enter and what we want to do is to say that we want to create something so let's call the created method and add a set of curly braces write down echo dot which provides a view methods that we can use for subscribing at the moment we're using a public channel insider event so let's write down channel right here which is also a method and let's add a semicolon inside our channel method we can access the public data that has been passed along with our event so remember we called it in single quotes notification let's open our message notification for a second right here we're returning a new channel called notification and we're grabbing it in the app.js file now right after our channel method let's hit enter tab and add a dot add a listen method because we need to define the event class as well so let's say in single quotes message notification so it will listen to the message notification class and it will search for a channel called notification now right after our string let's add a comma parenthesis e which is a callback and then add a pointer for a class curly braces and inside the class we're basically going to say alert welp this showed up without a refresh and we need to end it off with a semicolon as well it is important that we compile our js files every single time we make changes this can be done in the cli by either performing let me make it bigger npm run def but this will compile it once and the best way is to run npm run watch which will automatically compile it when changes are being made oops we forgot to install npm so let's say npm install this might take a second but i don't think that it will take long a couple warnings which is all right all right now let's run npm run watch all right it's done there's one very easy step left before we can test it out in the browser we need to make sure that we register our channel that we want to broadcast to let's open the routes folder again which is again already open open the channels.php file scroll down and let's change up our broadcast channel right here inside the single quotes of our channel let's call notification we don't have params inside the function so let's remove it and let's only return a true right here let's save it let me go to the browser and let me actually change up my screen real quick let me put two screens next to each other alright on the left screen let's set the endpoint to forward slash event copy it which we only need to refresh to get a response in the forward slash listen so let's make this screen actually a little bit smaller on the right panel let's paste our url and let's change the endpoint to listen i forgot to save the file so let me go back to visual studio code let me actually save on files to make sure that everything is all right go back to brave refresh your endpoint let's inspect the page and let's go to the console it's actually saying that it can't find id app so let's add that inside our listen.blade inside the body let's create a div with a id of app save it go back to brave refresh it and our warning is gone let's actually open pusher as well oh why did i close that off we need it as well let me sign in let's open larval dash broadcasting click on the drop down because we need to go to the debug console which is empty at the moment let's go back to our forward slash listen endpoint all right now if we refresh our forward slash event endpoint you'll see that we received the api message inside our pusher and we also have a red icon right here on our favicon if we open it you'll see that the message that has been passed through inside insider event this is our first broadcast message has been printed out if we open our localhost you'll see that welp this showed up without a refresh has been printed out as well so let's do it one more time refresh our forward slash event and we're getting a message right here and the best possible way to showcase this is by changing up our alert to a console.log save it navigate back to brave refresh first our forward slash listen all right now let's refresh our forward slash event and in the console lock you'll see a message that has been showed up without a refresh now if we do it one more time you will see a two one more time one more time and one more time while i was preparing this video i ran into some issues and that was mostly with the convict and the cash clearing while i was trying to put javascript on the screen so be aware that if you run into an issue to clear your cache or convict i didn't run into the issue when i was recording the video but i did prior to it now that was it for this video this was a pretty simple example of what you can actually achieve with broadcasting but the most important thing that you need to know is that this is a pretty interesting way to create a live chat server where two persons are talking to each other this was it for this video if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button

Channel: Code With Dary

Views: 7,334

Keywords: laravel, laravel 8, laravel 8 tutorial, laravel 8 advanced, php laravel youtube, learn laravel step by step, laravel tutorial youtube, learn laravel 8, how to use events laravel, event listener laravel 8, queues laravel, broadcasting laravel, how to use broadcasting in laravel, why broadcasting, websockets laravel, websockets broadcasting, laravel pusher, pusher api laravel, how to use pusher api in laravel

Id: UwB5z6u7vt8

Length: 21min 28sec (1288 seconds)

Published: Mon Jul 26 2021