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

जावास्क्रिप्ट स्क्रिप्ट: सर्वर से घटनाओं को सुनने और यूजर इंटरफेस को अपडेट करने के लिए जावास्क्रिप्ट का उपयोग करें। 

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