এর সাথে একটি Real-Time চ্যাট অ্যাপ্লিকেশন তৈরি করা Laravel WebSocket

একটি চ্যাট অ্যাপ্লিকেশন কীভাবে ওয়েবে ইন্টারেক্টিভ যোগাযোগে বিপ্লব ঘটাতে পারে real-time তার একটি চমৎকার উদাহরণ । এই নিবন্ধে, আমরা ব্যবহারকারীদের প্রতিক্রিয়াশীল এবং ইন্টারেক্টিভ যোগাযোগের অভিজ্ঞতা প্রদানের জন্য ব্যবহার করে একটি সাধারণ চ্যাট অ্যাপ্লিকেশন তৈরি এবং সংহত করার মাধ্যমে হাঁটব । WebSocket real-time Laravel WebSocket laravel-websockets package

আবেদনের উদ্দেশ্য

real-time আমরা নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে একটি চ্যাট অ্যাপ্লিকেশন তৈরি করব:

তাত্ক্ষণিকভাবে বার্তা পাঠান এবং গ্রহণ করুন: ব্যবহারকারীরা পৃষ্ঠাটি রিফ্রেশ করার প্রয়োজন ছাড়াই তাত্ক্ষণিকভাবে বার্তা পাঠাতে এবং গ্রহণ করতে পারে৷

অনলাইন ব্যবহারকারীর তালিকা: অ্যাপ্লিকেশনটি অনলাইন ব্যবহারকারীদের একটি তালিকা এবং তাদের চ্যাটের অবস্থা প্রদর্শন করবে।

ছবি এবং ফাইল পাঠান: ব্যবহারকারীরা চ্যাটের মধ্যে ছবি এবং ফাইল শেয়ার করতে পারেন।

ইনস্টলেশন এবং কনফিগারেশন দিয়ে শুরু করা

শুরু করার জন্য, আমাদেরকে ইনস্টল করতে হবে এবং এর সাথে laravel-websockets package একীভূত করতে কনফিগার করতে হবে । এই পদক্ষেপগুলি অনুসরণ করুন: WebSocket Laravel

ইনস্টল করুন laravel-websockets package: package ব্যবহার করে ইনস্টল করে শুরু করুন Composer ।

composer require pusher/pusher-php-server

কনফিগারেশন ফাইল প্রকাশ করুন: ইনস্টলেশনের পরে, সেটিংস কাস্টমাইজ করতে কনফিগারেশন ফাইল প্রকাশ করুন।

 

php artisan vendor:publish --tag=websockets-config

চালান migration: এর জন্য প্রয়োজনীয় ডাটাবেস টেবিল তৈরি করুন WebSocket ।

php artisan migrate

সার্ভার শুরু করুন WebSocket: সংযোগগুলি WebSocket পরিচালনা করতে সার্ভারটি চালু করুন real-time

php artisan websockets:serve

ইউজার ইন্টারফেস তৈরি করা

বার্তা তালিকা, ইনপুট বক্স এবং অনলাইন ব্যবহারকারীদের তালিকা প্রদর্শন করতে আমরা HTML, CSS এবং JavaScript ব্যবহার করে একটি সাধারণ ইউজার ইন্টারফেস তৈরি করব।

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>  

একীভূতকরণ WebSocket এবং Broadcasting

আমরা অ্যাপ্লিকেশনের সাথে Laravel Broadcasting সংহত করতে ব্যবহার করব। WebSocket

ইনস্টল করুন Pusher: ড্রাইভার হিসাবে pusher/pusher-php-server package ব্যবহার করার জন্য ইনস্টল করুন । Pusher Broadcasting

composer require pusher/pusher-php-server

কনফিগার করুন Broadcasting: ফাইলটিতে config/broadcasting.php, ড্রাইভার কনফিগার করুন এবং আপনার Pusher শংসাপত্রগুলি প্রদান করুন।

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],  

একটি ইভেন্ট তৈরি করুন এবং সম্প্রচার করুন: একটি ChatMessageSent ইভেন্ট তৈরি করুন এবং যখন একজন ব্যবহারকারী একটি বার্তা পাঠান তখন এটি সম্প্রচার করুন।

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}  

জাভাস্ক্রিপ্ট স্ক্রিপ্ট: সার্ভার থেকে ইভেন্ট শুনতে এবং ইউজার ইন্টারফেস আপডেট করতে জাভাস্ক্রিপ্ট ব্যবহার করুন।

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});  

উপসংহার

এই টিউটোরিয়ালটি সম্পূর্ণ করার মাধ্যমে, আপনি সফলভাবে ব্যবহার করে একটি চ্যাট real-time অ্যাপ্লিকেশন তৈরি করেছেন ৷ ব্যবহারকারীরা তাৎক্ষণিকভাবে বার্তা পাঠাতে এবং গ্রহণ করতে পারে এবং আপনি দেখেছেন কিভাবে একটি প্রতিক্রিয়াশীল এবং ইন্টারেক্টিভ যোগাযোগের অভিজ্ঞতা প্রদান করে। WebSocket Laravel WebSocket