chatterbox هو تطبيق مراسلة في الوقت الفعلي تم تصميمه مع 13 و Pusher.
يمكنك إنشاء دردشة جماعية أو بدء DM. يمكن للمستخدمين إرسال رسائل نصية ، أو تحميل مقاطع فيديو أو صور متعددة.
يتم تحديث واجهة المستخدم في الوقت الفعلي. بمعنى أنه عند إنشاء قناة من قبل مستخدم آخر ، أو عند إرسال رسالة ، سترى التحديث على الفور.
تم نشره على Vercel: https://chatterboxes.vercel.app/
يستخدم هذا المشروع جهاز توجيه التطبيق NEXT.JS 13 الجديد ، ومكونات خادم رد فعل ، وإجراءات الخادم ، والتشويق وتفاعل cache()
نستخدم أيضًا طرق API (تم نشرها كوظائف بدون خادم إلى Vercel) لإجراءات مثل تسجيل مستخدم جديد ، وإنشاء رسالة ، إلخ.
عندما يرسل المستخدم رسالة ، ينشئ دردشة ، أو يأتي عبر الإنترنت على سبيل المثال ، سيتم إخطار جميع المستخدمين الآخرين وسيتم تحديث واجهة المستخدم الخاصة بهم في الوقت الفعلي.
ويتم ذلك مع البهجة. نستمع إلى أحداث مثل message:new
أو chat:update
. عندما يقوم المستخدم بإجراء ما ، فإننا نطلق الحدث على الخادم ، وسوف يستقبل الاستماع للمستخدم الآخر التحديثات.
إلى جانب الاستماع إلى الأحداث والتشغيل ، يتم استخدام قنوات وجود Pusher للحصول على كل مستخدم على الإنترنت حاليًا.
عندما يقوم المستخدم بتسجيل الدخول ، نحصل على كل مستخدم نشط من Puster وتخزينه في متجر Jotai المحلي. عندما يقوم المستخدم بتسجيل الدخول أو تسجيل الخروج ، يرسل Pusher تحديثًا ونقوم بتحديث متجر Jotai محليًا.
هذا المشروع مكتوب في TypeScript ويستخدم الأنواع التي تم إنشاؤها بواسطة Prisma ومخططات وأنواع ZOD لضمان سلامة الأنواع عبر قاعدة كود. نظرًا لأن Prisma يمتلك الأنواع ، نادراً ما يتعين علينا إعلان أو الحفاظ على أي أنواع.
يتم استخدام zod
للتحقق من صحة كل نموذج من جانب العميل لضمان صحة القيم قبل إجراء أي مكالمات أو طفرات API.
على الخادم ، يحتوي كل مسار API أيضًا على التحقق من صحة ZOD للتأكد من أن الإدخال صالح ويتوافق مع مخطط ZOD قبل المتابعة.
تم تكوين ESLINT أيضًا بقواعد صارمة لضمان جودة الرمز وتقليل الأخطاء.
nodemailer