Fastest Vuejs Chat app! [Vue-Vuetify-Firebase-Nodejs]

[sniperadmin]

إليكم من أعمالي الخاصة من الصفر (from scratch)
vue chat
تم استخدام: VueJS + vuetify + firebase- nodejs

تم إضافة الخصائص الحالية التالية:

Current features:
- online/offline indicators
- PWA [Progressive Web App]
- Fastest load times [~ 0.7 seconds]
- single public chat room
- emoticons can be added (mouse only!)

وفي التحديثات القادمة:

future features and updates:
- fully functional profile edit
- multiple chatrooms
- Accessibility features
and much more!

ملاحظة:

• التطبيق يدعم شاشات التابلت والشاشات الكبيرة فقط
• تم استخدام نظام vuetify grid system
• تم تقسيم الكود الى عدد كبير من الـcomponents لتسهيل الصيانة والـcode readability
  رابط الهوست: https://chat-app-f412a.firebaseapp.com/
  رابط المستودع:
  https://github.com/sniperadmin/vue-chat

---

تم إضافة نسخة typescript هنا: https://github.com/sniperadmin/vue-chat/tree/typescript-branch

happy coding!
#كورتابزيون

[asmaa_salih]

رائع جدا ما شاء الله

[Alhakem]

عمل رائع ي نصر من يوم إلى أخر وينعكس مدى تقدمك في المجال بشكل كبير

---

عندي تعقيب واحد لمشكلة تظهر في التطبيق وحتى تقوم أنت بإنتاجها قم بالتالي:

• قم بتسجيل الدخول
• اكتب رسالة وارسلها
• اعمل تحديث للصفحة hard refresh
• أكتب رسالة جديدة

راح تلاحظ انه غير قابل على ارسال الرسالة.

حاول تكتشف ماهي المشكلة وتحلها

Hint if needed

المشكلة هي في جلب ما إن كان المستخدم مسجل دخول ام لا من خلال currentUser حيث انها بتكون null بسبب عدم إنتهاء الاوبجكت auth من التهيئة (initializing)

كذلك أعجبني عدم إعتمادك على الـ vuex في مثل تطبيق بسيط كهذا والتدرب على تمرير الداتا بالـ Props

[sniperadmin]

تسلمي على التشجيع

[sniperadmin]

إن كان المستخدم مسجل دخول ام لا

هل يمكن استخدام local storage
أود ان أبتعد قدر الإمكان عن استخدام vuex

[Alhakem]

تستطيع حلها بدون الـ Localstorage او ال Vuex

لو تشوف ال hint تلاقي اني قلت لك ان المشكلة تكمن في الـ firebase.auth().currentUser حيث احيانا تكون null.

ولما تتحقق من الشرط التالي في الـ view الي بإسم Home.vue:

if (user) {
   
} else{
   this.authUser = {}
}

بيروح الشرط على الـ else ويتم إسناد الأوبجكت الفارغ لـ authUser لأن الـ user بيكون قد تم تخزين null فيها من الكود التالي.

let user = firebase.auth().currentUser

لذا فالحل هو إستخدام Observer والي بيكون في firebase.auth().onAuthStateChanged بدلاً من firebase.auth().currentUser عند التحقق من حالة الـ user

فراح تغير المنطق الحالي الي في الـ created

للشكل التالي:

firebase.auth().onAuthStateChanged(this.methodName)
this.fetchMsg()
this.fetchUsers()

لاحظ انني راح امرر method كـ function علشان في الـ method لما نستخدم this تكون تشير الى الـ vue component.

وفي الـ methods راح ننقل كل المنطق الي كان في الـ create بالشكل التالي:

methodName(user){
        if (user) {
        onlineRef.on('value', (snapshot) => {
          if (snapshot.val() === true) { // if vlaue is true
            this.appOn = true
            this.snackbar = true
            usersRef.doc(user.uid).update({
              liveStatus: 'online'
            })
          } else {
            this.appOn = false
          }
        })
        this.isActive = user.liveStatus
        this.authUser = user
        this.profileImg = this.authUser.photoURL
        const allUsers = []
        allUsers.push(user)
        this.currentUser = allUsers
        } else {
          this.authUser = {}
        }  
}

الان في هذه الحالة بتتأكد انه ما عمرة سيتم إسناد null للمتغير user من خلال الـ firebase.auth().currentUser بسبب عدم إنتهاء عمل initializing للاوبجكت auth.

وهذه هي الطريقة الموصى بها في الـ Docs الخاصة بـ firebase للحصول على الـ current user من خلال تعيين observer على الاوبجكت Auth

[sniperadmin]

ممتاز سأحاول تعديلها

[sniperadmin]

تم التحديث على التغييرات الجديدة،
تم أيضا تحديث المستودع

[Alhakem]

قم بتسجيل الدخول
اكتب رسالة وارسلها
اعمل تحديث للصفحة hard refresh
أكتب رسالة جديدة

هل مازالت المشكلة موجودة؟

[Alhakem]

تعال نجرب الشات كلمني هناك

[sniperadmin]

تم الحل، بعمل deploy على الهوست
اديني ثواني بس

[sniperadmin]

هيا شغالة local host
أعتقد الdeploy ممكن يشتغل بعد دقائق!

[Alhakem]

انا صرت مش قادر اكتب شئ

[sniperadmin]

ثواني همسح اليوزرز

[Alhakem]

لاحظت انك مررت الـ user مباشرة على للـ Observer

firebase.auth().onAuthStateChanged((user) => {})

وهذا بيسبب مشكلة والي هي ان الـ this بداخل الـ function ماعاد بتكون تشير لل vue component يعني لما تكتب بداخلها مثلاً

this.isActive = user.liveStatus
// injecting user object
this.authUser = user
// injecting photo
this.profileImg = this.authUser.photoURL

مش راح يلاقي الـ profileImg ولا الـ authUser ولا اي prop في الـ data.

جرب أطبع الـ this جوا الـ Observer وبرا وشوف الي اقصدة

firebase.auth().onAuthStateChanged((user) => {
   console.log(this)
})
console.log(this)

علشان كذا كلمتك تمرر بداخلة function وهذه الـ function ما راح نواجه مشكلة ال this معاها

firebase.auth().onAuthStateChanged(this.methodName)

[sniperadmin]

جرب كدة

[sniperadmin]

يبدو انها مش شغالة معاك
انا رفعت الكود
مفيش ايرور

[mosaab.laboune]

ماشاء الله استمر أخي

[sniperadmin]

@Alhakem
@Mosaab.L
@asmaa_salih
@sohep
@jeno

تم إضافة نسخة typescript لمن يهتم،
ليست كاملة وتحتاج للضبط

[mosaab.laboune]

تم إضافة نسخة typescript لمن يهتم،

تمام أخي @sniperadmin

ليست كاملة وتحتاج للضبط

والحل ؟؟