use chat

use chat

AI 소스 코드

v3.1.2

다운로드

채팅을 사용하십시오

!!!!!!! 버전 1.5.0을 사용하지 마십시오. 속성 이름이 잘못되었습니다 !!!

채팅 애플리케이션에서 상태 관리를위한 반응 후크.

전체 문서는 아직 사용할 수 없지만 준비됩니다 .

이 라이브러리에 관심이 있고 더 많은 문서가 필요한 경우 전용 문제에 긍정적 인 반응 (+1, Heart, Rocket) 중 하나를 추가하여 알려주십시오. #1

무엇입니까?

이것은 헤드리스 채팅 라이브러리입니다. 그것을 Formik과 같은 것으로 생각하지만 채팅 앱이라고 생각하십시오.

라이브러리는 @chatscope/chat-ui-kit-react와 다른 채팅 구성 요소와 함께 사용할 수 있습니다.

그 목표는 채팅 애플리케이션에서 가장 자주 구현되는 기능을 처리하는 도구를 제공하는 것입니다.
주로 그것은 응용 프로그램 상태 관리 일뿐 만 아니라 타이핑 지표 신호 전달을 보내거나 수신하는 데 드리 킹 또는 조절과 같은 멋진 애드온입니다.

왜?

채팅 응용 프로그램의 논리는 종종 반복적입니다. 이러한 응용 프로그램의 대부분에는 사용자 목록, 컨퍼런스 목록 및 코스 메시지가 포함됩니다. 시장에는 적어도 몇 명의 채팅 API 제공 업체가 있습니다. 채팅 응용 프로그램을 구축하는 데 사용할 수있는 SaaS 서비스를 제공합니다. 또한 거의 항상 사용 가능하고 간단한 메시징 라이브러리를 얻을 수 있습니다. 이러한 라이브러리는 복잡한 통신 프로토콜을 캡슐화합니다.
때로는 UI를 공급자의 메시징 라이브러리에 바인딩하는 UI 구성 요소 및 후크/제공 업체도 얻습니다. 둘 다 밀접하게 관련되어있어 메시징 라이브러리 또는 UI 구성 요소를 많은 작업으로 대체 할 수 있습니다.

이 경우 앱을 유지하는 방법을 관리해야합니다. 연락처 및 해당 상태 목록, 각 연락처에 대한 메시지 목록, 채팅 간 전환, 활성 채팅 설정, 메시지 렌더링 등 ...

자신만의 백업을 만들고 커뮤니케이션 계층을 직접 구현하면이 모든 일을 피하지 않을 것입니다.

응용 프로그램의 비즈니스 기능에 집중하는 것이 낫지 않습니까? 레이아웃, 색상 선택 등은 배열에서 메시지를 "읽기"로 설정하도록 메시지를 찾는 방법을 궁금해하는 대신?

그러한 것들은 종종 그들이 보이는 것보다 더 복잡한 것으로 판명됩니다.

예를 들어, 메시지 목록은 항상 평평한 배열이 아닙니다. 종종 사용자 및 대화에 할당 된 메시지가있는 객체가되며, 추가로 들어오는 메시지 블록으로 그룹화됩니다.

목록에 메시지를 추가하려면 다음 단계가 필요합니다.

주어진 대화에 대한 메시지 목록을 찾으십시오.
마지막 그룹을 찾으십시오.
이것이 메시지의 사용자 그룹인지 확인하십시오.
그렇지 않은 경우 그룹을 만들고 메시지를 추가하십시오.
그룹을 목록에 추가하십시오

어프, 조금있어?

이러한 것들은 별도의 논리 라이브러리로 닫아야하며, 이는 간단하고 직관적 인 방식으로 사용할 수 있습니다. 일관된 인터페이스의 구현은 라이브러리 사용 방식을 변경하지 않고 내부 튜닝 (예 : 데이터 구조 변경)의 가능성을 제공합니다.

특징

사용자 상태 처리 (이름, 아바타, 존재 등과 같은 사용자 비즈니스 속성 포함)
대화 상태 처리 (현재 대화 포함)
그룹화 된 메시지를 처리하면 많은 대화가 있습니다
Defounced Typing 표시기 보내기
자동 스로틀 링은 입력 지표를 받았습니다
현재 메시지 입력 값을 처리합니다
메시지 초안 처리
존재하는 메시지를 업데이트합니다
모든 커뮤니케이션 서비스에 대한 지원

설치

원사 사용.

yarn add @chatscope/use-chat

NPM 사용.

npm install @chatscope/use-chat

건축학

라이브러리는 세 부분으로 구성됩니다.

저장 - 상태가 유지되는 곳
ChatProvider- 채팅 컨텍스트 제공 업체
USECHAT- 스토리지 서비스 및 UI를 바인딩하는 후크

BasicStorage

이것은 istorage 인터페이스를 구현하는 클래스입니다. 대화, 메시지, 현재 대화 표시기 등과 같은 모든 데이터는 스토리지에 있습니다. BasicStorage는 istorage의 기본 구현입니다. 완벽하게 작동해야하며 대부분의 응용 분야에 사용할 수 있습니다. 그러나 Redux 또는 다른 주립 도서관을 기반으로 새로운 구현을 작성할 수 있습니다. 그렇기 때문에 스토리지가 외부에서 Chatprovider에게 제공되는 이유입니다.

exampleChatservice

이것은 ichatservice 인터페이스를 구현하는 클래스입니다. 이 서비스의 목적은 채팅 서버와의 연결을 유지하고 메시지 보내기 및 수신 및 채팅 프로토콜 명령을 유지하는 것입니다. 이것은 채팅 서버를 라이브러리와 연결하는 지점입니다. 이 라이브러리를 사용하려면 ichatservice 인터페이스를 구현하는 자신의 채팅 서비스를 작성해야합니다. 서비스 구현은 사용중인 채팅 서버에 따라 다릅니다. 서비스 내용은 처음부터 작성된 코드 일 수 있지만 서비스는 채팅 커뮤니케이션 라이브러리를 사용할 준비가 된 모든 캡슐화 계층 일 수도 있습니다.
빠른 시작을 위해 사용할 수있는 src/examples/examplechatservice.ts가 있습니다. 이것은 응용 프로그램의 실제 서비스를 개발하기위한 좋은 출발점입니다.

향후 나는 socket.io 기반 채팅 서버와 실제 통신을 보여주는 더 많은 예를 제공 할 것입니다.

일부 SAAS 제공 업체의 서비스 구현도 제공됩니다.

서비스 공장

직접 구현 해야하는 간단한 기능입니다. 이 함수는 첫 번째 인수로 채팅 저장소 개체 (ichatstorage)를 수신하고 두 번째 인수로 업데이트 기능을 수신합니다. 이 기능은 ICHATSERVICE 구현 클래스의 인스턴스를 반환해야합니다. 때때로 Chatservice 구현에서 스토리지에서 값을 얻고 저장소에 저장해야합니다. 여기에서 스토리지를 서비스로 전달할 수 있습니다. 스토리지 상태에 대한 액세스는 Storage.getState () 메소드에 의해 제공됩니다. Storage.AddConversation (), Storage.AdDuser () 등과 같은 함수를 호출하여 스토리지에 쓰는 것은 실현됩니다. 두 번째 인수는 업데이트 기능입니다. 서비스에서 수행 된 스토리지에 각각 쓰기는 업데이트 스테이트 함수를 호출하여 재 렌더를 수행해야합니다. 예를 들어 서비스가 일부 사용자가 연결된 신호 화를 받으면 Storage.adduser () 메소드를 사용하여 스토리지에 사용자를 추가 할 수 있으며 다음 호출 updatestate ().

이 설명은 아마도 복잡해 보일 것입니다 :). 그러나 나는 당신이 모든 것을 돌봐야 할 때와 비교할 때 정말 간단하다고 믿습니다.

기본 사용

이것은 매우 간단한 예이지만 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 >
  ) ;
} ;

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