من نحن؟

✍️ المقدمة:

غالبًا ما يظن المطورون أن بناء نظام تنبيهات (Notifications) فورية يتطلب استخدام WebSockets أو مكتبات معقدة مثل Pusher أو Laravel Echo.

في أحد مشاريعي، طُلب مني إنشاء نظام تنبيهات للمشرفين يظهر لهم عندما يُسجل مستخدم جديد، أو يُرفع ملف، أو يتم إرسال طلب.

لكن كان لدينا شرطان:

• ✅ لا نستخدم أي خدمة خارجية (Pusher أو Firebase)

• ✅ نريد تحديث التنبيهات بشكل فوري دون إعادة تحميل الصفحة

هل هذا ممكن؟ نعم. في هذا المقال أشرح كيف بنيت النظام باستخدام Laravel فقط + JavaScript بسيط + تقنية polling ذكية.

🎯 فكرة النظام:

• كل حدث (مثل: تسجيل مستخدم) يولّد تنبيهًا في قاعدة البيانات

• يتم جلب التنبيهات الجديدة تلقائيًا عبر API كل عدة ثوانٍ

• عند وجود تنبيه جديد، يظهر في الواجهة بدون تحديث الصفحة

🧱 قاعدة البيانات:

جدول notifications

Schema::create('notifications', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('user_id')->nullable(); // للمستخدم المتلقّي
    $table->string('type'); // مثل: 'new_user', 'file_uploaded'
    $table->text('message');
    $table->boolean('seen')->default(false);
    $table->timestamps();
});

⚙️ إنشاء التنبيه من Laravel:

مثال: عند تسجيل مستخدم جديد

event(new Registered($user)); // في AuthController مثلاً

// مستمع الحدث
public function handle(Registered $event)
{
    Notification::create([
        'type' => 'new_user',
        'message' => 'تم تسجيل مستخدم جديد: ' . $event->user->name,
    ]);
}

🛠️ إنشاء API لعرض التنبيهات:

Route::middleware('auth')->get('/api/notifications', function () {
    return Notification::where('seen', false)->latest()->take(5)->get();
});

🌐 واجهة JavaScript (Polling بسيط):

<ul id="notification-list"></ul>

<script>
setInterval(async () => {
  const res = await fetch("/api/notifications");
  const data = await res.json();

  const list = document.getElementById("notification-list");
  list.innerHTML = ""; // مسح القائمة القديمة

  data.forEach(notification => {
    const item = document.createElement("li");
    item.textContent = notification.message;
    list.appendChild(item);
  });

}, 5000); // كل 5 ثوانٍ
</script>

✅ التنبيهات تحدث تلقائيًا بدون WebSocket

✅ ويمكنك تحسين الأداء عبر Long Polling أو Ajax ذكي

📥 تعليم التنبيه كمقروء:

Route::post('/api/notifications/mark-as-seen', function () {
    Notification::where('seen', false)->update(['seen' => true]);
    return response()->json(['status' => 'ok']);
});

✅ ميزات هذا النظام:

(الميزة)◄	(التوضيح)
(لا يحتاج WebSocket أو Laravel Echo)◄	(مناسب للاستضافات البسيطة)
(سهل التخصيص والدمج مع أي حدث)◄	(سواء تسجيل، طلب، تعليق)
(يمكن تطويره لاحقًا لـ WebSocket بسهولة)◄	(نفس الهيكل صالح للتوسعة)
(واجهة خفيفة بـ JS)◄	(بدون مكتبات ثقيلة)

🔒 نصائح أمنية:

• اجعل API التنبيهات خلف auth أو تحقق من session

• حدد عدد النتائج المرسلة (take(5)) لتقليل الحمل

• لا تعرض بيانات حساسة في الرسائل بشكل مباشر

• خزّن التاريخ لتجنب التكرار

📈 النتيجة النهائية:

• عند حدوث أي إجراء، يُنشأ تنبيه في قاعدة البيانات

• يظهر للمشرف بشكل تلقائي كل 5 ثوانٍ

• واجهة بسيطة وسريعة

• لا تعتمد على أي طرف ثالث خارجي

🧾 الخلاصة:

بناء نظام تنبيهات فوري لا يتطلب دومًا WebSocket.
باستخدام Laravel وPolling ذكي بـ JavaScript، يمكنك بناء نظام سريع وفعال يعمل في كل الاستضافات التقليدية، ويضيف احترافية لموقعك.