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