ليسشات! | في الوقت الحقيقي رسول | Pern-graphql
تطبيق الدردشة في الوقت الحقيقي المصنوع من Pern + GraphQL - يتميز بالرسائل الخاصة والعالمية والمجموعة
العرض التوضيحي
تم نشره على Netlify (الواجهة الأمامية) و Heroku (الواجهة الخلفية)
بنيت باستخدام
الواجهة الأمامية
- ReactJS - Frontend Framework
- عميل Apollo - مكتبة إدارة الدولة لإدارة كل من البيانات المحلية والبعيدة مع GraphQL
- اشتراكات Apollo - احصل على تحديثات في الوقت الفعلي من خادم GraphQL الخاص بك
- Context API w/ hooks - لحالة المستخدم ، والدردشة المحددة ، وملعقات الخبز المحمص ، والموضوع ، إلخ.
- React Router - للتوجيه العام والملاحة
- شكل خطاف رد الفعل - للأشكال المرنة
- Material -ui w/ الكثير من تخصيص CSS - مكتبة واجهة المستخدم
- نعم - للتحقق من صحة النموذج
- تاريخ التاريخ - لمعالجة وتنسيق التواريخ
خلفية
- Node.js - بيئة وقت التشغيل ل JS
- Apollo Server - لإنشاء خادم API GraphQL توثيق ذاتي
- اشتراكات Apollo - الاشتراكات هي عمليات GraphQL التي تشاهد أحداثها المنبعثة من خادم Apollo.
- PostgreSQL - فتح قاعدة بيانات SQL المصدر لتخزين البيانات
- Sequelize - NodeJS ORM لقواعد البيانات المستندة إلى SQL
- JSON Web Token - معيار لتأمين/مصادقة طلبات HTTP
- bcrypt.js - لجلب كلمات المرور
- dotenv - لتحميل متغيرات البيئة من ملف .env
سمات
- المصادقة (تسجيل الدخول/ التسجيل مع اسم المستخدم وكلمة المرور)
- الدردشة في الوقت الحقيقي باستخدام صقور الويب
- رسائل خاصة مع جميع المستخدمين المسجلين
- القناة العالمية للدردشة جميع المستخدمين في مكان واحد
- إنشاء مجموعات مع المستخدمين الذين يختارون
- يمكن للمستخدمين المغادرة من المجموعة بعد الإضافة
- يمكن لمبدع المجموعة إضافة/إزالة الأعضاء من المجموعة
- يمكن للمجموعة المبدع حذف المجموعة ورسائلها معها
- يمكن للمجموعة المبدع إعادة تسمية اسم المجموعة المذكورة
- إدارة الأخطاء مع رسائل وصفية
- إشعارات الخبز المحمص للإجراءات: إنشاء مجموعات ، إزالة المستخدمين وما إلى ذلك.
- تحميل المغازل لعمليات الجلب ذات الصلة
- تواريخ منسقة لإضافة/تحديث الأسئلة/الإجابات/التعليقات
- تبديل الوضع المظلم مع التخزين المحلي حفظ
- واجهة المستخدم المستجيبة المناسبة لجميع الشاشات
لقطات الشاشة
سطح المكتب/الجهاز اللوحي
متحرك
الاستخدام
متغير ENV:
إنشاء ملف .env في دليل الخادم وأضف ما يلي:
PORT = 4000
JWT_SECRET = "Your JWT secret"
عميل:
فتح العميل/src/backendurls.js وتغيير كائن "backendurls" إلى:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
تشغيل خادم تطوير العميل:
cd client
npm install
npm start
الخادم:
افتح خادم/config/config.json وقم بتحديث قيم مفاتيح التطوير لمطابقة بيانات اعتماد postgresql المحلية.
قم بتثبيت "Sequelize-Cli" و "Nodemon" كحزم عالمية ، إذا لم تكن كذلك.
قم بتشغيل هذا الأمر لترحيل جدول SQL إلى PSQL المحلي الخاص بك: sequelize db:migrate
تشغيل خادم تطوير الواجهة الخلفية:
cd server
npm install
npm run dev
