Hello guys, welcome back to our channel.
Today in this video we will talk about Laravel WebSocket package, created by Freek and Marcel.
What this package will do, it will help you to develop a real-time system in your Laravel
projects, for example, you can create real-time chat or notifications or any other real-time
system.
This package can handle the server side of WebSockets entirely.
And It completely replaces the need for a service like Pusher and a JavaScript-based
Laravel-echo-server.
If we see the Github repository of this package and open this composer dot json file, Here
you can see Laravel-WebSockets has been built on top of Ratchet.
This is the official website of Ratchet.
It is a PHP library to handle WebSockets.
If you have any core PHP or any Non-Laravel project where you want to implement a real-time
system using WebSockets then you can use this Ratchet PHP library.
Here is the example of chat application which I have developed using Ratchet library, You
can play with this If you want to learn how to implement it on your Non-Laravel projects.
I will put the link of this repository in the video description.
Let's head back to Laravel WebSocket.
In this video, we will see how to use this package in our Laravel project.
And In the next upcoming video, we will develop together a real-time chat system using this
Laravel WebSocket, Vue and Laravel Echo.
So, If you are new to this channel, Hit the red subscribe button and press the bell icon.
So you could never miss upcoming videos.
Now let's try out this package into Laravel application.
So, navigate to get started page.
And here is the installation steps.
We need to run this composer command in Laravel project to install this package.
So, first let's create a new fresh Laravel project that is Laravel websocket.
cd websocket.
Next I am going to run this composer command on terminal to install this package.
Package is installed.
Next, we can run this command on the terminal to publish migration file.
Database migrations here is the new migration created by the websocket package.
Here it is creating websockets statistics entries table to store statistic information
while running WebSocket server.
Next, we need to run the migration command to create tables in the database.
So, php artisan migrate.
Oops, before that we need to set up the database in the .env file.
I have already created a database, that is websocket, username is qirolab and password
is secret.
Now in terminal,
php artisan migrate
Next step is to publish the WebSocket configuration file:
config websockets.php file is published.
Let's look at this configuration file.
config websockets dot php
This package comes with multi-tenancy out of the box.
So, Here we can configure the different apps that can use the same WebSockets server, like
this.
Now here you may get confused.
You can see id is PUSHER_APP_ID, the key is PUSHER_APP_KEY, and the secret is PUSHER_APP_SECRET.
You may be thinking, here we need to add credentials from PUSHER service.
Actually, we are not going to use PUSHER service.
So, we don't need PUSHER credentials at all.
You can use any random app id, app key, and app secret.
Let's add this into the .env file.
PUSHER_APP_ID is equal to any ID.
PUSHER_APP_Key is equal to any Key.
PUSHER_APP_SECRET is any Secret.
This enable_client_messages is to send client message for example you may have seen in chat
application like user is typing.
This kind of events are sent through client messages.
We will see this later when we develop chat feature using this WebSocket package.
This enable_statistics is to let the package store statistic information while running
your WebSocket server.
Here we can add our custom provider.
Here we can allow incoming requests for only specific hosts.
Right now it is empty, So it will accepting requests from all hosts.
Here is the max_request_size_in_kb, and here is the path.
This package comes with Debug Dashboard, which is by default accessible at this path Laravel
hyphen WebSockets.
And we can modify it to something else, for example, admin slash WebSocket.
Let's see if it is working.
So, in terminal, php artisan serve.
Next in browser admin slash WebSocket.
Here it is a web socket dashboard.
By default, this WebSocket dashboard is accessible for the only local environment.
However, you can change this behavior by using Laravel Gate in ServiceProvider.
Let's see this in the documentation,
scroll
Here is debug dashboard and navigate to Protecting the Dashboard.
Here is the Gate snippet, and here we can add logic to protect web socket dashboard.
Next in the configuration file.
This is statistics configuration and this is SSL configuration.
Now let's dive into documentation and see next installation steps.
Our next step is Pusher Replacement, and we need to install this official Pusher PHP SDK.
This package is used for Broadcasting events in Laravel, of course for that we don't need
pusher service credentials.
So, let's install this package,
It's installed.
Next, we need to set BROADCAST_DRIVER to a pusher in the .env file.
So, navigate to .env file, here BROADCAST_DRIVER is pusher.
It's done.
Our next step is the Pusher Configuration.
We need to add this configurations in config broadcasting dot php.
So in the editor, config here is broadcasting dot php.
scroll
Here is pusher array section and paste this configuration options here.
This is the host where WebSocket server is running which is localhost in our case.
By default port is six thousand one and we can modify it when running PHP artisan WebSocket
serve command on terminal.
Next, our final step is setting up Laravel Echo for the frontend to receive broadcasted
events.
For that, we need to install javascript library Laravel-echo and pusher-js using npm.
In the terminal, first, let's run the NPM install.
It will install all the required packages from package.json.
It's done.
Next, we will pull in client-side dependencies that is Laravel echo and pusher-js.
Next, we need to configure this Laravel-echo into bootstrap dot js.
So, in editor navigate to resources js bootstrap dot js.
Scroll to the bottom and uncomment these lines.
And paste these options from documentations to here.
Here we don't need this cluster option.
Also, we need to remove this encrypted option because it is needed for custom SSL certification.
Here the key is fetched from the .env file.
Now every configuration is done and it is the time to test it out.
So, in the terminal, I am going to run NPM run watch.
It will keep watching our changes in javascript files and compiles the changes in app.js for
us.
In new terminal, I am going to run php artisan websocket:serve.
And another new terminal, I will run php artisan serve.
Head to browser.
refresh.
Now we can connect to the running web socket.
Here you can see these events are triggered by this dashboard and In this form, we can
trigger an event for debugging purpose.
We will see this in a few moments.
Next, I will create a demo event, to show you an example of broadcasting and listing
event on the frontend.
So in terminal,
php artisan make:event WebSocketDemoEvent.
Now in app events WebSocketDemoEvent dot php
Here it will accept somedata. and this somedata is equal to somedata.
Here declear public somedata.
For example purpose, I am going to return the public channel instead of the private
channel and make sure this class is imported here.
Lets say channel name is DomoChannel.
Now, where should I broadcast this event.
In routes web.php Here in this route, I am going to broadcast WebSocketDemoEvent and
it will accept somedata.
Next, in the bootstrap.js file, I am going to subscribe this DomoChannel here.
So, window dot echo dot channel demochannel.
And we are going to listen for an event.
In this case, It is the class name of this event.
Here you may have noticed that I forget to implements this ShouldBroadcast class.
This is important for broadcasting a event.
This echo channel will listen to this WebSocketDemoEvent, Actually, it is going to listen to it with
the namespace, that is App event WebSocketDemoEvent.
Here Laravel echo assumes that namespace is App Event, so, We do not need to specify full
namespace here.
Now, Next, what should happen when this event comes through.
For now, here I will console log the event.
On save, it is compiled to app dot js.
Next step, let's navigate to welcome dot blade dot php, and at the bottom, pull in js app
dot js.
We have compiled all the js files to the public directory and here we are loading that js
file.
Now in browser navigate to welcome page of the app.
In inspect tool, In the console tab you can see two errors.
First is csrf token not found that is because Laravel echo is expecting for access to csrf
token and it does this by looking for csrf token meta tag.
So, let's go here, Generally, it would be your layout file.
But for now, we are using this welcome blade file.
So, meta name equal csrf token and content is the csrf token.
Using this we are giving a way to Laravel Echo to track down csrf token.
Now if we come back and refresh, we will no longer see csrf token error.
Next VUE is trying to bind an element called app.
But it can't find it.
Let's add app id here.
refresh.
Here we go, all error fixed.
Now let's open this app in a new window.
Now here on this window, you can notice this console log, on real-time with WebSocket.
If I refresh this page again, here it caught the log again.
Laravel echo catching that event through WebSocket.
Now if we open admin websocket, and refresh this page.
Immediately you can see, it is subscribed to dome channel and catched this App Event
WebSocketDemoEvent.
For debugging purpose we can also trigger this event from Laravel Websocket dashboard,
Let's see this.
Here Channel is demo channel, the event is this one App Event WebSocketDemoEvent.
Here data must be in JSON format like this, some data any data.
Send event.
Here you can see it immediately catches that event.
This is all in this video about Laravel WebSocket package, In the next video, we will create
Chat feature using Laravel WebSocket package, VueJs, and Laravel Echo.
Now I want to show you a preview of that chat feature, which we are going to build into
the next video.
So in the terminal, I am going to navigate to Laravel WebSocket chat directory, This
is another Laravel app where I have created a chat system using this WebSocket package.
Next php artisan serve.
In another terminal also, navigating to this Laravel WebSocket chat directory.
and
php artisan websocket serve.
Head to the browser, refresh.
In this window, I am going to login with harish at example dot com and incognito I am going
to login with with john at example dot com.
Now navigating to chats page.
Here you can see the very standard layout.
Here will be the list of messages, this is input field to send a message, and on left
side lists of users.
Right now you can see one user.
Now in another window, If I navigate to chats page.
Immediately you can see a new user john listed here in real time without hitting refresh
page.
If John navigates to another page, then Immediately, John is removed from this list.
And if John navigates to chat page again, and he is listed again.
If Harish sends a message to John, Immediately it pops up here in real time without hitting
refresh.
John sends a message and pops up here.
Another thing you may noticed, When John is typing something here.
In this window you can see, John is typing text pops up.
How cool is that, We will together build this chat system from scratch in the next upcoming
video.
If you like the tutorial hit the like button, Share this video.
And don't forget to subscribe us.
See you soon into the next the video.




Không có nhận xét nào:
Đăng nhận xét