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

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية