use chat ดาวน์โหลด

use chat

โค้ดแหล่งที่มา AI

v3.1.2

ดาวน์โหลด

ใช้แชท

- โปรดอย่าใช้เวอร์ชัน 1.5.0 มีชื่อคุณสมบัติผิด !!!

ตอบสนองต่อการจัดการสถานะในแอปพลิเคชันแชท

เอกสารฉบับเต็มยังไม่พร้อมใช้งาน แต่ จะเตรียมไว้

หากคุณมีความสนใจในห้องสมุดนี้และต้องการเอกสารเพิ่มเติมโปรดแจ้งให้เราทราบโดยเพิ่มหนึ่งในปฏิกิริยาเชิงบวก (+1, Heart, Rocket) ในปัญหาเฉพาะที่นี่: #1

มันคืออะไร?

นี่คือห้องสมุดแชทแบบไม่มีหัว คิดว่ามันเป็นอะไรบางอย่างเช่น formik แต่สำหรับแอพแชท

ห้องสมุดสามารถใช้ได้ทั้งกับ @chatscope/chat-ui-kit-react และกับส่วนประกอบแชทอื่น ๆ

เป้าหมายของมันคือการจัดหาเครื่องมือสำหรับการจัดการคุณสมบัติที่มักจะนำไปใช้ในแอปพลิเคชันแชท
ในขั้นต้นมันคือการจัดการสถานะแอปพลิเคชันรวมถึงส่วนเสริมที่ดีเช่น debounce หรือการควบคุมปริมาณของการส่งหรือรับสัญญาณบ่งชี้การพิมพ์

ทำไม

ตรรกะของแอปพลิเคชันแชทมักจะซ้ำ ๆ แอปพลิเคชันเหล่านี้ส่วนใหญ่มีรายชื่อผู้ใช้รายการการประชุมและข้อความแน่นอน มีผู้ให้บริการ API แชทอย่างน้อยในตลาด พวกเขาให้บริการ SaaS ที่คุณสามารถใช้ในการสร้างแอปพลิเคชันแชท นอกจากนี้คุณยังได้รับไลบรารีการส่งข้อความที่เรียบง่ายและพร้อมใช้งานจากพวกเขา ห้องสมุดดังกล่าวห่อหุ้มโปรโตคอลการสื่อสารที่ซับซ้อน
บางครั้งคุณยังได้รับส่วนประกอบ UI และ hooks/ผู้ให้บริการที่ผูก UI กับห้องสมุดการส่งข้อความของผู้ให้บริการ ทั้งสองมีความสัมพันธ์อย่างใกล้ชิดซึ่งทำให้การแทนที่ไลบรารีการส่งข้อความหรือส่วนประกอบ UI มีงานมากมาย

ในกรณีนี้คุณต้องดูแลวิธีการเก็บไว้ในแอพของคุณ: รายการผู้ติดต่อและสถานะของพวกเขารายการข้อความสำหรับผู้ติดต่อแต่ละรายสลับระหว่างแชทตั้งค่าการแชทที่ใช้งานอยู่การแสดงผลข้อความและอื่น ๆ ...

หากคุณสร้างการสนับสนุนของคุณเองและใช้เลเยอร์การสื่อสารด้วยตัวคุณเองคุณจะไม่หลีกเลี่ยงการทำสิ่งเหล่านี้ทั้งหมด

การมุ่งเน้นไปที่ฟังก์ชั่นทางธุรกิจของแอปพลิเคชันหรือไม่? ในรูปแบบการเลือกสี ฯลฯ แทนที่จะสงสัยว่าจะหาข้อความในอาร์เรย์เพื่อตั้งสถานะเป็น "อ่าน" ได้อย่างไร?

สิ่งเหล่านี้มักจะซับซ้อนกว่าที่พวกเขาคิด

ตัวอย่างเช่นรายการข้อความไม่ได้เป็นอาร์เรย์แบนเสมอไป มันมักจะเป็นวัตถุที่มีข้อความที่กำหนดให้กับผู้ใช้และการสนทนาและนอกจากนี้มันจะถูกจัดกลุ่มเป็นบล็อกของข้อความขาเข้าและขาออก

การเพิ่มข้อความไปยังรายการต้องใช้ขั้นตอนต่อไปนี้อย่างคร่าวๆ:

ค้นหารายการข้อความสำหรับการสนทนาที่กำหนด
ค้นหากลุ่มสุดท้าย
ตรวจสอบว่านี่เป็นกลุ่มของผู้ใช้ข้อความมาจากหรือไม่
ถ้าไม่ใช่ให้สร้างกลุ่มและเพิ่มข้อความลงไป
เพิ่มกลุ่มลงในรายการ

uff มีนิดหน่อยใช่มั้ย

สิ่งเหล่านี้ควรปิดในไลบรารีลอจิกแยกต่างหากซึ่งสามารถใช้ในวิธีที่เรียบง่ายและใช้งานง่าย การใช้งานอินเทอร์เฟซที่สอดคล้องกันยังให้ความเป็นไปได้ของการปรับแต่งภายใน (เช่นการเปลี่ยนโครงสร้างข้อมูล) โดยไม่ต้องเปลี่ยนวิธีการใช้ไลบรารี

คุณสมบัติ

การจัดการสถานะผู้ใช้ (พร้อมคุณสมบัติทางธุรกิจของผู้ใช้เช่นชื่อ, อวตาร, การแสดงตน ฯลฯ )
การจัดการสถานะการสนทนา (รวมถึงการสนทนาปัจจุบัน)
การจัดการสถานะข้อความที่จัดกลุ่มสำหรับการสนทนาจำนวนมาก
การส่งตัวบ่งชี้การพิมพ์ debounce
การควบคุมความเร็วอัตโนมัติที่ได้รับตัวบ่งชี้การพิมพ์
การจัดการค่าอินพุตข้อความปัจจุบัน
การจัดการร่างข้อความ
การอัปเดตข้อความที่มีอยู่
สนับสนุนบริการสื่อสารใด ๆ

การติดตั้ง

ใช้เส้นด้าย

yarn add @chatscope/use-chat

ใช้ NPM

npm install @chatscope/use-chat

สถาปัตยกรรม

ห้องสมุดประกอบด้วยสามส่วน:

ที่เก็บ - สถานที่ที่รัฐถูกเก็บไว้
ChatProvider - ผู้ให้บริการบริบทแชท
USECHAT - HOOK ที่เชื่อมโยงบริการจัดเก็บและ UI

การจัดเก็บข้อมูลขั้นพื้นฐาน

นี่คือคลาสที่ใช้อินเทอร์เฟซ istorage ข้อมูลทั้งหมดเช่นการสนทนาข้อความตัวบ่งชี้การสนทนาปัจจุบัน ฯลฯ อยู่ในที่เก็บข้อมูล การจัดเก็บข้อมูลพื้นฐานคือการใช้งานพื้นฐานของ istorage ควรใช้งานได้อย่างสมบูรณ์และสามารถใช้สำหรับแอปพลิเคชันส่วนใหญ่ อย่างไรก็ตามมีความเป็นไปได้ที่จะเขียนการใช้งานใหม่เช่นตาม Redux หรือห้องสมุดรัฐอื่น นั่นคือเหตุผลที่จัดเก็บข้อมูลให้กับ Chatprovider จากภายนอก

Examplechatservice

นี่คือคลาสที่ใช้อินเทอร์เฟซ Ichatservice วัตถุประสงค์ของบริการนี้คือการรักษาการเชื่อมต่อกับเซิร์ฟเวอร์แชทส่งและรับข้อความและคำสั่งโปรโตคอลแชท นี่คือจุดที่เชื่อมต่อเซิร์ฟเวอร์แชทของคุณกับไลบรารี ในการใช้ไลบรารีนี้คุณต้องเขียนแชทบริการของคุณเองซึ่งใช้อินเตอร์เฟส Ichatservice การใช้งานบริการขึ้นอยู่กับเซิร์ฟเวอร์แชทที่คุณใช้ เนื้อหาของบริการสามารถเป็นรหัสของคุณที่เขียนตั้งแต่เริ่มต้น แต่บริการยังสามารถเป็นเลเยอร์การห่อหุ้มได้สำหรับห้องสมุดการสื่อสารแชทที่พร้อมใช้งาน
มี SRC/ตัวอย่าง/ExampleChatservice.TS พร้อมใช้งานสำหรับการเริ่มต้นอย่างรวดเร็ว นี่เป็นจุดเริ่มต้นที่ดีสำหรับการพัฒนาบริการจริงสำหรับแอปพลิเคชันของคุณ

ในอนาคตฉันจะให้ตัวอย่างเพิ่มเติมที่แสดงการสื่อสารจริงกับเซิร์ฟเวอร์แชทตาม socket.io

การใช้บริการสำหรับผู้ให้บริการ SaaS บางรายจะพร้อมใช้งาน

โรงงานบริการ

มันเป็นฟังก์ชั่นง่ายๆที่คุณต้องใช้ในการใช้งานด้วยตัวเอง ฟังก์ชั่นนี้ได้รับวัตถุที่เก็บข้อมูลแชท (ichatstorage) เป็นอาร์กิวเมนต์แรกและฟังก์ชั่นอัปเดตเป็นครั้งที่สอง ฟังก์ชั่นนี้จะต้องส่งคืนอินสแตนซ์ของคลาสที่ใช้ Ichatservice บางครั้งในการใช้งาน ChatService ของคุณคุณจะต้องได้รับค่าจากที่เก็บข้อมูลรวมถึงบันทึกลงในที่เก็บข้อมูล ที่นี่คุณสามารถส่งที่เก็บข้อมูลไปยังบริการของคุณ การเข้าถึงสถานะการจัดเก็บมีให้โดยวิธีการจัดเก็บข้อมูล GetState () การเขียนไปยังที่เก็บข้อมูลนั้นรับรู้โดยฟังก์ชั่นการโทรเช่น Storage.addConversation (), storage.adduser () ฯลฯ อาร์กิวเมนต์ที่สองคือฟังก์ชั่น updateState แต่ละการเขียนไปยังที่เก็บข้อมูลที่ดำเนินการจากบริการจำเป็นต้องเรียกใช้ฟังก์ชัน updateState เพื่อดำเนินการเรนเดอร์อีกครั้ง ตัวอย่างเช่นเมื่อบริการได้รับสัญญาณที่ผู้ใช้บางรายเชื่อมต่อคุณสามารถเพิ่มผู้ใช้ในการจัดเก็บโดยใช้ storage.adduser () และการโทรครั้งต่อไป updateState ()

คำอธิบายนี้อาจดูซับซ้อน :) แต่เชื่อว่ามันง่ายมากเมื่อเทียบกับเมื่อคุณต้องดูแลทุกอย่าง

การใช้งานขั้นพื้นฐาน

นี่เป็นตัวอย่างที่ง่ายมาก แต่มันแสดงให้เห็นว่ามันง่ายแค่ไหนที่จะใช้การแชทโดยใช้ USECHAT HOOK

สำหรับตัวอย่างที่ซับซ้อนมากขึ้นตาม 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 >
  ) ;
} ;

file 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 > ) ;
}