إنشاء نظام تنبيهات - لارافل

Hanan Fahad2 · 21 يونيو 2021

كيف اسوي تنبيهات بلارافل زي جرس الاكاديميه

Adnane Kadri · 21 يونيو 2021

يمكن ذلك عن طريق الإستعانة بمفهوم الويب سوكيت . بحيث نقوم :

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

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

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

قد نحتاج إلى دريفر لمساعدتنا في تمرير البيانات و إنشاء القنوات من مثل 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 Notify

سنلاحظ إضافة ملف Notify.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 Notify 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('notify-channel');
    }
}

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

php artisan make:controller NotificationController

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function notify()
    {
        // تحضير مصفوفة بيانات لتمريرها
        $data['message'] = 'قم بتمرير هاته الرسالة';
        
        // Notify إثارة الحدث 
        event(new App\Events\Norify($data));
    }
}

سيكون علينا تعريف مسارين , مسار لإستهداف تابع المتحكم NotificationController و اخر لعرض الصفحة notification.blade.php :
```
//web.php

Route::get('notify','NotificationController@notify');
Route::view('/notification', 'notification');
```
ثم بملف ما بالواجهة الأمامية سيكون علينا فقط : الإشتراك في هاته القناة + الإستماع لأحداث هاته القناة :

<!-- notification.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('notify-channel');
    
    // Notify الاستماع للحدث 
    channel.bind('App\\Events\\Notify', function(data) {
      
      // إن تم اثارة الحدث قم بعرض البيانات
      alert(data.message);
    });
  </script>
</head>

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

إنشاء نظام تنبيهات - لارافل

السؤال

Hanan Fahad2

1 جواب على هذا السؤال

Recommended Posts

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية