بناء 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 توفر تجربة اتصال تفاعلية وسريعة الاستجابة.