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