close

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');  
}

JavaScript સ્ક્રિપ્ટ: સર્વરમાંથી ઇવેન્ટ્સ સાંભળવા અને વપરાશકર્તા ઇન્ટરફેસ અપડેટ કરવા માટે JavaScript નો ઉપયોગ કરો.

// 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