Real-time Laravel Ratchet Websocket Chat Application

Real-time Laravel Ratchet Websocket Chat Application https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEKndPkizziCIz4Y9jmM0BJzov6IvFDXfhcrBp3ogA627Uz3hI7MXNJMOeQhxlSny-xrh29_lXUVS4k7C8eW55RDG-aAkyUmJzOujuFPcgF5DQSK4__olobIEGWCTHlikftc_9UW0P1vmhVMGnnYLqXU7WHdJ-Mhk_55lGo-oA5oGk9VAtRvHRYPBrw/s16000/laravel-9-chat-application.jpg

In this tutorial, we will discuss How to make Real Time Chat Application in Laravel 9 Framework by using Ratchet Web Socket Library. In this tutorial, we will build Real-time Chat Application in which we users can do real time conversation via this Chat Application. So if you are searching tutorial on Real-time Laravel Chat Application with Web Socket, then you have land on the right place because here, we will build Real-time Chat Application using Laravel and Ratchet Web Socket.

Under this tutorial, we will not use any paid messaging service but for send and receive chat message in real-time here we will use Ratchet Web Socket Library with Laravel 9 framework. So at backend we will use Laravel 9 framework, Ratchet Websocket Library and MySQL database and at front-end we will use Vanilla JavaScript and Bootstrap 5 Library. So this web technology we will use for build real time chat application in Laravel framework by using Ratchet Websocket Library. In the current time, in every web application that requires real time communication so for implement real time communication, here we have use Ratchet Websocket Library with Laravel framework and by using this Library we can implement real time communication of data and build chat application.

What is Ratchet WebSocket?

Ratchet WebSocket is PHP Library which will provides tools to developer for create real-time web application in which client and server are connected in bi-directional, so client directly send message to other client via this Web Socket. It will create tunnel between two or multiple client and they can sed and receive message in real-time. This Ratchet WebSocket will make persistent connection from browser to the server and once the connection has been established then that connection will be open until client or server decide to close it. So in open connection mode, the client send message to other client.

 

Web Technology used for Build Laravel Chat Application

Server Side

• Laravel 9 Framework
• MySQL Database
• Ratchet WebSocket
• Composer

Client Side

• Vanilla JavaScript
• Bootstrap 5 Library

Architecture of Laravel Ratchet Web Socket Chat Application

In Below image you can find the basic architecture of Laravel Ratchet Web Socket Chat Application.

Features of Laravel Ratchet WebSocket Chat Application

Below you can find different feature of Real-time Laravel Ratchet WebSocket Chat Application.

1. Chat Application Registration
2. Chat Application Login
3. Manage Profile
4. List Unconnected User with Send Chat Request Button
5. Search User and List with Send Chat Request Button
6. Send Chat Request to User
7. Display User Chat Request in Notification Area
8. Approve or Reject User Chat Request in Notification Area
9. Display Approve Chat Request User in Connected User Area
10. List Approve Chat Request User in Connected User Area
11. Make Chat Area with Send Chat Button
12. Reset Chat Area
13. Load Chat history when User has select another user to Chat
14. Send Chat Message to One to One User
15. Whatsup like Message Send Read status using icon
16. Display number of unread message notification
17. Display User is Online or Not using icon
18. Display Whatsup like User Last Seen Detail

Below you can find step by step process for build Laravel Ratchet WebSocket Chat Application.

1. Install Laravel 9 Application
2. Make Database Connection
3. Create Controller
4. Create View Blades Files
5. Set Route of Controller Method
6. Run Laravel 9 Application

Step 1 – Install Laravel 9 Application

In first step, we want to download fresh copy of Laravel 9 framework. So we have goes to command prompt and goes to directory where we can run our PHP code. So after goes into that directory, we have to run following command which will make custom_login directory and under that directory it will download and install Laravel 9 Application.

composer create-project laravel/laravel custom_demo

Step 2 – Make Database Connection

Once we have download and install Laravel 9 Application, now we first we want to make MySQL database connection. So for this, we have to open .env file and under this file, we have to define MySQL database configuration. So after define this configuration details it will make MySQL database connection with Laravel 9 Application.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=

So after make MySQL Database connection, now we want to make user table under mysql database. So here we will use default user table of Laravel 9 Application. So here user table defination has been stored under database/migrations directory. So for create table in MySQL database from Laravel Application, we have to run following command. So this command will create users table under MySQL database from this Laravel 9 Application.

php artisan migrate

Step 3 – Create Controller

Under this Laravel Ratchet Chat Application, first we want to make controller for Login and Registration page. So for create Controller for Chat Application Login and Registration page, we have goes to command prompt and run following command.

php artisan make:controller SampleController

This command will make SampleController.php file under app/Http/Controllers directory. So we have to open this directory and write following code for make Login Registration and Logout feature for this Real-time Laravel Ratchet WebSocket Chat Application.

app/Http/Controllers/SampleController.php

validate([
            'name'         =>   'required',
            'email'        =>   'required|email|unique:users',
            'password'     =>   'required|min:6'
        ]);

        $data = $request->all();

        User::create([
            'name'  =>  $data['name'],
            'email' =>  $data['email'],
            'password' => Hash::make($data['password'])
        ]);

        return redirect('login')->with('success', 'Registration Completed, now you can login');
    }

    function validate_login(Request $request)
    {
        $request->validate([
            'email' =>  'required',
            'password'  =>  'required'
        ]);

        $credentials = $request->only('email', 'password');

        if(Auth::attempt($credentials))
        {
            return redirect('dashboard');
        }

        return redirect('login')->with('success', 'Login details are not valid');
    }

    function dashboard()
    {
        if(Auth::check())
        {
            return view('dashboard');
        }

        return redirect('login')->with('success', 'you are not allowed to access');
    }

    function logout()
    {
        Session::flush();

        Auth::logout();

        return Redirect('login');
    }
}

Step 4 – Create View Blades Files

In this steps, we have to make Blade views file for display HTML output in the browser. So first we have to make Login, Registration and Master template for this Laravel Chat Application. So we have goes to resources/views directory and under this directory, we have to make following views blade file.

resources/views/main.blade.php

    
    
    
    



    

        

            Laravel 9 Custom Login Registration
            
            

                    
                

                    @guest

                    

                        Login
                    
                    

                        Register
                    

                    @else

                    

                        Logout
                    

                    @endguest
                
                
            
        
    
    


        @yield('content')
        
    
    

resources/views/login.blade.php

@extends('main')

@section('content')

@if($message = Session::get('success'))


{{ $message }}


@endif


	

		

			
Login
			

				

					@csrf
					

						
						@if($errors->has('email'))
							{{ $errors->first('email') }}
						@endif
					
					

						
						@if($errors->has('password'))
							{{ $errors->first('password') }}
						@endif
					
					

						
					
				
			
		
	


@endsection('content')

resources/views/registration.blade.php

@extends('main')

@section('content')


	

		

		
Registration
		

			

				@csrf
				

					
					@if($errors->has('name'))
						{{ $errors->first('name') }}
					@endif
				
				

					
					@if($errors->has('email'))
						{{ $errors->first('email') }}
					@endif
				
				

					
					@if($errors->has('password'))
						{{ $errors->first('password') }}
					@endif
				
				

					
				
			
		
	


@endsection('content')

resources/views/dashboard.php

@extends('main')

@section('content')


	
Dashboard
	

		
		You are Login in Laravel 9 Custom Login Registration Application.
	


@endsection('content')

Step 5 – Set Route of Controller Method

Next we have to set route of Controllers class method. So for this, we have to open routes/web.php and under this file, we have to write following code for set route for Controllers Class method.

routes/web.php

group(function(){

    Route::get('login', 'index')->name('login');

    Route::get('registration', 'registration')->name('registration');

    Route::get('logout', 'logout')->name('logout');

    Route::post('validate_registration', 'validate_registration')->name('sample.validate_registration');

    Route::post('validate_login', 'validate_login')->name('sample.validate_login');

    Route::get('dashboard', 'dashboard')->name('dashboard');

});

Step 6 – Run Laravel 9 Application

Now we have come to last step and under this step we have to check output in the browser. So before check output in the browser, first we need to start Laravel server. So we have goes to command prompt and run following command.

php artisan serve

This command will start Laravel server and it will provide use base url of our Laravel Ratchet WebScoket Chat Application, so we have goes to browser and paste following url in browser for check output in the browser.

http://127.0.0.1:8000/login

This is partial code and we will update remaining code on every publish of video tutorial. So check this tutorial, on every publish of new video tutorial of this Real-time Laravel Ratchet WebSocket Chat Application.

Download Source Code

In this tutorial, we will discuss How to make Real Time Chat Application in Laravel 9 Framework by using Ratchet Web Socket Library. In this tutorial, we will build Real-time Chat Application in which we users can do real time conversation via this Chat Application. So if you are searching tutorial on Real-time Laravel Chat…
chat,laravel,and,laravel chat app,laravel chat application,laravel chat application with websocket,laravel chat script,laravel websockets,real time chat application in laravel,real time chat laravel

https://www.universumhub.com/other/real-time-laravel-ratchet-websocket-chat-application/ chat,laravel,and,laravel chat app,laravel chat application,laravel chat application with websocket,laravel chat script,laravel websockets,real time chat application in laravel,real time chat laravel