يعد تطبيق الدردشة real-time مثالاً ممتازًا على كيفية WebSocket إحداث ثورة في real-time الاتصال التفاعلي على الويب. في هذه المقالة ، سننتقل عبر إنشاء تطبيق دردشة بسيط باستخدام Laravel والتكامل WebSocket باستخدامه laravel-websockets
package لتقديم تجارب اتصال تفاعلية ومتجاوبة للمستخدمين.
أهداف التطبيق
سنقوم ببناء real-time تطبيق دردشة بالميزات التالية:
إرسال الرسائل واستلامها على الفور: يمكن للمستخدمين إرسال الرسائل واستلامها على الفور دون الحاجة إلى تحديث الصفحة.
قائمة المستخدمين عبر الإنترنت: سيعرض التطبيق قائمة بالمستخدمين المتصلين وحالة الدردشة الخاصة بهم.
إرسال الصور والملفات: يمكن للمستخدمين مشاركة الصور والملفات داخل الدردشة.
الشروع في التثبيت والتكوين
للبدء ، نحتاج إلى تثبيت laravel-websockets
package وتكوينه للتكامل WebSocket مع Laravel. اتبع هذه الخطوات:
قم بتثبيت laravel-websockets
package: ابدأ بتثبيت package ملف Composer.
انشر ملف التكوين: بعد التثبيت ، انشر ملف التكوين لتخصيص الإعدادات.
تشغيل migration: إنشاء جداول قاعدة البيانات الضرورية لـ WebSocket.
بدء WebSocket الخادم: قم بتشغيل WebSocket الخادم للتعامل مع real-time الاتصالات
بناء واجهة المستخدم
سننشئ واجهة مستخدم بسيطة باستخدام HTML و CSS و JavaScript لعرض قائمة الرسائل ومربع الإدخال وقائمة المستخدمين عبر الإنترنت.
دمج WebSocket و Broadcasting
سنستخدم Laravel Broadcasting للتكامل WebSocket مع التطبيق.
التثبيت Pusher: قم بتثبيت البرنامج pusher/pusher-php-server
package لاستخدامه Pusher كمشغل Broadcasting.
تكوين Broadcasting: في config/broadcasting.php
الملف ، قم بتكوين برنامج التشغيل وتقديم Pusher بيانات الاعتماد الخاصة بك.
إنشاء حدث وبثه: قم بإنشاء حدث ChatMessageSent وقم ببثه عندما يرسل المستخدم رسالة.
نص JavaScript: استخدم JavaScript للاستماع إلى الأحداث من الخادم وتحديث واجهة المستخدم.
خاتمة
بإكمال هذا البرنامج التعليمي ، تكون قد نجحت في إنشاء real-time تطبيق دردشة باستخدام WebSocket ملف Laravel. يمكن للمستخدمين إرسال الرسائل واستلامها على الفور ، وقد شاهدت كيف WebSocket توفر تجربة اتصال تفاعلية وسريعة الاستجابة.