من نحن؟

 

✍️ المقدمة:

الإشعارات اللحظية (Real-Time Notifications) أصبحت جزءًا أساسيًا من كل تطبيق حديث. سواء كنت تطور نظامًا لطلبات العملاء، أو نظام دعم فني، أو حتى لوحة تحكم، فالإشعارات الحية تزيد من تفاعل المستخدم وتقلل من الحاجة إلى التحديث اليدوي للصفحات.

في هذا المقال سأشارك تجربتي في:

• بناء نظام إشعارات لحظية باستخدام Laravel + Pusher

• دون الحاجة لكتابة جافاسكربت معقدة

• وكيف قمت بربطه مع نظام الأحداث (Events) في Laravel

🎯 لماذا استخدمت Laravel Echo وPusher؟

• Laravel Echo يوفّر واجهة سهلة للتعامل مع الأحداث الحية

• Pusher هو مزود سحابي للإشعارات اللحظية دون إعداد WebSockets يدويًا

• الدمج بين الاثنين سهل وآمن ومدعوم رسميًا

🧱 الخطوات العملية:

1. إعداد حساب Pusher

اذهب إلى https://pusher.com وسجل مجانًا، ثم أنشئ تطبيقًا جديدًا.
احتفظ بالمفاتيح التالية:

• APP_ID

• APP_KEY

• APP_SECRET

• CLUSTER

2. إعداد Laravel

التثبيت:

composer require pusher/pusher-php-server

في ملف .env:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster

3. تفعيل البث في Laravel

في ملف config/broadcasting.php تأكد من:

'default' => env('BROADCAST_DRIVER', 'pusher'),

4. إعداد حدث Event

php artisan make:event NewMessageNotification

ثم أضف الكود التالي:

class NewMessageNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new Channel('messages');
    }

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

5. بث الإشعار من Controller

use App\Events\NewMessageNotification;

public function sendMessage(Request $request)
{
    broadcast(new NewMessageNotification($request->message))->toOthers();

    return response()->json(['status' => 'Message sent!']);
}

6. إعداد الواجهة – Blade + Echo

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

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

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

ثم في ملف Vue أو Blade:

Echo.channel('messages')
    .listen('NewMessageNotification', (e) => {
        alert("رسالة جديدة: " + e.text);
    });

✅ النتيجة:

• عند إرسال رسالة من أي مستخدم، تصل مباشرة لباقي المستخدمين دون تحديث الصفحة.

• الإشعار يظهر فورياً باستخدام Laravel Echo + Pusher.

• كل ذلك باستخدام كود بسيط ومهيأ للتطوير المستقبلي.

📌 المميزات:

(الميزة)◄	(الوصف)
(لحظي)◄	(الإشعار يظهر فور حدوث الحدث)
(آمن)◄	(باستخدام Auth Channels في Laravel)
(قابل للتوسعة)◄	(يمكنك ربطه بأي نوع إشعار (تعليقات، طلبات...))

💡 ماذا بعد؟

يمكنك لاحقًا:

• إنشاء إشعارات خاصة بالمستخدم (Private Channels)

• ربط النظام بـ Firebase أو Ably بدلاً من Pusher

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

🧾 الخلاصة:

الإشعارات اللحظية تضيف قيمة ضخمة لأي مشروع.
Laravel مع Echo وPusher يقدمان حلاً احترافيًا وسهل الدمج، بدون الحاجة للدخول في تفاصيل WebSockets المعقدة.