This content originally appeared on DEV Community and was authored by Ahmed Niazy
Pusher Composables – حل شامل للمحادثات والإشعارات الفورية
هل تريد إضافة محادثات فورية وإشعارات لحظية لتطبيقك؟
ما الذي تحصل عليه:
محادثات فورية – رسائل تظهر فوراً بدون تحديث الصفحة
إشعارات لحظية – تنبيهات فورية للمستخدمين
إرسال ملفات – صور، فيديوهات، مستندات
إدارة الأخطاء – معالجة شاملة للأخطاء
إعادة الاتصال التلقائي – استقرار في الاتصال
TypeScript – كود آمن ومحدد الأنواع
المكونات المتوفرة:
1. usePusherCore – المحرك الأساسي
- إدارة الاتصال بـ Pusher
- الاشتراك في القنوات
- ربط الأحداث
2. usePusherChat – نظام المحادثات
- رسائل فورية
- رسائل مؤقتة (Optimistic Updates)
- إرسال ملفات
- إدارة الغرف
3. usePusherNotifications – نظام الإشعارات
- إشعارات فورية
- عداد الإشعارات غير المقروءة
- تصنيف الإشعارات
- إدارة الحالة
4. usePusherConfig – إعدادات مرنة
- تكوين Pusher
- أسماء القنوات والأحداث
- إعدادات المصادقة
مثال على الاستخدام:
// تهيئة المحادثة
const { initializeChat, sendMessage } = usePusherExample();
// إرسال رسالة
await sendMessage(roomId, "مرحباً!", async (roomId, message) => {
const response = await fetch(`/api/chat/${roomId}/send`, {
method: 'POST',
body: JSON.stringify({ message })
});
return response.json();
});
سهولة التخصيص:
const pusherConfig = {
appKey: 'YOUR_PUSHER_APP_KEY',
cluster: 'eu',
authEndpoint: 'https://your-domain.com/api/broadcasting/auth',
// إعداداتك المخصصة
};
الميزات المتقدمة:
Optimistic Updates – الرسائل تظهر فوراً
إدارة الذاكرة – تنظيف تلقائي للموارد
معالجة الأخطاء – رسائل خطأ واضحة بالعربية
إعادة الاتصال – استقرار في الاتصال
TypeScript – دعم كامل للأنواع
مناسب لـ:
- تطبيقات الدردشة
- منصات التواصل الاجتماعي
- تطبيقات التجارة الإلكترونية
- أنظمة الإشعارات
- تطبيقات الألعاب
- أي تطبيق يحتاج اتصال فوري
لماذا هذا الحل؟
جاهز للاستخدام – لا حاجة لكتابة كود من الصفر
مرن وقابل للتخصيص – يناسب أي مشروع
مستقر وموثوق – معالجة شاملة للأخطاء
أداء عالي – محسن للسرعة والكفاءة
سهل الصيانة – كود منظم وواضح
ابدأ الآن:
- انسخ الملفات إلى مشروعك
-
ثبت pusher-js:
npm install pusher-js - غيّر الإعدادات حسب مشروعك
- استخدم مباشرة – لا حاجة لإعدادات معقدة
- توضيح أي جزء من الكود
- مساعدة في التخصيص
- حل مشاكل التكامل
- نصائح لتحسين الأداء
https://github.com/AhmedNiazy309/Pusher-demo
###
شارك مع الأصدقاء:
إذا أعجبك المحتوى، شاركه مع المطورين الآخرين!
VueJS #NuxtJS #Pusher #TypeScript #RealTime #Chat #Notifications #WebDevelopment #JavaScript #Frontend
This content originally appeared on DEV Community and was authored by Ahmed Niazy