اريد مقاله لفهم live chat in laravel باستخدام package

السلام عليكم @Hafsa Aly

يوجد العديد من المكتبات لعمل Live Chat في لارافيل تفضلي هذه مقالة لكيفية عمل Live Chat بإستخدام إطار Pusher  

chat app with Laravel

بتاريخ الآن قال Mohamd Imran:

السلام عليكم @Hafsa Aly

يوجد العديد من المكتبات لعمل Live Chat في لارافيل تفضلي هذه مقالة لكيفية عمل Live Chat بإستخدام إطار Pusher  

chat app with Laravel

واطار package

بتاريخ الآن قال Hafsa Aly:

واطار package

Pusher هو مدمج في لارافيل ,أي لن تحتاجي إلى Package  لكن إن أردتي Package تقوم بهذا العمل تفضل هنا Real-Time Chat Package for Laravel

شكرا لك ولكن ان استطعت ان تعطيني لمحه بسيطه عن هذا الموضوع فشكرا لك

بتاريخ 5 دقائق مضت قال Mohamd Imran:

Pusher هو مدمج في لارافيل ,أي لن تحتاجي إلى Package  لكن إن أردتي Package تقوم بهذا العمل تفضل هنا Real-Time Chat Package for Laravel

لم استطع الحصول ع معلومه منه غي واضح مثل pusher

بتاريخ 1 دقيقة مضت قال Hafsa Aly:

شكرا لك ولكن ان استطعت ان تعطيني لمحه بسيطه عن هذا الموضوع فشكرا لك

إن كنت تقصدين ال Live chat من خلال Package فا يتم أولا تثبيت الباكيج في المشروع ومن ثم إستخدام الميثودز التي تحتاجينها على حسب ما ترغبين في المشروع , لكن إن إحتجت إلى نسخة ديمو أي مشروع جاهز يمكنك الإطلاع عليه من هنا demo Laravel , أما إن تقصدين تحتاجين إلى كيفية عمل ذلك تفضلي هذه مقالة أخرى تتحدث عن الموضوع Build a Chat App with Laravel

يفضل فهم مبدأ عمل الالية و منطقها و إنشاء التطبيق على طريقتك الخاصة . ولنقل أنه يمكننا ذلك عن طريق الإستعانة بمفهوم الويب سوكيت web sockets  . (يمكنك التعرف أكثر على هذا المفهوم هنا ) بحيث نقوم :

- في الخادم (في الواجهة الخلفية للتطبيق) بإنشاء قناة أو قنوات بحدث أو أحداث معينة , ثم تمرير البيانات عبر هاته القنوات مستهدفين أحداثا معينة . 

- في المتصفح (في الواجهة الأمامية للتطبيق) بالإشتراك في هاته القنوات و الإستماع لهاته الأحداث و التصرف بناء عليها (كأن يتم عرض الرسائل بشكل ) . 

مثال عن الإستعمال : 

لما تكتب سارة رسالة بمربع نص و تضغط زر الإرسال إلى شيماء سيتم إرسال طلب HTTP إلى الخادم .

سيقوم الخادم بمعالجة طلب سارة و تسجيل الرسالة بقواعد البيانات , و في نفس الوقت سيقوم بإثارة الحدث المرتبط بالعملية و ليكن NewMessageEvent ضمن القناة ShaimaaChannel .

شيماء مشتركة في القناة ShaimaaChannel و تستمع لأية إثارة لأحداثها , ففي حالة إثارة أية حدث ستقوم بالتقاط البيانات التي تم تمريرها عبره دون تحديث الصفحة . 

لما يتم إثارة الحدث NewMessageEvent ضمن القناة ShaimaaChannel ستقوم الواجهة الأمامية لشيماء بالتصرف بناء على البيانات التي تلتقطها عبر هاته القناة في هذا الحدث . كأن تقوم بإظهار  تنبيه نصي . 

و قد نحتاج إلى دريفر لمساعدتنا في تمرير البيانات و إنشاء القنوات من مثل Pusher.

و للتوضيح أكثر سنقوم بإستعمال Pusher كونه معدا مسبقا للعمل مع لارافل بشكل متسق , و هو ما سنقوم به في هذا المثال .. يمكن عمل الفكرة عن طريق المنطق التالي : 

تثبيت حزمة خادم Pusher في تطبيق الللارافل :

composer require pusher/pusher-php-server

إنشاء تطبيق Pusher : نحتاج في هاته الخطوة إلى التسجيل في pusher.com و تسجيل تطبيق جديد .

بعد ذلك سنحتاج نسخ معلومات التوثيق و نقوم بوضعها في ملف الإعداد env. كما يلي : 

PUSHER_APP_ID=PUT_YOUR_PUSHER_ID_HERE
PUSHER_APP_KEY=PUT_YOUR_PUSHER_KEY_HERE
PUSHER_APP_SECRET=PUT_YOUR_PUSHER_SECRET_HERE
PUSHER_APP_CLUSTER=PUT_YOUR_PUSHER_CLUSTER_HERE

كما أنه يجب تغيير قيمة BROADCAST_DRIVER:

BROADCAST_DRIVER=pusher

نقوم بإنشاء حدث معين :

php artisan make:event NewMessageEvent

سنلاحظ إضافة ملف NewMessageEvent.php داخل مجلد events , لنتأكد من أنه سيتم تعديله ليكون على هذا النحو : 

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewMessageEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public $data;
  
    /**
     * هنا يتم التقاط أية بيانات و تسجيلها ضمن هذا الكائن
     *
     * @return void
     */
    public function __construct($passed_data)
    {
        $this->data = $passed_data;
    }

    /**
     * هنا يتم تعريف القنوات التي من المفترض أن ينتمي إليها هذا الحدث 
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chaimaa-sara-channel');
    }
}

إنشاء متحكم يختص بالعملية : 

php artisan make:controller MessagesController

ثم لنتأكد من وضع المحتوى التالي به : 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MessagesController extends Controller
{
    public function send(Request $request)
    {
        // تحضير مصفوفة بيانات لتمريرها
        $data['message'] = $request->message;
        
        // Notify إثارة الحدث 
        event(new App\Events\NewMessageEvent($data));
    }
}

سيكون علينا تعريف مسارين , مسار لإستهداف تابع المتحكم MessagesController و اخر لعرض الصفحة chat.blade.php :

//web.php

Route::post('chat','MessagesController@send');
Route::view('chat', 'chat');

ثم بملف ما بالواجهة الأمامية سيكون علينا فقط : الإشتراك في هاته القناة + الإستماع لأحداث هاته القناة : 

<!-- chat.blade.php --> 

<!DOCTYPE html>
<head>
  <title>مثال عن رسالة</title>
  
  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
  <script>
   
    // الإشتراك ضمن نفس تطبيق البوشر
   var pusher = new Pusher('{{env("MIX_PUSHER_APP_KEY")}}', {
      cluster: '{{env("PUSHER_APP_CLUSTER")}}',
      encrypted: true
    });
    
    // الاشتراك في نفس القناة
    var channel = pusher.subscribe('sara-chaima-channel');
    
    // Notify الاستماع للحدث 
    channel.bind('App\\Events\\NewMessageEvent', function(data) {
      
      // إن تم اثارة الحدث قم بعرض البيانات
      alert(data.message);
    });
  </script>
</head>

بدون تحديث الصفحة سيكون علينا إرسال طلبات أجاكس من نموذج سارة إلى المسار chat/ بالفعل POST و سنلاحظ ظهور الرسالة في مسار chat/ .

المسار الأول يمثل الطلب الذي أرسلته سارة , و المسار الثاني يمثل صفحة عرض الرسائل بالنسبة لشيماء . و بالطبع فإن هذا هو الشكل الأبسط للعملية , يمكن تطوير العملية كأن نقوم بتخصيص طريقة العرض في قائمة رسائل منظمة بإنزلاق أفقي مع كل تحديث . 

قد نضيف أيضا إشعارا جانبيا في كل إثارة للحدث , كما يمكن تخصيص قنوات خاصة بكل مستخدم منفرد أو نقوم بتمرير بيانات أخرى و تطبيق العديد و العديد من الأفكار عليها .