Flutter + WebSocket: بناء Chat وNotifications لحظية على VPS

الشات والإشعارات اللحظية صارتا ميزتين أساسيتين في تطبيقات الموبايل الحديثة. المستخدم يتوقّع أن تصله الرسالة أو التنبيه فوراً، دون تحديث الشاشة أو انتظار. الحلّ التقني هو WebSocket: قناة اتصال دائمة بين تطبيق Flutter والخادم. في هذا الدليل العملي نبني شاتاً وإشعارات لحظية بربط عميل Flutter WebSocket بخلفية Laravel وخادم Reverb على VPS — بالكود خطوة بخطوة — ثم نجيب: كم اتصالاً يتحمّل خادم واحد فعلاً؟

ماذا سنبني؟

سنبني نظام شات بسيطاً وإشعارات لحظية باستخدام Flutter WebSocket. حين يرسل مستخدم رسالة، تُحفظ في قاعدة البيانات وتُبثّ فوراً لكل المشتركين في المحادثة عبر WebSocket — بلا استطلاع دوري (Polling) يُنهك الخادم والبطارية. نفس الآلية تخدم الإشعارات: أي حدث في الخلفية يصل الجهاز لحظياً.

البنية وتدفّق الرسالة

كما في المخطط أعلاه: يرسل تطبيق Flutter الرسالة إلى Laravel API الذي يحفظها ويبثّ حدثاً، فيلتقطه خادم Reverb ويدفعه عبر WebSocket لكل الأجهزة المشتركة في القناة — تصل في أجزاء من الثانية. البنية تتكوّن من ثلاثة مكوّنات متكاملة:

المكوّنات الثلاثة

يعمل النظام عبر ثلاثة أجزاء: عميل Flutter (يعرض المحادثة ويستمع للقناة)، وخلفية Laravel (API يحفظ الرسالة ويبثّ حدثاً)، وخادم Reverb (يوزّع الأحداث عبر WebSocket). لنكتب كلاً منها.

الخلفية: حدث البثّ في Laravel

في Laravel، أنشئ حدثاً يطبّق ShouldBroadcast ليُبثّ تلقائياً على قناة، ثم أطلقه بعد حفظ الرسالة:

// app/Events/MessageSent.php
class MessageSent implements ShouldBroadcast
{
    public function __construct(public Message $message) {}

    public function broadcastOn(): array
    {
        return [new PrivateChannel('chat.'.$this->message->room_id)];
    }
}

// في الـController بعد حفظ الرسالة:
broadcast(new MessageSent($message))->toOthers();

استخدم نظام البثّ في Laravel مع محرّك Reverb، ووجّه BROADCAST_CONNECTION=reverb في ملف البيئة.

عميل Flutter WebSocket: الاستماع للرسائل

في تطبيق Flutter، استخدم حزمة laravel_echo مع pusher_channels_flutter للاشتراك في القناة والاستماع للرسائل الواردة:

// إعداد الاتصال بخادم Reverb
final echo = Echo(
  broadcaster: EchoBroadcasterType.Pusher,
  client: PusherChannelsFlutter.getInstance(),
  // host: عنوان خادم Reverb على الـVPS، key: REVERB_APP_KEY
);

// الاشتراك في قناة المحادثة والاستماع
echo.private('chat.$roomId').listen('MessageSent', (e) {
  setState(() => messages.add(e['message']));
});

بهذا، كل رسالة تُبثّ من الخلفية تظهر فوراً في واجهة كل مستخدم مشترك — دون أي طلب إضافي منه.

الإشعارات اللحظية والقنوات الخاصة

نفس البنية تخدم الإشعارات اللحظية تماماً: بدل قناة محادثة، تبثّ حدثاً على قناة خاصة بالمستخدم (App.Models.User.{id})، فيصله الإشعار فوراً على جهازه. استخدم القنوات الخاصة (Private Channels) دائماً للبيانات الحسّاسة: تتطلّب مصادقة، فلا يستمع مستخدم لقناة غيره. Laravel يوفّر التحقّق من الصلاحية تلقائياً عبر ملف routes/channels.php.

قياس حمل Flutter WebSocket

السؤال العملي الأهمّ: كم مستخدماً متزامناً يتحمّل خادم WebSocket واحد؟ لأننا لا نحبّ النظريات، أجرينا اختباراً حقيقياً على خادم VPS من مرام وقِسنا سعة Reverb الفعلية:

النتيجة: حمل خادم VPS واحد (8GB) نحو 29,500 اتصال WebSocket متزامن بثبات، بنحو 19 كيلوبايت ذاكرة لكل اتصال، وبقي زمن استجابة الخادم منخفضاً. عملياً هذا يكفي لعشرات آلاف المستخدمين النشطين في شاتك أو إشعاراتك على خادم واحد — وتتوسّع لأكثر بإضافة خوادم Reverb خلف Redis. أي أن بنية Flutter WebSocket عملية واقتصادية حتى لتطبيق كبير.

الخلاصة

بناء شات وإشعارات لحظية بـFlutter WebSocket أبسط ممّا يبدو: عميل Flutter يستمع، وLaravel يبثّ الأحداث، وReverb يوزّعها عبر WebSocket — وكلها تعمل على VPS تتحكّم به بتكلفة ثابتة. وكما أثبت اختبارنا الحقيقي، خادم واحد يحمل عشرات آلاف الاتصالات المتزامنة. ابدأ بالبنية البسيطة، فعّل ext-ev، وأمّن قنواتك الخاصة — وستمنح مستخدميك تجربة لحظية حقيقية تنافس أكبر التطبيقات.