use chat

use chat

AI ソースコード

v3.1.2

ダウンロード

チャットを使用します

!!!バージョン1.5.0を使用しないでくださいそれは間違ったプロパティ名を持っています!!!

チャットアプリケーションでの状態管理のための反応フック。

完全なドキュメントはまだ利用できませんが、準備されます。

このライブラリに興味があり、より多くのドキュメントが必要な場合は、ここで専用の問題に肯定的な反応（+1、ハート、ロケット）を追加してお知らせください：＃1

それは何ですか？

これはヘッドレスチャットライブラリです。チャットアプリのためには、それをFormikのようなものと考えてください。

ライブラリは、 @chatscope/chat-ui-kit-reactと他のチャットコンポーネントの両方で使用できます。

それの目標は、チャットアプリケーションで最も頻繁に実装される機能を処理するためのツールを提供することです。
主に、アプリケーションの状態管理であり、タイピングインジケーターシグナルの送信または受信のデバウンスやスロットリングなどのいくつかの素晴らしいアドオンです。

なぜ？

チャットアプリケーションのロジックはしばしば反復的です。これらのアプリケーションのほとんどには、ユーザーリスト、会議リスト、そしてもちろんメッセージが含まれています。市場には少なくともいくつかのチャットAPIプロバイダーがいます。チャットアプリケーションの構築に使用できるSaaSサービスを提供します。また、ほとんどの場合、すぐにすぐに使用できるシンプルなメッセージングライブラリを入手します。このようなライブラリは、複雑な通信プロトコルをカプセル化します。
また、UIをプロバイダーのメッセージングライブラリに結合するUIコンポーネントとフック/プロバイダーを取得することもあります。どちらも密接に関連しているため、メッセージングライブラリまたはUIコンポーネントを多くの作業に置き換えます。

この場合、アプリに維持する方法を処理する必要があります。連絡先とそのステータスのリスト、各連絡先のメッセージのリスト、チャット間の切り替え、アクティブなチャットの設定、メッセージのレンダリングなど...

独自のバッキングを作成してコミュニケーションレイヤーを自分で実装する場合、これらすべてを避けることもできません。

アプリケーションのビジネス機能に集中する方が良いのではありませんか？レイアウト、色の選択など、アレイ内のメッセージを見つける方法を「読み取り」に設定する方法を疑問に思う代わりに？

そのようなことは、見た目よりも複雑になることがよくあります。

たとえば、メッセージリストは必ずしもフラット配列ではありません。多くの場合、ユーザーと会話に割り当てられたメッセージを備えたオブジェクトであり、さらに、着信と発信メッセージのブロックにグループ化されます。

リストにメッセージを追加するには、ほぼ次の手順が必要です。

特定の会話のメッセージリストを見つけ、
最後のグループを見つける、
これがユーザーのグループであるかどうかを確認します。メッセージはからです。
そうでない場合は、グループを作成してメッセージを追加します
グループをリストに追加します

うーん、少しありますよね？

そのようなことは、シンプルで直感的な方法で使用できる別々のロジックライブラリで閉鎖する必要があります。一貫したインターフェイスの実装は、ライブラリの使用方法を変更せずに内部チューニング（たとえば、データ構造の変更）の可能性も提供します。

特徴

ユーザーの状態を処理する（名前、アバター、プレゼンスなどのユーザービジネスプロパティを使用）
会話の扱い状態（現在の会話を含む）
グループ化されたメッセージの処理は、多くの会話について述べています
倒されたタイピングインジケーターの送信
自動スロットリングは、タイピングインジケーターを受け取りました
現在のメッセージ入力値を処理します
メッセージドラフトの処理
存在するメッセージの更新
通信サービスのサポート

インストール

糸を使用します。

yarn add @chatscope/use-chat

NPMを使用します。

npm install @chatscope/use-chat

建築

ライブラリは3つの部分で構成されています。

保管 - 状態が保管されている場所
ChatProvider-チャットコンテキストプロバイダー
USECHAT-ストレージサービスとUIにバインドするフック

BasicStorage

これは、ISTorageインターフェイスを実装するクラスです。会話、メッセージ、現在の会話インジケーターなどのすべてのデータは、ストレージにあります。 BasicStorageは、ISTorageの基本的な実装です。それは完全に機能し、ほとんどのアプリケーションに使用できます。ただし、Reduxまたは別の州立図書館に基づいて、新しい実装を記述することができます。そのため、ストレージは外部からChatProviderに提供されます。

Examplechatservice

これは、Ichatserviceインターフェイスを実装するクラスです。このサービスの目的は、チャットサーバーとの接続を維持し、メッセージを送信および受信し、チャットプロトコルコマンドを受信することです。これは、チャットサーバーをライブラリに接続するポイントです。このライブラリを使用するには、Ichatserviceインターフェイスを実装する独自のChatServiceを作成する必要があります。サービスの実装は、使用しているチャットサーバーによって異なります。サービスのコンテンツはゼロから書かれたコードにすることができますが、サービスはチャット通信ライブラリを使用する準備ができているためのカプセル化レイヤーでもあります。
src/examples/examplechatservice.tsがあります。これは、アプリケーション用の実際のサービスを開発するための良い出発点です。

将来的には、socket.ioベースのチャットサーバーとの実際の通信を示すより多くの例を提供します。

一部のSAASプロバイダーのサービス実装も利用できます。

サービスファクトリー

これは、自分自身を実装するために必要な単純な機能です。この関数は、最初の引数としてチャットストレージオブジェクト（ICHATSTORAGE）を受信し、2番目の引数として機能します。この関数は、Ichatserviceを実装するクラスのインスタンスを返す必要があります。 ChatServiceの実装では、ストレージから値を取得し、ストレージに保存する必要がある場合があります。ここでは、ストレージをサービスに渡すことができます。ストレージ状態へのアクセスは、Storage.getState（）メソッドによって提供されます。ストレージへの書き込みは、Storage.AddConversation（）、Storage.Adduser（）などの関数を呼び出すことによって実現されます。2番目の引数はUpdatestate関数です。サービスから実行されたストレージへの各書き込みは、再レンダーを実行するためにupdatestate関数を呼び出す必要があります。たとえば、一部のユーザーが接続している信号化を受信した場合、Storage.Adduser（）メソッドを使用してStorageにユーザーを追加できます。

この説明はおそらく複雑に見えます:)。しかし、信じてください、私はあなたがすべての世話をしなければならないときと比べて本当に簡単です。

基本的な使用法

これは非常に簡単な例ですが、 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 > ) ;
}