Lesson 21 Laravel Websockets

foreign [Music] to the channel today we are going to learn about  laravel websocket how we can install them how we can configure them and how we can use them so  what is the laravel websockets why do we need to use it what is that used for imagine you  are making a web application that required a real-time communication like chat system like  sending a notification all of them are can be possible using web sockets so as we said we are  going to use Beyond code laravel web sockets why we are goin

g to use this package because  it's easy to configure and provides real-time communication without the need for constant HTTP  request it allows for broadcasting even driven communication it's scalable and easy to integrate  into existing laravel application installing it it's very easy we just need to write some composer  commands and it's done it does not need a lot of configuration it's very easy to install it once  we have installed it we can use it also we are able to create public and priv

ate channels using  this if for example if you you want to send a notification to all of your users even if they  are not logged in we can also make it using a lot of a websocket and if you want to send a  notification to only this particular user we can also do that so in conclusion a lot of our  websocket is an excellent package for enabling real-time communication and laravel application  it's easy to install and use and it provides several advantages over other Solutions with a lot  of a web

socket developers can create disk label even driven application with real-time updates  and broadcasting so let's go to our vs code and install Beyond code laravel websocket and if you  have any questions write it down in the comment. First we need to install laravel websocket using  Beyond good laravel websocket so and this is the documentation page I will add the link in  the description now let's start let's start by copying this first installing the package  let's go in on our terminal paste

it and enter okay the installation is finished but  sometimes when you want to install you may face the version issue if that happens  you just have to type Dash W and enter that will solve your problem now let's go and copy  another code to publish our file migration file copy this one paste it in our terminal  this one is also done now let's run copy this one also okay migration is also done now  if I come to my database refresh this as you guys can see there is a new table  with the name of

web sockets Aesthetics so this one is also done now let's go and copy  this one to publish the configuration okay this one is also done so our  websocket is installed now let's install our Pusher for that  I will type composer require Pusher slash Pusher Dash PHP Dash server enter okay our Pusher is also installed  now let's go to dot EnV file and Dot in v file we have to change the broadcast  driver from log to Pusher so I will type for sure now we have to also configure The  Pusher settings fo

r that I will come down and in The Pusher settings in here I will  just type any key because we are just using The Pusher Library not the actual Pusher so  for example I will type just pass app key and Pusher app key like this any  random number with and Pusher Secret this one also random I don't need these so  I will comment the rest except The Pusher app cluster so let's comment this out so  now let's go to inside our config folder and broadcasting.php let's find the connection  Pusher now let

's change some options so first thing I will change the host so let's delete  this and the state of that is type 1 2 7.0.0.1 change the port to 6001 6001 scheme of 2. http and we don't need this one let's  remove this save so this is the con broadcasting configuration now let's go to  our app.php inside config folder scroll down until you find this providers so in the  providers we just uncomment this one let's save this one also now let's run  our project by typing PHP Artisan serve okay our pr

oject is running let's go to  documentation and into introduction then let's run our websocket server also so let's copy this  and create open a new terminal and paste it here enter this one is also running now in  our project let's go and check this so and here I will type laravel  Dash web sockets enter connect so it's connected now let's go create a new  event and test this so for that in the terminal I will open a new terminal and type PHP artisan  make event test web socket now let's get en

ter okay our event is created let's go to the  event folder app events test event in our newly created event in front of the class name  we have to type implements should broadcast and inside the broadcast on method we have to change  private channel to channel and give it a name for example testing now our event is ready now  let's create a controller to trigger this event for that inside my manual I will type HP  artisan make controller and give it a name test controller enter our controller i

s  ready let's go and set our controller now let's create a method public function test and in here I will type event new  my newly created event which is test websocket so now let's create a route for  this and the routes I will type route gate test controller colon colon class and test method so now let's go to our browser let's copy this  and inside a new terminal Let's uh call our route okay it's done now if we come to our back  to our preview step as you guys can see our event has been trig

gered so whenever you see  your event that is triggered in here it means you are back into your server code or backend  is working fine now let's go to front and and configure our friends in now let's go back to our  browser inside our resources JS and bootstrap.js and inside here let's uncomment everything from  import Eco from laravel equal up to the end and change the wa Source let's  say delete everything from here in here I will type window dot location dot  host name change the w export to

6000 and one six zero zero one we don't need WS export let's  remove this and change the Force to TLS to false at the end let's remove this and type disable  status true now let's save open the terminal and in here let's type npm install  laurable Eco space and pusher G is so installation is finished now we have to type  npm and install to install the all the packages and then there is any package  pending and at the end we have to type npm run div to compile  all the changes that we brought it

's done now let's go to views and create a view so in the views I will create a new view with the  name of chicken web sock kit dot blade dot PHP and inside this I will create an HTML5  now inside the HTML I will create a script in here I will type set time out and  for example two hundred milliseconds inside this I will type window the same thing  that we wrote here actually let's copy this okay dot Channel and our channel name which we give in our  web socket so it was testing now copy this pa

ste it here and let's write dot lesson to  our event full address so I will type dot i events this web socket and coma we created a function in  here and like an arrow function like this and we will say console.log e to  look anything that we get from our websocket now let's go and make a route for this to this  build so in the routes I will come and say route okay for example something like this  and give it my view name foreign View now let's go to browser this let's  copy this let's paste it

here and check go to console so it's saying cannot read property of Amplified  Channel the reason is that we did not import our app.js so let's go to back to our vs code and  in here in the top of script I will type add by resources slash JS app dot JS this file now  let's save this let's go back to browser refresh our page and we have I think some spilling mistake yeah now let's go refresh so the error is gone  now if I come in here and Trigger the event let's go back to that browser tap as you

guys can  see we have an empty array the reason is because we did not send any data with our event so let's  create test variable and send it with us for that I I will create a public variable and give it  a name of for example data dollar sign data and initialize it here dollars  and this data is equal to this this is this data now let's save this  go to our browser trigger the event come back to this browser okay okay we have a  prop error we forget the semicolon now let's go back three trigg

er it here as you guys can see  we got our variable in here so the this is the way that we create a websocket but uh we can do  more we can give this event a name so let's go and give it a name for that in that below I  will type public function broadcast as as and return give it a name for example  my web socket let's save it now let's go to browser in our websocket dashboard  let's click connect now let's trigger this now if we come here as you can see the name has  been changed so we have now

we will can copy this and in our view we we can change this  to our websocket name and also don't forget to add the dot in the beginning of the name now  let's save this let's go to back to the browser and refresh our page trigger this event so as you guys can see now we we got our  data and even if I open a new private window I can see this so let's uh open it here  let's copy this in here let's go to console okay now if I trigger my event as you guys can  see in this window it automatically s

hows so this is the way we create a public websocket  in laravel the problem in here if we send the trigger and even all the users will receive  this message so let's let's now see how we can create a private channel for that I will  come back to my project and in the terminal let's stop this let's create an  earth system to register users now the installation of odd is finished  now let's go and create two users so for that in the browser okay we get this channel and  Define Channel let's go ba

ck to our bootstrap.js because we have created our yeah everything  has been replaced so I will just undo but if you guys want to do this first install  your art system then the web socket so let's go back to our browser register to  user as you it's gone now let's register okay if we trigger the this event Let's see we  get it now let's uh create a private channel for that I will come into my browser and  in the terminal I will make a new event so let's make PHP artisan make event  and give it

a name for example private with web socket enter now let's  go to our newly created event now in this event first of all  let's type your implements should broadcast and in the broadcast on in here I will type the channel name which will be private  Channel and the channel name will be my private Channel Dot now after the dot  you have to specify to which user we want to send this so I will type user Dot and the  user ID for example if I go to my database users refresh I have two users so I want

to send  for user number five the ID of the user five so now let's save and let's give it a  name also public function root cause as return private message so let's save this and  let's send a data also public function my data sorry public only or function so dollar sign this my data you got the message okay now  our message is done broadcast is done the name is done now let's go to routes and  channel in here let's create a new channel so we will type root cost colon colon Channel  our channel

name let's copy it from here this one let's copy all of them and in the channel  let's paste it in here instead of ID I will type ID now let's create a callback function  inside the parameter so comma function dollar sign user comma ID and in here  let's say the term dollar sign user that's it ID is equal ID okay now our private channel is Red our event is  ready and our private channel is also ready now let's go to our view so in uh our newly created  View in the state of Channel we will type

private and our channel name which was yes let's copy this paste it here and instead of ID I will type  current user ID so I will type odd colon colon ID and also to differentiate the users let's  print the user ID here also so I will type or colon colon ID now let's go back to browser oh  let's uh write our web socket name so in here copy this broadcast as paste it here save let's run in PM npm  run Dave to compile everything that we now let's go back to our browser so everything is working fin

e we don't  we didn't get any errors in our console now let's create a route and Trigger  this event so let's go to our web.php I did now let's go back to our browsers let's  open a new terminal a new tab here and test our newly created even so as you guys can  see the moment I trigger it I receive M message here so this is the way we create a websocket in  laravel hope you enjoyed the video and like it if you have any questions don't forget to write it  in the comments and see you guys in the n

ext video