إزاي تعمل نظام حجز مقاعد حافلات "لحظي" باستخدام WebSockets و Laravel
تخيل معايا السيناريو ده: داخل تطبيق حجز تذاكر أتوبيس، العميل بيدخل يختار مقعد، وقبل ما يضغط "تأكيد" بلحظة، يلاقي المقعد اختفى أو بقى "محجوز" قدامه! الموقف ده محبط جداً للمستخدم، والسبب غالباً إنك بتعتمد على طلبات الـ HTTP التقليدية اللي بتعمل (Refresh) للصفحة عشان تشوف التحديثات. النهاردة هنتكلم عن الحل السحري للمشكلة دي، وهو استخدام تقنية الـ WebSockets عشان نوفر تجربة مستخدم فورية (Real-time Experience).
Table of contents [Show]
ليه الـ WebSockets هي الحل؟
في الـ Web Development التقليدي، المتصفح هو اللي بيسأل السيرفر: "يا ترى في مقعد اتحجز؟". السيرفر بيرد عليه. لكن في نظام حجز المقاعد (Seat Booking System)، إحنا محتاجين العكس، محتاجين السيرفر هو اللي يزق (Push) البيانات للمتصفحات التانية فوراً أول ما حد يحجز. هنا بيجي دور الـ WebSockets اللي بتفتح قناة اتصال دايمة بين العميل والسيرفر.
المتطلبات الأساسية للبدء
عشان نطبق نظام حجز فوري في لاراڤل (Laravel)، هنحتاج نستخدم Laravel Echo مع نظام Broadcast مثل Pusher أو Laravel WebSockets (الخيار الأخير ممتاز لأنه محلي ومجاني). الخطوات كالتالي:
- تثبيت حزمة Broadcasting في لاراڤل.
- إعداد الـ Event اللي هيتم إرساله بمجرد تغيير حالة المقعد.
- تلقي الـ Event في واجهة المستخدم باستخدام Laravel Echo.
تجهيز الـ Event في لاراڤل
أول خطوة هي إنشاء Event يمثل عملية حجز المقعد. الكود ده بيضمن إننا نبعت بيانات المقعد المحجوز لكل الناس المتصلة بالقناة:
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class SeatBooked implements ShouldBroadcast
{
public $seatNumber;
public function __construct($seatNumber) {
$this->seatNumber = $seatNumber;
}
public function broadcastOn() {
return new Channel('bus-booking');
}
}
تحديث واجهة المستخدم لحظياً (Frontend Implementation)
بعد ما السيرفر بعت الـ Event، يجي دور الـ JavaScript في المتصفح عشان يستقبل البيانات ويحدث شاشة اختيار المقاعد (Seat Selection UI) من غير ما العميل يعمل Refresh:
window.Echo.channel('bus-booking')
.listen('SeatBooked', (e) => {
let seat = document.getElementById('seat-' + e.seatNumber);
seat.classList.add('booked');
seat.disabled = true;
console.log('المقعد رقم ' + e.seatNumber + ' تم حجزه حالياً!');
});
تحديات تقنية لازم تاخد بالك منها
أكبر تحدي بيواجهك في الأنظمة دي هو حالة "السباق" (Race Condition). يعني لو اتنين مستخدمين ضغطوا على نفس المقعد في نفس الثانية بالظبط! الحل هنا مش بس WebSockets، لازم يكون عندك في الـ Backend عملية تأمين (Database Transaction) باستخدام Pessimistic Locking عشان تتأكد إن المقعد متاح فعلياً قبل ما يتم الحجز في قاعدة البيانات.
نصيحة من أخ لمبرمج زميل
التعامل مع الأنظمة اللحظية (Real-time Systems) ممتع جداً وبيخلي تطبيقك في حتة تانية خالص. نصيحتي ليك: ابدأ بتنفيذ نظام بسيط، وافهم كويس الفرق بين الـ Public Channels والـ Private Channels عشان تأمن بياناتك. ومع الوقت، اتعلم إزاي تعمل Scale للـ WebSockets باستخدام Redis عشان تطبيقك يقدر يستحمل آلاف المستخدمين في نفس اللحظة.
أتمنى يكون الشرح بسيط ووضحلك الصورة. لو في أي تفصيلة تقنية وقفت قدامك، اسألني في الكومنتات!
