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 Script: सर्भरबाट घटनाहरू सुन्न र प्रयोगकर्ता इन्टरफेस अपडेट गर्न 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