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