Real-time Chat App using Laravel Pusher and Jquery

1. How to Create Pusher Account

2. How to Create an App in Pusher Laravel

3. Example Of Chat App with Laravel Pusher and JQuery

4. Conclusion

Types of Laravel Pusher Channels

• Public Channels: These channels are open to everyone; any user can subscribe to them without any authentication. Public channels are suitable for broadcasting events that everyone can see.

• Private Channels: These channels are only accessible to authenticated users. You can use private channels to send sensitive information only specific users should see.

• Presence Channels: These channels are similar to private channels but also provide information about who is currently subscribed to the channel. Presence channels are useful for building real-time chat applications, online collaboration tools, and multiplayer games.

• Encrypted Channels: These channels provide end-to-end encryption for messages sent between clients and servers. Encrypted channels are useful for applications that deal with sensitive data or require high security.

How to Create Pusher Account

How to Create an App in Pusher Laravel

Example Of Chat App with Laravel Pusher and JQuery

Step 1: Install Package

composer require pusher/pusher-php-server

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
Don’t forget to clear cache : php artisan config:clear

Step 2: Create Route

Route::post(‘pusher/send-message’, ‘pusherController@sendMessage’)->name(‘pusher.sendmessage’);

Step 3: Send a message using Laravel Pusher and Jquery

var message = ‘Hello, This is my first real time message’;
$.ajax({
type: ‘POST’,
cache: false,
dataType: ‘json’,
url: ‘{{route(“pusher.sendmessage”)}}’,
contentType: false,
processData: false,
data: {message : message},
headers: {
‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)
},
success: function (result) {
if(result.response_code == 1){
alert(“Message has been sent”);
}else{
alert(“Fail to send message”);
}
},
error: function(){
alert(“Something went wrong please try again later”);
}
});

use Pusher\Pusher;
use Validator;
class pusherController extends Controller{
public function sendMessage(Request $request) {
$return_data[‘response_code’] = 0;
$return_data[‘message’] = ‘Something went wrong, Please try again later.’;

$rules = [‘message’ => ‘required’];
$messages = [‘message.required’ => ‘Please enter message to communicate.’];
$validator = Validator::make($request->all(), $rules, $messages);
if ($validator->fails()) {
$message = implode(“
“, $validator->messages()->all());
$return_data[‘message’] = $message;
return $return_data;
}

try {
$options = [
‘cluster’ => env(‘PUSHER_APP_CLUSTER’),
‘useTLS’ => true
];

$pusher = new Pusher(
env(‘PUSHER_APP_KEY’),
env(‘PUSHER_APP_SECRET’),
env(‘PUSHER_APP_ID’),
$options
);

$response = $pusher->trigger(‘my-chat-channel’, ‘my-new-message-event’, [‘message’ => $request->message]);
if($response){
$return_data[‘response_code’] = 1;
$return_data[‘message’] = ‘Success.’;
}
} catch (\Exception $e) {
$return_data[‘message’] = $e->getMessage();
}
return $return_data;
}
}

Step 6: Implement Login Logic

/**
* @OA\Post(
* path=”/api/login”,
* summary=”Authenticate user and generate JWT token”,
* @OA\Parameter(
* name=”email”,
* in=”query”,
* description=”User’s email”,
* required=true,
* @OA\Schema(type=”string”)
* ),
* @OA\Parameter(
* name=”password”,
* in=”query”,
* description=”User’s password”,
* required=true,
* @OA\Schema(type=”string”)
* ),
* @OA\Response(response=”200″, description=”Login successful”),
* @OA\Response(response=”401″, description=”Invalid credentials”)
* )
*/
public function login(Request $request)
{
$credentials = $request->only(’email’, ‘password’);
if (Auth::attempt($credentials)) {
$token = Auth::user()->createToken(‘api_token’)->plainTextToken;
return response()->json([‘token’ => $token], 200);
}
return response()->json([‘error’ => ‘Invalid credentials’], 401);
}

Conclusion