How to use Laravel WebSocket - This lesson public channel

hi my name is ali i'm software engineer i have experience in php development for five years in this lesson i'm gonna teach you how to make a real-time application with webcircuit so let's create a fresh installation of laravel so as you can see our laravel installation is completed and now we should go to uh check the laravel website for the documentation of laravel website and implement this in this section so let's go to laravel website and going to click on the documentation section and let's see broadcasting and going to this section and open source alternative actually we're going to use a pusher replacement package it's it's based on the pusher protocol channels but it's self-hosted and it's not necessary to pay anything so let's go to this package a laravel web circuit this is a github page and you should go to the documentation section about that and let's go to the installation section so there is a comment you should do required in your package so as you can see we are hitting an error it's because of laravel 8 and i had some research you should actually remove the composer log file but older version is fine and it's working you could use this package from laravel 5.5 i think so it's not necessary to do it in auto version so let's go and delete our composer log file and as you can see we are in our new laravel installation let's go and delete this composer log file let's start requiring package from here as you can see our installation is completed let's go to documentation and check what is necessary to do this route is actually using for a statistic dashboard and right now it's not necessary to do that i'm just going to show you how you can use this package but if you're interested you could do it also but it's optional and it's not necessary so let's publish this configuration file and as you can see it's completed and going to this section this is a default configuration you could change it i mean these are or related about the pusher app id i mean these configuration could be fake it's not necessary to be a realistic one um so let's go to a pusher replacement section in the basic usage it's also needed you that require this package too installation is completed let's go check documentation the broadcast driver should be changed to pusher right now he's a luck we would do it later right now he's on a lock broadcast driver is luck i'm gonna show you what is log and what is the usage and how is broadcasted so so let it be for later in this broadcasting.php file you should also need at this configuration go to this pusher section and paste this new configuration let's go to the env file and add some data i'm gonna put app id as my id so pusher app key is also be my key keep something like that and my secret also so that's enough and so let's go to the web.php file in this file we are gonna create two roads the first road would receive a notification it's just for testing to send a message to the client for broadcasting i mean based technically it would fire an event with the message and the second road is just for rendering view to receive notification so the first one is road get notification summer and function we would get our notification the message query string and put it into the keyboard variable and we should fire up an event here and the second row would be get notification let's return a view and this view name is notification so let's create this blade file uh we would add a script tag in here later before that we should create our event so let's use which partisan make even comment to create our event and the name of this event would be anything that you want but me i'm going to name it broadcasting message to user so as you can see and for an even folder added to project and a broadcasting message to user so this class should implement should broadcast interface to broadcast data to user as you can see this channel by default broadcast messages on a private channel and the name with channel name so we would i would teach you private channel in the lessons later but right now i'm gonna stick to the public channel the public channel it does not need to authentication and it could be broadcasted to all users so i'm going to change the private channel to a channel and name it to public channel so the data in this broadcasting message to user in the data that actually we want to send to user it could be it could be sent in two ways first way you could define public property for this class and they're also a method uh it's written in the documentation of laravel website and you could just create an array for data that we would send to users so i'm gonna stick the easiest one public message and i'm gonna get this message from the construction of method and initialize this message from here let's fire this broadcasting message to user from two that we wrote before even new broadcasting message to user and so let's fire this notification i mean call this road from browser and check what's happened first of all we should serve our projects so uh it's cold and there wasn't any error let's go to the storage folder in the log section and a lot of unlock as you can see there is a message broadcasted because the broadcasting driver is unlocked you see broadcasting from this event on the channel public channel with this message goes to user so let's go to environment file and change the log to pusher broadcasting driver so we added this now let's go to the client section and implement notification receiver in client section laravel use echo package but you could use this service in any any client that you prefer uh any client that has a pusher library i think you could use this in ios android or whatever client that you want to implement so let's go into the strap dot js file and to add our configuration let's go to web circuit documentation and copy this configuration well and disable the stat is true it's it's you mostly used for production environment but right now we're in a development environment we would set it to false and our key is my key get it in here let's use mpm to install my packages so it's already done and we should go to plantation to order to also install these packages as you can see it's installed and let's build as you can see the build process is completed so it would add a js file in the public directory and we could use this so let's add this js file to in notification play page in this second script tag we should subscribe on the channels on the second script tag we should subscribe on the channels that we want to listen to so we will use echo channel channel is public channel as you can see in this vlog we could also copy paste it and listen to this event the event name is this actually is the nameless face of this event so don't do not forget to add a second back and slash for that also there is a way that you can override this event to get much easier but right now it's unnecessary you could use the broadcast broadcast as method in this we will test it in later but right now is enough and a tricky note do not forget to put the dot at the beginning it's so much important so and for the second parameter it would also pass so let's see what is inside of the that is great so let's run over web circuit server [Applause] as you can see our web circuit server on port 6001 so let's check what we have we're gonna call the second route and let's add some data in the body to see we are in the right page or not [Applause] so let's open console.log check what is everything works fine let's refresh this page and as you can see there is a web circuit connection in here and go to the responses and as you can see subscribation is succeeded to the public channel let's send an event and even came into this page it's for app event broadcasting user and data this is the option just for development but in the production section we don't have you can see just uh this connection and let's go to console.log and as you can see the hello world is received checkpoint so let's try to change broadcast and i mean the event name and this event so let's go to the network section and check what else we have and you can see the notification event name is changed so let's change the subscribation to that notification do not forget this dots you should refresh this page to get your names so we can see again is everything looks fine and you could change and we get the data on this page thank you for listening in the next lesson i'm going to teach you how to use private channel thank you so much

Channel: Programming by Ali

Views: 1,042

Keywords: Laravel, RealTime Application, Realtime, Pusher, Laravel Echo, Websocket, Public Channel

Id: f4zxBrhIKWQ

Length: 15min 58sec (958 seconds)

Published: Thu Jul 15 2021