use chat - use chat

use chat

كود الذكاء الاصطناعي

v3.1.2

تنزيل

استخدم الدردشة

!!! من فضلك لا تستخدم الإصدار 1.5.0 لديه أسماء خصائص خاطئة !!!

رد الفعل لإدارة الدولة في تطبيقات الدردشة.

الوثائق الكاملة غير متوفرة بعد ، ولكن سيتم إعدادها .

إذا كنت مهتمًا بهذه المكتبة وتحتاج إلى مزيد من الوثائق ، فيرجى إخبارنا بإضافة أحد ردود الفعل الإيجابية (+1 ، القلب ، الصاروخ) في القضية المخصصة هنا: #1

ما هذا؟

هذه مكتبة دردشة مقطوعة الرأس. فكر في الأمر كشيء مثل Formik ولكن لتطبيقات الدردشة.

يمكن استخدام المكتبة مع @chatscope/chat-ui-kit react وكذلك مع مكونات الدردشة الأخرى.

الهدف من ذلك هو توفير أداة للتعامل مع الميزات التي يتم تنفيذها في أغلب الأحيان في تطبيقات الدردشة.
إنها في المقام الأول إدارة حالة تطبيق بالإضافة إلى بعض الإضافات اللطيفة مثل Debounce أو اختناق إرسال أو استلام إشارة مؤشر الكتابة.

لماذا؟

غالبًا ما يكون منطق تطبيقات الدردشة متكررة. تحتوي معظم هذه التطبيقات على قائمة مستخدمين وقائمة مؤتمرات ورسائل بالطبع. هناك على الأقل عدد قليل من مقدمي API الدردشة في السوق. أنها توفر خدمات SaaS التي يمكنك استخدامها لإنشاء تطبيق الدردشة. كما يمكنك دائمًا الحصول على مكتبة مراسلة جاهزة للاستخدام. هذه المكتبة تغلف بروتوكول اتصال معقد.
في بعض الأحيان ، تحصل أيضًا على مكونات واجهة المستخدم وخطافات/مقدمي الخدمات التي تربط واجهة المستخدم بمكتبة المراسلة الخاصة بالمزود. يرتبط كلاهما ارتباطًا وثيقًا ، مما يجعل استبدال مكتبة المراسلة أو مكونات واجهة المستخدم الكثير من العمل.

في هذه الحالة ، عليك أن تهتم بكيفية الاحتفاظ بها في تطبيقك: قائمة جهات الاتصال وأوضعها ، وقائمة من الرسائل لكل جهة اتصال ، والتبديل بين الدردشات ، وإعداد دردشة نشطة ، ورسائل تقديم وما إلى ذلك ...

إذا قمت بإنشاء طبقة الاتصال الخاصة بك وتطبيق طبقة الاتصال بنفسك ، فلن تتجنب أيضًا القيام بكل هذه الأشياء.

أليس من الأفضل التركيز على وظائف العمل للتطبيق؟ في التصميم ، اختيار الألوان وما إلى ذلك ، بدلاً من التساؤل عن كيفية العثور على رسالة في الصفيف لتعيين حالتها على "القراءة"؟

غالبًا ما تتحول مثل هذه الأشياء إلى أن تكون أكثر تعقيدًا مما يبدو.

على سبيل المثال ، قائمة الرسائل ليست دائمًا صفيفًا مسطحًا. غالبًا ما يكون كائنًا يحتوي على رسائل مخصصة للمستخدمين والمحادثات ، بالإضافة إلى ذلك ، سيتم تجميعها في كتل من الرسائل الواردة والصادرة.

تتطلب إضافة رسالة إلى القائمة الخطوات التالية تقريبًا:

ابحث عن قائمة رسائل لمحادثة معينة ،
ابحث عن المجموعة الأخيرة ،
تحقق مما إذا كانت هذه هي مجموعة المستخدم تأتي الرسالة منها ،
إذا لم يكن الأمر كذلك ، فقم بإنشاء مجموعة وأضف الرسالة إليها
أضف المجموعة إلى القائمة

UFF ، هناك القليل منه ، أليس كذلك؟

يجب إغلاق مثل هذه الأشياء في مكتبات منطقية منفصلة ، والتي يمكن استخدامها بطريقة بسيطة وبديهية. يوفر تنفيذ واجهة متسقة أيضًا إمكانية ضبط داخلي (مثل تغيير بنية البيانات) دون تغيير طريقة استخدام المكتبة.

سمات

تعامل المستخدمين (مع خصائص أعمال المستخدم مثل الاسم ، الصورة الرمزية ، التواجد وما إلى ذلك)
دولة التعامل مع المحادثات (بما في ذلك المحادثة الحالية)
التعامل مع الرسائل المجمعة للعديد من المحادثات
إرسال مؤشر الكتابة المصححة
استلام مؤشر الكتابة التلقائي
التعامل مع قيمة إدخال الرسالة الحالية
معالجة مسودات الرسائل
تحديث الرسائل الموجودة
دعم أي خدمة اتصال

تثبيت

باستخدام الغزل.

yarn add @chatscope/use-chat

باستخدام NPM.

npm install @chatscope/use-chat

بنيان

تتكون المكتبة من ثلاثة أجزاء:

التخزين - المكان الذي يتم فيه الاحتفاظ بالدولة
ChatProvider - مزود سياق الدردشة
UseChat - الخطاف الذي يربط خدمة التخزين وواجهة المستخدم

BasicStorage

هذا فئة تنفذ واجهة iStorage. جميع البيانات مثل المحادثات والرسائل ومؤشر المحادثة الحالي وما إلى ذلك يجلس في التخزين. BasicStorage هو التنفيذ الأساسي لـ iStorage. يجب أن تكون تعمل بكامل طاقتها ، ويمكن استخدامها لمعظم التطبيقات. ومع ذلك ، من الممكن كتابة تطبيقات جديدة على أساس Redux أو مكتبة الدولة الأخرى. هذا هو السبب في توفير التخزين إلى Chatprovider من الخارج.

explechatservice

هذا هو الفئة التي تنفذ واجهة ichatservice. الغرض من هذه الخدمة هو الحفاظ على اتصال مع خادم الدردشة ، وإرسال واستقبال الرسائل وأوامر بروتوكول الدردشة. هذه هي النقطة التي تربط خادم الدردشة الخاص بك بالمكتبة. لاستخدام هذه المكتبة ، تحتاج إلى كتابة خدمة الدردشات الخاصة بك التي تنفذ واجهة Ichatservice. يعتمد تنفيذ الخدمة على خادم الدردشة الذي تستخدمه. يمكن أن يكون محتوى الخدمة هو الكود الخاص بك المكتوب من نقطة الصفر ، ولكن يمكن أن تكون الخدمة أيضًا طبقة تغليف لأي مكتبة اتصالات الدردشة جاهزة لاستخدامها
هناك SRC/أمثلة/explechatservice.ts متاحة لبداية سريعة. هذه نقطة انطلاق جيدة لتطوير الخدمة الحقيقية لتطبيقك.

في المستقبل ، سأقدم المزيد من الأمثلة التي تبين التواصل الحقيقي مع Socket.io خادم الدردشة المستند إلى.

ستكون تطبيقات الخدمة لبعض مقدمي خدمات SaaS متاحة أيضًا.

مصنع الخدمة

إنها وظيفة بسيطة تحتاج إلى تنفيذ نفسك. تتلقى هذه الوظيفة كائن تخزين الدردشة (IChatStorage) كوسيطة وتحديث أول وظيفة ثانية. يجب أن تُرجع هذه الوظيفة مثيلًا للفئة التي تنفذ ichatservice. في بعض الأحيان في تطبيق خدمات الدردشة ، ستحتاج إلى الحصول على قيم من التخزين وكذلك حفظها في التخزين. هنا يمكنك تمرير التخزين إلى خدمتك. يتم توفير الوصول إلى حالة التخزين عن طريق Storage.GetState (). يتم تحقيق الكتابة إلى التخزين من خلال استدعاء وظائف مثل Storage.AddConversation () ، storage.adduser () وما إلى ذلك. الوسيطة الثانية هي وظيفة updatestate . تحتاج كل كتابة إلى التخزين الذي يتم إجراؤه من الخدمة إلى استدعاء وظيفة updatestate لأداء إعادة تقديم. على سبيل المثال ، عندما تتلقى الخدمة الإشارة التي يتصل بها بعض المستخدمين ، يمكنك إضافة المستخدم إلى التخزين باستخدام طريقة Storage.AdDuser () وطريقة تحديث المكالمة التالية ().

ربما يبدو هذا الوصف معقدًا :). لكن صدق ، أنا بسيط حقًا مقارنةً عندما يتعين عليك الاعتناء بكل شيء.

الاستخدام الأساسي

هذا مثال بسيط للغاية ، لكنه يوضح مدى سهولة تنفيذ الدردشة باستخدام خطاف Usechat .

للحصول على مثال أكثر تعقيدًا استنادًا إلى CRA ، يرجى زيارة https://github.com/chatscope/use-chat-example. تطبيق مثال العمل متاح هنا: https://use-chat.examples.chatscope.io

ملف: index.js

 import { nanoid } from "nanoid" ;
import {
  BasicStorage ,
  ChatProvider ,
  ExampleChatService ,
  AutoDraft
} from "@chatscope/use-chat" ;

// Storage needs to generate id for messages and groups
const messageIdGenerator = ( ) => nanoid ( ) ;
const groupIdGenerator = ( ) => nanoid ( ) ;

// Create serviceFactory
const serviceFactory = ( storage , updateState ) => {
  return new ExampleChatService ( storage , updateState ) ;
} ;

const chatStorage = new BasicStorage ( { groupIdGenerator , messageIdGenerator } ) ;

export const App = ( ) => {
  return (
    < ChatProvider serviceFactory = { serviceFactory } storage = { chatStorage } config = { {
      typingThrottleTime : 250 ,
      typingDebounceTime : 900 ,
      debounceTyping : true ,
      autoDraft : AutoDraft . Save | AutoDraft . Restore
    } } >
      < Chat />
    </ ChatProvider >
  ) ;
} ;

ملف chat.js:

 import { useState , useMemo } from "react" ;
import { MainContainer , Sidebar , ConversationList , Conversation , Avatar , MessageGroup , Message ,
  ChatContainer , ConversationHeader , MessageList , MessageInput } from "@chatscope/chat-ui-kit-react" ;
import { useChat , ChatMessage , MessageContentType , MessageDirection , MessageStatus } from "@chatscope/use-chat" ;

export const Chat = ( ) => {

  // Message input value
  const [ value , setValue ] = useState ( "" ) ;

  // Get all chat related values and methods from useChat hook 
  const {
    currentMessages , conversations , activeConversation , setActiveConversation , sendMessage , getUser
  } = useChat ( ) ;

  // Get current user data
  const [ currentUserAvatar , currentUserName ] = useMemo ( ( ) => {

    if ( activeConversation ) {
      const participant = activeConversation . participants . length > 0 ? activeConversation . participants [ 0 ] : undefined ;

      if ( participant ) {
        const user = getUser ( participant . id ) ;
        if ( user ) {
          return [ < Avatar src = { user . avatar } /> , user . username ]
        }
      }
    }

    return [ undefined , undefined ] ;

  } , [ activeConversation ] ) ;

  const handleSend = text => {

    // Logger user (sender)
    const currentUserId = "123" ;

    const message = new ChatMessage ( {
      id : "" ,
      content : text ,
      contentType : MessageContentType . TextHtml ,
      senderId : currentUserId ,
      direction : MessageDirection . Outgoing ,
      status : MessageStatus . Sent
    } ) ;

    sendMessage ( {
      message ,
      conversationId : activeConversation . id ,
      senderId : currentUserId ,
    } ) ;

  } ;

  return ( < MainContainer >
    < Sidebar position = "left" >
      < ConversationList >
        { conversations . map ( c => {
          
          // Helper for getting the data of the first participant
          const [ avatar , name ] = ( ( ) => {

            const participant = c . participants . length > 0 ? c . participants [ 0 ] : undefined ;
            if ( participant ) {
              const user = getUser ( participant . id ) ;
              if ( user ) {

                return [ < Avatar src = { user . avatar } /> , user . username ]

              }
            }

            return [ undefined , undefined ]
          } ) ( ) ;

          return ( < Conversation key = { c . id }
                        name = { name }
                        active = { activeConversation ?. id === c . id }
                        unreadCnt = { c . unreadCounter }
                        onClick = { e => setActiveConversation ( c . id ) } >
            { avatar }
          </ Conversation > ) ;
        } ) }
      </ ConversationList >
    </ Sidebar >
    
    < ChatContainer >
      
      < ConversationHeader >
        { currentUserAvatar }
        < ConversationHeader . Content userName = { currentUserName } />
      </ ConversationHeader >
      
      < MessageList >
        { currentMessages . map ( g => < MessageGroup key = { g . id } direction = { g . direction } >
          < MessageGroup . Messages >
            { g . messages . map ( m => < Message key = { m . id } model = { {
              type : "text" ,
              payload : m . content
            } } /> ) }
          </ MessageGroup . Messages >
        </ MessageGroup > ) }
      </ MessageList >
      
      < MessageInput value = { value } onSend = { handleSend } />
      
    </ ChatContainer >
    
  </ MainContainer > ) ;
}