بناء تطبيق دردشة فورية في Flutter باستخدام HosteDay Realtime
تعلم كيفية بناء تطبيق دردشة فورية في Flutter باستخدام HosteDay Realtime، مع دعم قنوات الحضور لعرض المستخدمين المتصلين، والقنوات الخاصة لإرسال واستقبال الرسائل بشكل آمن ولحظي عبر WebSocket.
تخيل أنك تدخل إلى غرفة دردشة، فتظهر لك مباشرة قائمة المستخدمين المتصلين، ثم ترسل رسالة لتصل فورًا إلى جميع الأعضاء المصرح لهم داخل نفس الغرفة، دون تحديث الصفحة أو إعادة تحميل البيانات.
هذا هو جوهر تطبيقات الوقت الحقيقي الحديثة.
في هذا الدرس سنبني تطبيق دردشة فورية باستخدام Flutter وربطه بخدمة HosteDay Realtime، مع الاعتماد على نوعين من القنوات:
- Presence Channel لمعرفة المستخدمين المتصلين داخل الغرفة.
- Private Channel لإرسال واستقبال الرسائل بشكل آمن بين المستخدمين المصرح لهم فقط.
النتيجة النهائية للتطبيق
بعد إكمال هذا الدرس سيكون لديك تطبيق دردشة يعمل بالشكل التالي:
- واجهة تسجيل دخول وإنشاء حساب.
- حفظ بيانات المستخدم والتوكن محليًا.
- حماية صفحات التطبيق ومنع الوصول إليها دون تسجيل دخول.
- الاتصال التلقائي بخدمة Realtime بعد نجاح المصادقة.
- الاشتراك في Presence Channel لعرض المستخدمين المتصلين.
- تتبع دخول وخروج المستخدمين من غرفة الدردشة.
- الاشتراك في Private Channel لتبادل الرسائل.
- إرسال الرسائل عبر API.
- استقبال الرسائل فورًا عبر WebSocket.
- ربط كل رسالة ببيانات المستخدم المرسل.
- عرض حالة الاتصال وقائمة الأعضاء النشطين.
- إظهار الرسائل الواردة والصادرة داخل واجهة دردشة حديثة.
تدفق عمل التطبيق
عند تشغيل التطبيق سيكون تدفق العمل بالشكل التالي:
تسجيل الدخول
↓
حفظ التوكن محليًا
↓
الاتصال بخدمة Realtime
↓
المصادقة على القنوات
↓
الاشتراك في قناة الحضور
↓
عرض المستخدمين المتصلين
↓
الاشتراك في القناة الخاصة
↓
إرسال رسالة
↓
استقبال الرسالة فورًا
↓
تحديث واجهة المستخدم مباشرة
لماذا نستخدم HosteDay Realtime؟
في التطبيقات التقليدية يضطر العميل إلى إرسال طلبات متكررة إلى الخادم للتحقق من وجود بيانات جديدة، وهو ما يعرف بأسلوب Polling.
هذا الأسلوب قد يستهلك موارد إضافية ويؤثر على الأداء، خاصة عند زيادة عدد المستخدمين أو كثرة الأحداث داخل التطبيق.
أما مع HosteDay Realtime، فيتم إنشاء اتصال دائم بين التطبيق والخادم باستخدام WebSocket، مما يسمح للخادم بإرسال الأحداث إلى التطبيق فور حدوثها دون انتظار طلب جديد من العميل.
مميزات استخدام HosteDay Realtime
يوفر HosteDay Realtime مجموعة من المزايا المهمة لتطبيقات الدردشة والتطبيقات التفاعلية، من أهمها:
- استجابة فورية للأحداث.
- تقليل عدد طلبات HTTP.
- تحسين تجربة المستخدم.
- استهلاك أقل للموارد.
- إمكانية بناء تطبيقات دردشة تفاعلية.
- متابعة حالة المستخدمين المتصلين لحظيًا.
- إرسال الرسائل للمستخدمين المصرح لهم فقط.
- دعم القنوات الخاصة وقنوات الحضور.
التقنيات المستخدمة في المشروع
يعتمد التطبيق على مجموعة من الأدوات والتقنيات الحديثة لبناء نظام متكامل وقابل للتوسع:
| التقنية | الاستخدام |
|---|---|
| Flutter | بناء واجهات التطبيق |
| GetX | إدارة الحالة والتنقل بين الصفحات |
| GetStorage | حفظ بيانات المستخدم محليًا |
| dart_pusher_channels | التعامل مع WebSocket |
| Laravel Sanctum | مصادقة المستخدمين |
| HosteDay Realtime | بث الأحداث الفورية |
| Presence Channels | إدارة المستخدمين المتصلين |
| Private Channels | حماية الرسائل ومنع الوصول غير المصرح به |
فكرة الدمج بين Presence Channel و Private Channel
يعتمد التطبيق على فصل واضح بين مسؤولية الحضور ومسؤولية الرسائل.
قناة الحضور Presence Channel لا تُستخدم لإرسال الرسائل، وإنما لمعرفة المستخدمين الموجودين داخل الغرفة وتتبع دخولهم وخروجهم.
أما القناة الخاصة Private Channel فتُستخدم لتبادل الرسائل بين المستخدمين المصرح لهم فقط.
هذا الفصل يجعل النظام أكثر تنظيمًا وأسهل في التوسع، لأن كل قناة تؤدي وظيفة محددة.
مسؤولية كل قناة
Presence Channel
تُستخدم قناة الحضور من أجل:
- معرفة المستخدمين المتصلين داخل غرفة الدردشة.
- عرض قائمة الأعضاء النشطين.
- تتبع دخول المستخدمين إلى الغرفة.
- تتبع خروج المستخدمين من الغرفة.
Private Channel
تُستخدم القناة الخاصة من أجل:
- إرسال الرسائل بين المستخدمين المصرح لهم.
- استقبال الرسائل بشكل آمن.
- منع المستخدمين غير المصرح لهم من الوصول إلى محتوى الغرفة.
- ربط كل رسالة ببيانات المستخدم المرسل.
ما الذي سنبنيه في هذا الدرس؟
لن نكتفي بإنشاء اتصال Realtime فقط، بل سنبني دورة عمل متكاملة تبدأ من تسجيل دخول المستخدم، وتنتهي بوصول الرسالة إلى جميع المشتركين في القناة الخاصة، مع عرض قائمة المستخدمين المتصلين داخل نفس غرفة الدردشة.
خلال الشرح ستتعرف على:
- تنظيم المشروع باستخدام بنية Features.
- فصل منطق المصادقة عن منطق الدردشة.
- إدارة الاتصال بخدمة Realtime.
- الاشتراك في Presence Channel.
- قراءة قائمة المستخدمين المتصلين.
- تتبع دخول وخروج الأعضاء.
- الاشتراك في Private Channel.
- إرسال الرسائل عبر API.
- استقبال الرسائل لحظيًا عبر WebSocket.
- تحديث واجهة المستخدم مباشرة عند وصول الأحداث.
قابلية التوسع لاحقًا
بعد إكمال هذا الدرس سيكون لديك أساس قوي يمكن البناء عليه لإضافة مزايا متقدمة مثل:
- غرف دردشة متعددة.
- القنوات الديناميكية.
- مؤشرات الكتابة.
- حالة قراءة الرسائل.
- الإشعارات المباشرة.
- إدارة الصلاحيات على مستوى القنوات.
- تخزين المحادثات داخل قاعدة البيانات.
- إظهار آخر ظهور للمستخدم.
- دعم المحادثات الفردية والجماعية.
إكمال قراءة الدرس
يمكنك متابعة الشرح الكامل خطوة بخطوة، مع جميع الأكواد والتفاصيل الفنية، من خلال الوثائق الرسمية: