البرمجة

إشعارات فورية بلارافيل وPusher

اخر تحديث 16/05/2025
22 تمت قراءة 3 دقيقة

إنشاء إشعارات عبر الويب باستخدام Laravel وقنوات Pusher: دليل عملي شامل

تُعتبر الإشعارات الفورية (Real-Time Notifications) من المكونات الأساسية في تطبيقات الويب الحديثة، إذ تُسهم بشكل كبير في تحسين تجربة المستخدم من خلال إعلامه بالأحداث الجديدة فور حدوثها، دون الحاجة إلى تحديث الصفحة. تقدم Laravel، إطار العمل الشهير بلغة PHP، دعمًا مدمجًا لإنشاء وبث الإشعارات الفورية باستخدام تقنيات مثل WebSockets بالتكامل مع خدمة Pusher.

هذا المقال يُقدم دليلاً مفصلاً حول كيفية إنشاء نظام إشعارات فورية على الويب باستخدام Laravel وقنوات البث الخاصة بـ Pusher، مع شرح عملي لجميع المكونات البرمجية المطلوبة من البداية حتى البث والاستقبال.

مواضيع ذات صلة

مفهوم الإشعارات الفورية في تطبيقات Laravel

تُمثل الإشعارات الفورية جزءًا من بنية التطبيقات الحديثة المتجاوبة مع الأحداث في الزمن الحقيقي. يعتمد هذا النوع من الإشعارات على استخدام بروتوكولات مثل WebSockets التي تُتيح للعميل (Client) الاستماع لقناة معينة وتلقّي البيانات بمجرد توفرها في الخادم (Server) دون الحاجة إلى إرسال طلب جديد في كل مرة.

في Laravel، تُستخدم حزمة Broadcasting لبث الأحداث، وتتكامل مع خدمات خارجية مثل Pusher، التي تُوفّر بنية تحتية جاهزة لـ WebSockets وتُسهّل عملية البث والاستقبال.

إعداد Laravel لدعم البث

1. تثبيت مشروع Laravel جديد

أول خطوة هي إعداد مشروع Laravel جديد باستخدام Composer:

bash
composer create-project laravel/laravel laravel-pusher-demo

ثم الدخول إلى مجلد المشروع:

bash
cd laravel-pusher-demo

2. إعداد ملف البيئة .env

يجب ضبط بعض المتغيرات في ملف البيئة لتفعيل ميزة البث وتحديد مزود الخدمة:

dotenv
BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=your-cluster

3. تثبيت مكتبة Pusher

لاستخدام Pusher، يجب تثبيت الحزمة الخاصة بها عبر Composer:

bash
composer require pusher/pusher-php-server

4. تفعيل واجهة البث في Laravel

يجب التأكد من تفعيل واجهة البث في ملف config/app.php، عبر التحقق من وجود السطر التالي ضمن مصفوفة providers:

php
Illuminate\Broadcasting\BroadcastServiceProvider::class,

ثم تنفيذ الأمر التالي لإنشاء ملف broadcasting.php وتحديث الإعدادات:

bash
php artisan vendor:publish --tag=laravel-config

إعداد قنوات البث (Broadcast Channels)

1. إنشاء حدث للبث

يمكن إنشاء حدث باستخدام الأمر:

bash
php artisan make:event NewNotificationEvent

ثم تعديل الحدث ليقوم بالبث عبر القناة:

php
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class NewNotificationEvent implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('notifications');
    }

    public function broadcastWith()
    {
        return ['message' => $this->message];
    }
}

2. إنشاء قناة مخصصة

تُسجل القنوات في ملف routes/channels.php. لتفعيل قناة الإشعارات، نضيف:

php
Broadcast::channel('notifications', function ($user) {
    return true;
});

بث الإشعار من الخادم

يمكنك بث الإشعار باستخدام كود بسيط من داخل أي مكان في Laravel (مثل Controller أو Job):

php
use App\Events\NewNotificationEvent;

event(new NewNotificationEvent('تم إضافة عنصر جديد'));

إعداد الجزء الأمامي (Front-End)

1. تثبيت مكتبات JavaScript المطلوبة

Laravel يأتي مدمجًا مع Laravel Echo، الذي يُستخدم للاستماع للأحداث. لتثبيت Echo وPusher:

bash
npm install --save laravel-echo pusher-js

2. إعداد Laravel Echo

في ملف resources/js/bootstrap.js:

javascript
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

3. الاستماع للإشعار

في ملف JavaScript (مثلاً resources/js/app.js):

javascript
window.Echo.private('notifications')
    .listen('NewNotificationEvent', (e) => {
        console.log('إشعار جديد:', e.message);
        alert(e.message);
    });

إعداد المصادقة على القنوات الخاصة

لضمان أمان البث، يُفضل استخدام القنوات الخاصة. عند استخدام قناة مثل private-notifications، يجب تفعيل المصادقة في Laravel من خلال:

  • تفعيل Middleware auth:api أو auth:sanctum حسب طريقة المصادقة.

  • إعداد ملفات JavaScript لتوفير التوكن المطلوب.

جدول تفصيلي يوضح علاقة مكونات البث

المكون الوصف
Event في Laravel يُمثل الحدث الذي سيتم بثه إلى المستخدمين
ShouldBroadcast واجهة تحدد أن الحدث يجب أن يُبث
broadcastOn() تحدد القناة التي سيتم البث من خلالها
Pusher خدمة خارجية تُتيح إرسال البيانات في الزمن الحقيقي عبر WebSockets
Laravel Echo مكتبة JavaScript للاستماع للأحداث المرسلة من الخادم
قناة Private قناة خاصة تتطلب مصادقة المستخدمين للاستماع إليها
ملف routes/channels.php يُستخدم لتعريف من يُسمح له بالاستماع لقناة معينة

استخدام نظام الإشعارات الأصلي في Laravel

يمكن أيضًا إنشاء إشعارات باستخدام نظام Laravel Notification، وربطها بالبث:

bash
php artisan make:notification NewMessageNotification

في ملف الإشعار:

php
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\BroadcastMessage;

public function via($notifiable)
{
    return ['broadcast'];
}

public function toBroadcast($notifiable)
{
    return new BroadcastMessage([
        'message' => 'رسالة جديدة تم إرسالها'
    ]);
}

ثم يمكن إرسال الإشعار إلى المستخدم:

php
$user->notify(new NewMessageNotification());

تخزين الإشعارات في قاعدة البيانات

لضمان توفر سجل بالإشعارات المرسلة، يمكن تفعيل خيار database مع broadcast:

php
public function via($notifiable)
{
    return ['database', 'broadcast'];
}

ولتخزينها، يجب إنشاء جدول الإشعارات:

bash
php artisan notifications:table
php artisan migrate

استخدام Laravel Sanctum أو Passport للمصادقة في SPA

عند ربط Laravel بتطبيقات SPA أو تطبيقات JavaScript، يجب استخدام Laravel Sanctum أو Passport لتوفير المصادقة الآمنة للقنوات الخاصة.

في حالة Laravel Sanctum:

  • يجب تثبيته وتكوينه.

  • إرسال توكن المصادقة في ترويسات الطلبات.

الأمن والتحكم في الإشعارات

للتحكم في من يستطيع الاستماع للقنوات، يجب دائمًا استخدام القنوات الخاصة أو المؤمنة باستخدام التحقق من هوية المستخدم.

مثال على تحقق القناة:

php
Broadcast::channel('notifications.{userId}', function ($user, $userId) {
    return (int) $user->id === (int) $userId;
});

التكامل مع واجهات المستخدم

يمكن عرض الإشعارات ضمن واجهة المستخدم باستخدام أدوات مثل Vue.js أو React، وربط Echo مباشرة بالعناصر الرسومية، مما يُتيح تجربة ديناميكية وتفاعلية:

vue

مراجع

  1. Laravel Documentation: Broadcasting

    https://laravel.com/docs/broadcasting

  2. Pusher Documentation

    https://pusher.com/docs

اخر تحديث 16/05/2025
22 تمت قراءة 3 دقيقة