vue advanced chat

vue-advanced-Chat

الرعاة

سهلة الاستخدام API/خادم الدردشة مع بنية تحتية قابلة للتطوير

سمات

• متوافق مع جميع أطر JavaScript (Vue ، Angular ، React ، إلخ) أو لا يوجد إطار عمل على الإطلاق
• مراسلة الدردشة في الوقت الفعلي قابل للتخصيص
• الواجهة الخلفية اللاأدرية
• الصور ومقاطع الفيديو والملفات والرسائل الصوتية والرموز التعبيرية
• تحرير الرسائل والرد على رسائل أخرى
• مستخدمي العلامات والاقتراحات المختصرة الرموز التعبيرية
• عناصر واجهة المستخدم الخاصة بالرسائل التي شوهد
• تنسيق نص - جريء ، مائل ، مرهق ، تسطير ، رمز ، متعدد
• حالة المستخدمين عبر الإنترنت / غير متصل بالإنترنت
• خيارات وفتحات مرنة
• أوضاع موضوع خفيفة ومظلمة
• مثال Firestore
• TypeScript ، PWA ، دعم مكون الويب

العرض التوضيحي

يتمتع ؟

مثال على العالم الحقيقي

تطبيق ويب تدريجي يعرض جميع ميزات مكون vue-advanced-chat .
بنيت مع Firestore ، vuetify ، ودفع الإخطارات.

إذا كنت ترغب في الحصول على وصول متميز إلى رمز مصدر مثال العالم الحقيقي ، فيرجى الاتصال بي عبر البريد الإلكتروني.

ستحصل على تطبيق دردشة يعمل بالكامل على الويب والهاتف المحمول:

• واجهة المستخدم وتكامل الخلفية
• البريد الإلكتروني ، Facebook و Google مصادقة
• المراسلة في الوقت الفعلي ، إشعارات دفع المتصفح ، تحسين الصور (وظائف Firebase Cloud لضغط الآلهة)
• مكونات UI/UX للتنبيهات (الأخطاء والمعلومات) ، حوار ، إلخ.
• أضف المستخدمين الحاليين إلى غرفة باستخدام بريدهم الإلكتروني
• إرسال دعوات البريد الإلكتروني إلى المستخدمين غير الموجودين
• طبعة من الملف الشخصي والغرف
• إضافة وحذف مستخدمي الغرفة
• تطبيق Firestore المحسن لتقليل النطاق الترددي والتكاليف قدر الإمكان
• إدارة الدولة باستخدام Vuex
• التدويل (I18N)
• Google Analytics
• دعم لمساعدتك في الحصول على الدردشة وتشغيلها

جدول المحتويات

• تثبيت
• الاستخدام
• PROPS API
• بنية بيانات الدعائم
• أحداث API
• فتحات اسمها
• باستخدام مع Firestore

تثبيت

 # Using npm
npm install --save vue-advanced-chat

# Using yarn
yarn add vue-advanced-chat

# Using CDN
< script src= " https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-advanced-chat.umd.js " ></script >

Vue

قم بالتسجيل في vue-advanced-chat و emoji-picker كمكونات ويب في ملف التكوين الخاص بك:

compilerOptions: {
  isCustomElement : tagName => {
    return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
  }
}

العرض التوضيحي: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main

رد فعل

العرض التوضيحي: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/rect

الزاوي / الأيوني

العرض التوضيحي: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/angular

الاستخدام

يمكنك استيراده كمكون مخصص:

 < template >
  < vue-advanced-chat
    : current-user-id = "currentUserId"
    :rooms = "JSON.stringify(rooms)"
    : messages = "JSON.stringify(messages)"
    : room - actions = "JSON.stringify(roomActions)"
  / >
</ template >

< script >
  import { register } from 'vue-advanced-chat'
  register()

  // Or if you used CDN import
  // window['vue-advanced-chat'].register()

  export default {
    data ( ) {
      return {
        currentUserId : '1234' ,
        rooms : [ ] ,
        messages : [ ] ,
        roomActions : [
          { name : 'inviteUser' , title : 'Invite User' } ,
          { name : 'removeUser' , title : 'Remove User' } ,
          { name : 'deleteRoom' , title : 'Delete Room' }
        ]
      }
    }
  }
</ script >

ملاحظات مهمة

مكون vue-advanced-chat موجه نحو الأداء ، وبالتالي عليك اتباع قواعد محددة لجعلها تعمل بشكل صحيح.

• استخدم تخصيص الصفيف بدلاً من طريقة push

 // DO THIS
const rooms = [ ]
for ( let i = 0 ; i < res . length ; i ++ ) {
  rooms . push ( res )
}
this . rooms = rooms

// DON'T DO THIS
for ( let i = 0 ; i < res . length ; i ++ ) {
  this . rooms . push ( res )
} 

 // DO THIS
this . rooms [ i ] . typingUsers = [ ... this . rooms [ i ] . typingUsers , typingUserId ]

// DON'T DO THIS
this . rooms [ i ] . typingUsers . push ( typingUserId )

• لإضافة أو استبدال عنصر داخل صفيف ، استخدم مشغل الانتشار

 // DO THIS
this . rooms [ roomIndex ] = room
this . rooms = [ ... this . rooms ]

// DON'T DO THIS
this . rooms [ roomIndex ] = room

// AND DON'T DO THIS
this . rooms . push ( room )

• اتبع نمط تحميل واجهة المستخدم عن طريق تحديث messagesLoaded Prop في كل مرة يتم فيها إحضار غرفة جديدة

 fetchMessages ( { room , options } ) {
  this . messagesLoaded = false

  // use timeout to imitate async server fetched data
  setTimeout ( ( ) => {
    this . messages = [ ]
    this . messagesLoaded = true
  } )
} 

PROPS API

ملاحظات مهمة

إذا كنت تستخدم Vue 3 ، فيمكنك تمرير صفيف ودعائم الكائن بشكل طبيعي: تمرير خصائص DOM في Vue 3
خلاف ذلك ، تحتاج إلى تمرير تلك الدعائم كأوتار. على سبيل المثال: [messages]="JSON.stringify(messages)"

دعم	يكتب	مطلوب	تقصير
height	خيط	-	600px
current-user-id (1)	خيط	true	-
rooms	[سلسلة ، صفيف]	-	[]
rooms-order	desc / asc	-	desc
loading-rooms (2)	منطقية	-	false
rooms-loaded (3)	منطقية	-	false
room-id (4)	خيط	-	null
load-first-room (5)	منطقية	-	true
rooms-list-opened	منطقية	-	true
custom-search-room-enabled (6)	منطقية	-	false
messages	[سلسلة ، صفيف]	-	[]
room-message (7)	خيط	-	null
username-options (8)	[سلسلة ، كائن]	-	{minUsers: 3, currentUser: false}
messages-loaded (9)	منطقية	-	false
room-actions (10)	[سلسلة ، صفيف]	-	[]
menu-actions (11)	[سلسلة ، صفيف]	-	[]
message-actions (12)	[سلسلة ، صفيف]	-	(11)
message-selection-actions (13)	[سلسلة ، صفيف]	-	(13)
templates-text (14)	[سلسلة ، صفيف]	-	null
auto-scroll (15)	[سلسلة ، كائن]	-	{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }
show-search	منطقية	-	true
show-add-room	منطقية	-	true
show-send-icon	منطقية	-	true
show-files	منطقية	-	true
show-audio	منطقية	-	true
audio-bit-rate	رقم	-	128
audio-sample-rate	رقم	-	44100
show-emojis	منطقية	-	true
show-reaction-emojis	منطقية	-	true
show-new-messages-divider (16)	منطقية	-	true
show-footer (17)	منطقية	-	true
text-messages (18)	[سلسلة ، كائن]	-	null
text-formatting (19)	[سلسلة ، كائن]	-	{disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '} `` `}
link-options (20)	[سلسلة ، كائن]	-	{ disabled: false, target: '_blank', rel: null }
room-info-enabled (21)	منطقية	-	false
textarea-action-enabled (22)	منطقية	-	false
textarea-auto-focus	منطقية	-	true
user-tags-enabled	منطقية	-	true
emojis-suggestion-enabled	منطقية	-	true
media-preview-enabled	منطقية	-	true
responsive-breakpoint (23)	رقم	-	900
single-room (24)	منطقية	-	false
scroll-distance (25)	رقم	-	60
theme (26)	light / dark	-	light
accepted-files (27)	خيط	-	*
capture-files (28)	خيط	-	''
multiple-files (29)	منطقية	-	true
styles (30)	[سلسلة ، كائن]	-	(26)
show-audio (31)	منطقية	-	true
emoji-data-source	خيط	-	https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json

(1) مطلوب current-user-id لعرض واجهة المستخدم وإجراءات التشغيل وفقًا للمستخدم باستخدام الدردشة (على سبيل المثال: موضع الرسائل على اليمين ، إلخ)

(2) يمكن استخدام loading-rooms لإظهار/إخفاء أيقونة الدوار أثناء تحميل الغرف

(3) يجب ضبط rooms-loaded على true عندما يتم تحميل جميع الغرف. وهذا يعني أن المستخدم لا يمكنه التمرير لتحميل المزيد من الغرف المربوطة

(4) يمكن استخدام room-id لتحميل غرفة معينة في أي وقت

(5) يمكن استخدام load-first-room لإزالة السلوك الافتراضي لفتح الغرفة الأولى عند التهيئة

(6) يمكن استخدام custom-search-room-enabled لاستخدام حدث غرفة البحث لاستدعاء طريقتك الخاصة لتصفية الغرف خارج

(7) يمكن استخدام room-message لإضافة قيمة نصية افتراضية

(8) يمكن استخدام username-options لإظهار/إخفاء رسائل الغرفة اسم المستخدم وفقًا للحد الأدنى لعدد المستخدمين minUsers داخل الغرفة ، وإذا كان مستخدم الرسالة هو الحالي المستخدم currentUser للمستخدم

(9) يجب ضبط messages-loaded على true عند تحميل جميع رسائل المحادثة. وهذا يعني أن المستخدم لا يمكنه التمرير على الأعلى لتحميل المزيد من الرسائل المربوطة

(10) يمكن استخدام room-actions لعرض الأزرار الخاصة بك عند النقر على أيقونة القائمة المنسدلة لكل غرفة داخل قائمة الغرف.
يمكنك بعد ذلك استخدام حدث معالج الغرفة للاتصال الإجراء الخاص بك بعد النقر فوق زر. السابق:

 room - actions = "[
  {
    name : 'archiveRoom' ,
    title : 'Archive Room'
  }
] "

(11) يمكن استخدام menu-actions لعرض الأزرار الخاصة بك عند النقر على أيقونة النقاط العمودية داخل الغرفة.
يمكنك بعد ذلك استخدام حدث معالج القائمة لاستدعاء الإجراء الخاص بك بعد النقر فوق زر. السابق:

 menu - actions = "[
  {
    name : 'inviteUser' ,
    title : 'Invite User'
  } ,
  {
    name : 'removeUser' ,
    title : 'Remove User'
  } ,
  {
    name : 'deleteRoom' ,
    title : 'Delete Room'
  }
] "

(12) يمكن استخدام message-actions لعرض الأزرار الخاصة بك عند النقر فوق أيقونة القائمة المنسدلة داخل الرسالة.
يمكنك بعد ذلك استخدام حدث معالج عمل الرسائل للاتصال الإجراء الخاص بك بعد النقر فوق زر. السابق:

 message - actions = "[
  {
    name : 'addMessageToFavorite' ,
    title : 'Add To Favorite'
  } ,
  {
    name : 'shareMessage' ,
    title : 'Share Message'
  }
] "

يمكنك استخدام أسماء message-actions المدمجة لتشغيل تعديلات واجهة المستخدم المحددة عند النقر عليها.
حاليًا ، تتوفر أسماء الإجراءات الإجراءات replyMessage و editMessage و deleteMessage .
إذا لم يتم تعيين messageActions ، فسيستخدم القيم الافتراضية أدناه.
إذا كنت لا ترغب في عرض قائمة messageActions هذه ، فيمكنك تمرير مجموعة فارغة.

 messageActions = "[
  {
    name : 'replyMessage' ,
    title : 'Reply'
  } ,
  {
    name : 'editMessage' ,
    title : 'Edit Message' ,
    onlyMe : true
  } ,
  {
    name : 'deleteMessage' ,
    title : 'Delete Message' ,
    onlyMe : true
  } ,
  {
    name : 'selectMessages' ,
    title : 'Select'
  }
] "

(13) ترتبط message-selection-actions بإجراء رسالة selectMessages أعلاه. يمكنك استخدامه لعرض أزرار عمل مخصصة في رأس الغرفة عند تحديد رسالة. السابق:

 messageActions="[
  {
    name: 'deleteMessages',
    title: 'Delete'
  },
  {
    name: 'forwardMessages',
    title: 'Forward'
  }
]"

(14) يمكن استخدام templates-text لإضافة نص قوالب الإكمال التلقائي عند الكتابة / في textarea الغرفة. السابق:

 templatesText = "[
  {
    tag : 'help' ,
    text : 'This is the help'
  } ,
  {
    tag : 'action' ,
    text : 'This is the action'
  }
] "

(15) يمكن استخدام auto-scroll لتغيير سلوك التمرير التلقائي عند إرسال/تلقي رسالة. السابق:

 auto - scroll = "{
  send : {
    new : true , // will scroll down after sending a message
    newAfterScrollUp : false // will not scroll down after sending a message when scrolled up
  } ,
  receive : {
    new : false , // will not scroll down when receiving a message
    newAfterScrollUp : true // will scroll down when receiving a message when scrolled up
  }
} "

(16) يمكن استخدام show-new-messages-divider لإظهار/إخفاء مقسم الخط الأزرق بين الرسائل المرئية والرسائل غير المرئية.

(17) يمكن استخدام show-footer لإخفاء تذييل الغرفة. على سبيل المثال ، لمنع المستخدمين من إرسال أي رسالة أو وسائط.

(18) يمكن استخدام text-messages لاستبدال النصوص I18N الافتراضية. السابق:

 text - messages = "{
  ROOMS_EMPTY : 'Aucune conversation' ,
  ROOM_EMPTY : 'Aucune conversation sélectionnée' ,
  NEW_MESSAGES : 'Nouveaux messages' ,
  MESSAGE_DELETED : 'Ce message a été supprimé' ,
  MESSAGES_EMPTY : 'Aucun message' ,
  CONVERSATION_STARTED : 'La conversation a commencée le :' ,
  TYPE_MESSAGE : 'Tapez votre message' ,
  SEARCH : 'Rechercher' ,
  IS_ONLINE : 'est en ligne' ,
  LAST_SEEN : 'dernière connexion ' ,
  IS_TYPING : 'est en train de taper...' ,
  CANCEL_SELECT_MESSAGE : 'Annuler Sélection'
} "

(19) يمكن استخدام text-formatting لإضافة تنسيق نص. تتوفر حاليًا وتنسيق الكود الجريء والمائل والمرطب والرمز المضمّن وتنسيق التعليمات البرمجية متعددة الأليفة ويمكن استخدامها بالتزامن.

• يمكنك تعطيل تنسيق النص عن طريق تمرير الدعامة :text-formatting="{disabled: true}" .
• يمكنك تغيير أحرف Markdown ، على سبيل المثال :: :text-formatting="{italic: '^'}"
• يمكنك تعطيل حرف تخفيض معين ، على سبيل المثال :: :text-formatting="{bold: null}"

أسلوب	بناء الجملة	مثال	الإخراج
عريض	* *	*This is bold text*	هذا نص جريء
مائل	_ _	_This text is italicized_	هذا النص مائل
strikethrough	~ ~	~This was mistaken text~	كان هذا النص الخطأ
تسطير	° °	°This text is underlined°	تم التأكيد على هذا النص
التنسيق المتداخل	* * و _ _	*This text is _extremely_ important*	هذا النص مهم للغاية

رمز مضمّن

مثال: "هذا رمز مضمّن"

الإخراج: This is inline code

رمز متعدد الجوانب

مثال: `` `هذا هو رمز متعدد الألين" `` ``

الإخراج:

This is
multiline code

(20) يمكن استخدام link-options لتعطيل روابط عنوان URL في الرسائل ، أو تغيير هدف عناوين URL. السابق:

: link - options = "{ disabled: true, target: '_self', rel: null }"

(21) يمكن استخدام room-info-enabled لتشغيل حدث بعد النقر فوق مكون رأس الغرفة.
يمكنك بعد ذلك استخدام حدث Info Room للاتصال الإجراء الخاص بك بعد النقر على الرأس.

(22) يمكن استخدام textarea-action-enabled لإضافة رمز إضافي على يمين textarea
يمكنك بعد ذلك استخدام حدث Textarea-actionler لاستدعاء الإجراء الخاص بك بعد النقر على الرمز.

(23) يمكن استخدام responsive-breakpoint لانهيار قائمة الغرف على اليسار عندما يقل حجم المنفذ بعد ذلك من العرض المحدد.

(24) يمكن استخدام single-room إذا لم ترغب أبدًا في عرض قائمة الغرف على اليسار. لا تزال بحاجة إلى تمرير rooms الدعامة كصفيف مع عنصر واحد.

(25) يمكن استخدام scroll-distance لتغيير عدد وحدات البكسل قبل أن يتم تشغيل حدث fetchMessages عند التمرير لأعلى لتحميل المزيد من الرسائل ، أو يتم تشغيل حدث fetchMoreRooms عند التمرير لأسفل لتحميل المزيد من الغرف.

(26) يمكن استخدام theme لتغيير موضوع الدردشة. حاليا ، فقط light dark متوفرة.

(27) يمكن استخدام accepted-files لتعيين تفاصيل أنواع الملفات المسموح بها في الدردشة. بشكل افتراضي ، يُسمح بجميع أنواع الملفات: "*" .

مثال: تعيين accepted-files="image/png, image/jpeg, application/pdf" للسماح لملفات JPG PNG و PDF فقط

(28) يمكن استخدام capture-files لتمكين التقاط الصور ومقاطع الفيديو المباشرة على متصفحات الهاتف المحمول ، بدلاً من مجرد تحميل الصور ومقاطع الفيديو الموجودة بالفعل على الجهاز. انظر هنا لمزيد من المعلومات والقيم المعترف بها. بشكل افتراضي ، يتم حذف السمة وسيقدم متصفحات الهاتف المحمول المعرض فقط لاختيار الصور ومقاطع الفيديو. ملاحظة: يؤثر هذا فقط على مرفقات الملفات. يتم تسجيل الرسائل الصوتية دائمًا باستخدام الميكروفون الخاص بالجهاز.

(29) يمكن استخدام multiple-files لتحديد ما إذا كان سيتم قبول اختيارات الملفات المتعددة. افتراضيا هذا صحيح.

(30) يمكن استخدام styles لتخصيص موضوعك الخاص. يمكنك العثور على القائمة الكاملة هنا

(31) يمكن استخدام show-audio لتمكين أو تعطيل أيقونة الصوت

styles = "{
  general : {
    color : '#0a0a0a' ,
    colorSpinner : '#333' ,
    borderStyle : '1px solid #e1e4e8'
  } ,

  footer : {
    background : '#f8f9fa' ,
    backgroundReply : 'rgba(0, 0, 0, 0.08)'
  } ,

  icons : {
    search: '#9ca6af'
  }
} "

بنية بيانات الدعائم

يجب أن تتبع الدعائم بنية محددة لعرض الغرف والرسائل بشكل صحيح:

الغرف الدعامة

 rooms = "[
  {
    roomId : '1' ,
    roomName : 'Room 1' ,
    avatar : 'assets/imgs/people.png' ,
    unreadCount : 4 ,
    index : 3 ,
    lastMessage : {
      _id : 'xyz' ,
      content : 'Last message received' ,
      senderId : '1234' ,
      username : 'John Doe' ,
      timestamp : '10:20' ,
      saved : true ,
      distributed : false ,
      seen : false ,
      new : true
    } ,
    users : [
      {
        _id : '1234' ,
        username : 'John Doe' ,
        avatar : 'assets/imgs/doe.png' ,
        status : {
          state : 'online' ,
          lastChanged : 'today, 14:30'
        }
      } ,
      {
        _id : '4321' ,
        username : 'John Snow' ,
        avatar : 'assets/imgs/snow.png' ,
        status : {
          state : 'offline' ,
          lastChanged : '14 July, 20:00'
        }
      }
    ] ,
    typingUsers : [ 4321 ]
  }
] "

• إذا قمت بإضافة خاصية index ، فسيتم طلب غرفك باستخدام هذه القيمة. يمكن أن يكون index أي قيمة قابلة للفرز ، مثل string ، datetime ، و timestamp ، وما إلى ذلك.

• لكل مستخدم في غرفة ، يمكنك إضافة خاصية status ، والتي يمكن أن تحمل state والخصائص lastChanged :

  • يمكن أن تكون state 'online' أو 'offline'
  • lastChanged هو التاريخ الذي تم فيه تعديل state آخر مرة.

• typingUsers هي مجموعة من جميع المستخدمين الذين يكتبون حاليًا رسالة

رسائل الدعامة

يتم تقديم كائنات الرسائل بشكل مختلف اعتمادًا على نوعها. يتم دعم النص ، الرموز التعبيرية ، الصور ، الفيديو والملفات.

يحتوي كل كائن رسالة على حقل senderId يحمل معرف الوكيل المقابل. إذا كان senderId يطابق الدعامة currentUserId ، فسيتم تنفيذ واجهة المستخدم والإجراءات المحددة.

ملحوظات:

• سيتم عرض username على كل رسالة من الوكلاء المقابلين إذا كان هناك 3 مستخدمين على الأقل في الغرفة
• يتم استخدام system لإظهار الرسائل ذات الشاشة المركزة المحددة
• يمكن استخدام indexId إذا كنت بحاجة إلى تغيير معرف الرسالة الذي يتم عرضه بالفعل في غرفة ، وهذا يمنع خلل الرسوم المتحركة. على سبيل المثال ، عندما لا تعرف مقدمًا معرف الرسالة الذي سيتم إنشاء الواجهة الخلفية الخاصة بك.

تنص الرسالة على:

• saved: true
• distributed: true
• seen: true
• deleted: true مع نص الرسالة المحذوفة
• failure: true للنقر

 messages = "[
  {
    _id : '7890' ,
    indexId : 12092 ,
    content : 'Message 1' ,
    senderId : '1234' ,
    username : 'John Doe' ,
    avatar : 'assets/imgs/doe.png' ,
    date : '13 November' ,
    timestamp : '10:20' ,
    system : false ,
    saved : true ,
    distributed : true ,
    seen : true ,
    deleted : false ,
    failure : true ,
    disableActions : false ,
    disableReactions : false ,
    files : [
      {
        name : 'My File' ,
        size : 67351 ,
        type : 'png' ,
        audio : true ,
        duration : 14.4 ,
        url : 'https://firebasestorage.googleapis.com/...' ,
        preview : 'data:image/png;base64,iVBORw0KGgoAA...' ,
        progress : 88
      }
    ] ,
    reactions : {
      ? : [
        '1234' , // USER_ID
        '4321'
      ] ,
      ? : [
        '1234'
      ]
    } ,
    replyMessage : {
      content : 'Reply Message' ,
      senderId : '4321' ,
      files : [
        {
          name : 'My Replied File' ,
          size : 67351 ,
          type : 'png' ,
          audio : true ,
          duration : 14.4 ,
          url : 'https://firebasestorage.googleapis.com/...' ,
          preview : 'data:image/png;base64,iVBORw0KGgoAA...'
        }
      ]
    } ,
  }
] "

أحداث API

حدث	params	يطلق النار عند المستخدم
fetch-messages (1)	{ room, options }	تم تمريره في الأعلى لتحميل المزيد من الرسائل
fetch-more-rooms (2)	-	تم تمريره لتحميل المزيد من الغرف
send-message	{ roomId, content, files(11), replyMessage(12), usersTag }	أرسل رسالة
edit-message	{ roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag }	تم تحرير رسالة
delete-message	{ roomId, message }	حذف رسالة
open-file	{ message, file }	نقر لعرض ملف أو تنزيله
open-user-tag (3)	{ user }	نقر على علامة مستخدم داخل رسالة
open-failed-message	{ roomId, message }	نقر على أيقونة الفشل بجانب رسالة
add-room	-	نقر على الرمز الجديلة بجوار SearchBar
search-room (4)	{ roomId, value }	كتبت حرفًا في إدخال البحث عن الغرفة
room-action-handler (5)	{ roomId, action }	نقر على أيقونة النقاط العمودية داخل الغرفة
menu-action-handler (6)	{ roomId, action }	نقر على أيقونة النقاط العمودية داخل الغرفة
message-action-handler (7)	{ roomId, action, message }	نقر على أيقونة القائمة المنسدلة داخل الرسالة
message-selection-action-handler (8)	{ roomId, action, messages }	نقر على الزر تحديد داخل الرسالة
send-message-reaction	{ roomId, messageId, reaction, remove }	نقر على أيقونة الرموز التعبيرية داخل رسالة
room-info (9)	room	نقر على شريط رأس الغرفة
toggle-rooms-list	{ opened }	نقر على رمز التبديل داخل رأس الغرفة
textarea-action-handler (10)	{ roomId, message }	نقر على أيقونة مخصصة داخل تذييل
typing-message	{ roomId, message }	بدأت في كتابة رسالة

(1) يتم تشغيل fetch-messages في كل مرة يتم فتح الغرفة. إذا تم فتح الغرفة لأول مرة ، فسيتم إعادة تعيين options reset: true .
(1) يجب أن تكون fetch-messages طريقة تنفيذ نظام تراجع. الغرض منه هو تحميل رسائل محادثة أقدم عند تمرير المستخدم على القمة.

(2) يتم تشغيل fetch-more-rooms عند التمرير لأسفل في قائمة الغرف ، ويجب أن تكون طريقة تنفيذ نظام تراجع.

(3) يتم تشغيل open-user-tag عند النقر فوق علامة مستخدم داخل رسالة. عند إنشاء علامة مستخدم عن طريق الكتابة @ في textarea footer وإرسال الرسالة ، سيتم تحديد العلامة بالنمط أدناه:

 < usertag > TAGGED_USER_ID </ usertag >

هذا سيجعل العلامة قابلة للنقر داخل الرسالة. على سبيل المثال: محتوى علامة الرسالة
ستعامل أحداث send-message edit-message مع هذا النمط من أجلك ويمرره في معامل content .

(4) room-action-handler هو نتيجة لدعوة room-actions .
عند النقر فوق زر من صفيف room-actions ، سيعطيك room-action-handler اسم الزر الذي تم النقر عليه. ثم يمكنك فعل أي شيء تريده. السابق:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'archiveRoom' :
      // call a method to archive the room
  }
}

(5) menu-action-handler هو نتيجة دعامة صناديق menu-actions .
عند النقر فوق زر من صفيف menu-actions ، سيعطيك menu-action-handler اسم الزر الذي تم النقر عليه. ثم يمكنك فعل أي شيء تريده. السابق:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'inviteUser' :
      // call a method to invite a user to the room
    case 'removeUser' :
      // call a method to remove a user from the room
    case 'deleteRoom' :
      // call a method to delete the room
  }
}

(6) يمكن تمكين search-room باستخدام دعامة custom-search-room-enabled . سيسمح لك ذلك بالاتصال بأسلوبك الخاص لتصفية الغرف التي تم تفتيشها.

(7) message-action-handler هو نتيجة دعامة message-actions .
عند النقر فوق زر من صفيف message-actions ، سيعطيك message-action-handler اسم الزر الذي تم النقر عليه وبيانات الرسالة المقابلة. ثم يمكنك فعل أي شيء تريده. السابق:

 messageActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'addMessageToFavorite' :
      // call a method to add a message to the favorite list
    case 'shareMessage' :
      // call a method to share the message with another user
  }
}

(8) message-selection-action-handler هو نتيجة لدعوة message-selection-actions .
عند النقر فوق زر من صفيف message-selection-actions الخاصة بك ، سيعطيك message-selection-action-handler اسم الزر الذي تم النقر عليه وبيانات الرسائل المحددة المقابلة. ثم يمكنك فعل أي شيء تريده. السابق:

 messageSelectionActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'deleteMessages' :
      // call a method to delete selected messaged
    case 'shareMessage' :
      // call a method to share selected messaged with another user
  }
}

(9) room-info هي نتيجة الدعامة room-info-enabled .

(10) textarea-action-handler هو نتيجة الدعامة textarea-action-enabled .

(11) مجموعة من الملفات التي يحتوي عليها كل ملف: { blob, localUrl, name, size, type, extension }

(12) يتوفر كائن replyMessage عندما رد المستخدم على رسالة أخرى من خلال النقر على الرمز المقابل ، ويحتوي على معلومات الرسالة التي تم النقر عليها.

فتحات اسمها

مثال:

 < vue-advanced-chat >
  < div slot = "room-header" >
    This is a new room header
  </ div >

  < div v-for = "message in messages" : slot = "'message_' + message._id" >
    < div v-if = "message.system" >
      System message: { { message . content } }
    </ div >
    < div v-else >
      Normal message: { { message . content } }
    </ div >
  </ div >

  < div v-for = "message in messages" : slot = "'message-avatar_' + message._id" >
    New Avatar
  </ div >
</ vue-advanced-chat >

فتحة	فعل
custom-action-icon	أضف أيقونة مخصصة داخل التذييل
rooms-header	أضف قالبًا أعلى قائمة الغرف (فوق شريط البحث)
room-list-item_{{ROOM_ID}}	استبدال قالب عناصر قائمة الغرفة
room-list-info_{{ROOM_ID}}	استبدال معلومات عناصر قائمة الغرفة
room-list-avatar_{{ROOM_ID}}	استبدل الصورة الرمزية لعناصر قائمة الغرف
room-list-options_{{ROOM_ID}}	استبدل قالب خيارات غرفة القائمة
room-list-options-icon_{{ROOM_ID}}	استبدل أيقونة القائمة على قائمة الغرفة
rooms-header	استبدل المحتوى فوق شريط البحث
rooms-list-search	استبدل شريط البحث
room-header	استبدل قالب رأس الغرفة
room-header-avatar	استبدل قالب رأس الغرفة الصورة الرمزية
room-header-info	استبدل قالب نص رأس الغرفة
room-options	استبدل قالب خيارات الغرفة
message_{{MESSAGE_ID}}	استبدل قالب مربع الرسالة (ورسالة النظام)
message-avatar_{{MESSAGE_ID}}	استبدل قالب الرسالة الرمزية
message-failure_{{MESSAGE_ID}}	استبدل أيقونة فشل الرسالة
messages-empty	استبدل قالب الرسالة الفارغة
rooms-empty	استبدل قالب الغرف الفارغة
no-room-selected	استبدل قالب لا غرفة محدد
menu-icon	استبدل أيقونة قائمة الغرفة
toggle-icon	استبدل أيقونة قائمة غرفة التبديل
spinner-icon-rooms	استبدل أيقونة التحميل الدوار في قائمة الغرف
spinner-icon-infinite-rooms	استبدل أيقونة التحميل الدوار لتحميل المزيد من الغرف
spinner-icon-messages	استبدل أيقونة التحميل الدوار في الغرفة
spinner-icon-infinite-messages	استبدل أيقونة التحميل الدوار لتحميل المزيد من الرسائل
spinner-icon-room-file	استبدل أيقونة التحميل الدوار لتحميل الملفات الثقيلة
spinner-icon-message-file_{{MESSAGE_ID}}	استبدل أيقونة التحميل الدوار في رسالة تحتوي على صورة
scroll-icon	استبدل التمرير إلى أحدث أيقونة الرسائل
reply-close-icon	استبدل أيقونة الإغلاق
image-close-icon	استبدل أيقونة إغلاق الصورة
file-icon	استبدل أيقونة الملف
files-close-icon	استبدل أيقونة إغلاق الملف
edit-close-icon	استبدل أيقونة إغلاق التحرير
preview-close-icon	استبدل أيقونة معاينة الوسائط
emoji-picker-icon	استبدل أيقونة Emoji Picker
emoji-picker-reaction-icon_{{MESSAGE_ID}}	استبدل أيقونة رد فعل Emoji Picker (في مربع الرسائل)
paperclip-icon	استبدل أيقونة paperclip
send-icon	استبدل أيقونة إرسال الرسالة
eye-icon_{{MESSAGE_ID}}	استبدل أيقونة العين (رسالة صورة)
document-icon_{{MESSAGE_ID}}	استبدل أيقونة المستند
pencil-icon_{{MESSAGE_ID}}	استبدل أيقونة القلم الرصاص
checkmark-icon_{{MESSAGE_ID}}	استبدل أيقونة علامة الاختيار للرسالة
checkmark-icon_{{ROOM_ID}}	استبدل أيقونة علامة الاختيار لرسالة من قائمة الغرف
deleted-icon_{{MESSAGE_ID}}	استبدل أيقونة الرسالة المحذوفة
deleted-icon_{{ROOM_ID}}	استبدل أيقونة رسالة محذوفة من قائمة الغرف
microphone-icon_{{ROOM_ID}}	استبدل أيقونة الميكروفون
dropdown-icon_{{MESSAGE_ID}}	استبدل أيقونة القائمة المنسدلة
search-icon	استبدل أيقونة البحث
add-icon	استبدل أيقونة إضافة غرفة
audio-stop-icon	استبدل أيقونة إيقاف تسجيل الصوت
audio-check-icon	استبدل أيقونة تأكيد تسجيل الصوت
audio-pause-icon_{{MESSAGE_ID}}	استبدل أيقونة إيقاف التوقف الصوتي للرسالة
audio-play-icon_{{MESSAGE_ID}}	استبدل أيقونة تشغيل الصوت

باستخدام مع Firestore

رمز المصدر

يمكنك العثور على الكود المصدري لتنفيذ تطبيق دردشة مميز بالكامل باستخدام Firebase/Firestore داخل المجلد demo .
لاختباره باستخدام مشروع Firebase الخاص بك:

• Setup Cloud Firestore (لتخزين المستخدمين والغرف) وقاعدة بيانات الوقت الفعلي (لتخزين المستخدمين عبر الإنترنت)
• استنساخ هذا المستودع: git clone https://github.com/advanced-chat/vue-advanced-chat.git
• داخل ملف demo/src/database/index.js ، استبدل const config = ... بواسطة تكوين Firebase الخاص بك
• اذهب داخل المجلد demo وقم بتشغيل npm run serve

بنية البيانات

إذا قررت استخدام نفس الرمز كما في المجلد demo لإنشاء تطبيق الدردشة الخاص بك ، فيجب أن يكون لديك بنية بيانات Firestore محددة.
لمساعدتك في البدء ، أضفت في demo/src/App.vue طريقة addData لتهيئة بعض البيانات على قاعدة بيانات Firestore الخاصة بك.

مجموعة المستخدمين

users: {
  USER_ID_1 : {
    _id : '1' ,
    username : 'User 1'
  } ,
  USER_ID_2 : {
    _id : '2' ,
    username : 'User 2'
  } ,
  USER_ID_3 : {
    _id : '3' ,
    username : 'User 2'
  }
} 

مجموعة الغرف

chatRooms: {
  ROOM_ID_1 : {
    users : [ '1' , '3' ]
  } ,
  ROOM_ID_2 : {
    users : [ '1' , '2' , '3' ]
  }
} 

جمع الرسائل داخل مستند الغرفة

messages: {
  MESSAGE_ID_1 : {
    content : 'My first message to <usertag>John</usertag>' ,
    senderId : '2' ,
    timestamp : 'December 11, 2019 at 4:00:00 PM' ,
    seen : true
  }
} 

ملحوظات

• تحتاج إلى إنشاء فهرس مركب لطلب الغرف حسب الرسالة الأخيرة المستلمة. أسهل طريقة للقيام بذلك هي إنشاء غرفة ، ثم انقر فوق عنوان URL لرسالة الخطأ في وحدة تحكم تصحيح الأخطاء في المتصفح.

المساهمة

مساعدتك موضع تقدير دائما

رخصة

هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا