use chat
v3.1.2
!!!!請不要使用1.5.0版的屬性名稱！ ！ ！
在聊天應用程序中為國家管理的hook鉤。
完整的文檔尚不可用，但會做好準備。
如果您對此庫感興趣並且需要更多文檔，請在此處的專用問題中添加一個積極的反應（+1，心臟，火箭），讓我知道：＃1
這是一個無頭聊天庫。可以將其視為formik，但對於聊天應用程序。
庫可以與 @chatscope/chat-ui-kit-react以及其他聊天組件一起使用。
它的目的是為聊天應用程序中最常實現的處理功能提供工具。
它主要是應用程序狀態管理以及一些不錯的附加組件，例如發送或接收打字指示燈信號傳導。
聊天應用程序的邏輯通常是重複的。這些應用程序中的大多數包含一個用戶列表，會議列表，當然還有消息。市場上至少有一些聊天API提供商。他們提供SaaS服務，您可以使用這些服務來構建聊天應用程序。您幾乎總是會從中獲得一個現成的簡單消息庫。這樣的庫封裝了複雜的通信協議。
有時，您還會獲得將UI綁定到提供商的消息傳遞庫的UI組件和掛鉤/提供商。兩者都是密切相關的，這使得替換消息庫或UI組件很多工作。
在這種情況下，您必須照顧如何保留在應用中：聯繫人及其狀態列表，每個聯繫人的消息列表，在聊天之間切換，設置活動聊天，渲染消息等...
如果您自己創建自己的後備並自己實施通信層，也不會避免做所有這些事情。
專注於應用程序的業務功能不是更好嗎？在佈局，顏色選擇等上，而不是想知道如何在數組中找到消息以將其狀態設置為“讀取”？
這樣的事情通常比看起來更複雜。
例如，消息列表並非總是一個平坦的數組。它通常是一個對象，其中包含給用戶和對話分配的消息，此外，它將被分組為傳入和傳出消息的塊。
在列表中添加一條消息大致需要以下步驟：
uff，有一點，對嗎？
這些東西應在單獨的邏輯庫中關閉，可以簡單而直觀的方式使用。一致接口的實現還提供了內部調整（例如更改數據結構）的可能性，而無需更改庫的使用方式。
使用紗線。
yarn add @chatscope/use-chat使用NPM。
npm install @chatscope/use-chat圖書館由三個部分組成：
這是實現ISTorage接口的類。存儲中的所有數據（例如對話，消息，當前的對話指示器等）都位於存儲中。基本距離是ISTorage的基本實現。它應該具有完全功能性，可用於大多數應用程序。但是，可以根據REDUX或其他狀態庫編寫新實現。這就是為什麼向外部提供存儲給聊天者的原因。
這是實現Ichatservice接口的類。此服務的目的是維護與聊天服務器，發送和接收消息和聊天協議命令的連接。這是將您的聊天服務器與庫聯繫起來的點。要使用此庫，您需要編寫自己的ChatService來實現Ichatservice接口。服務的實現取決於您正在使用的聊天服務器。服務的內容可以是您從頭開始寫的代碼，但是該服務也可以是任何準備使用聊天通信庫的封裝層
有SRC/示例/exkplechatservice.ts可以快速啟動。這是為您的應用程序開發實際服務的好起點。
將來，我將提供更多示例，顯示基於socket.io的聊天服務器的真實通信。
一些SaaS提供商的服務實施也將提供。
這是一個簡單的功能，您需要實現自己。此功能接收聊天存儲對象（IchatStorage）作為第一個參數，並更新函數作為第二個參數。此功能必須返回實現Ichatservice的類實例。有時，在ChatService實現中，您需要從存儲空間中獲取值，並將其保存到存儲中。在這裡，您可以將存儲傳遞給您的服務。存儲狀態的訪問由Storage.getState（）方法提供。通過調用諸如storage.AddConversation（），storage.adduser（）等函數來實現存儲的寫入。第二個參數是UpdatateState函數。每個寫入服務執行的存儲都需要調用UpdateState函數以執行重新渲染。例如，當服務接收到某些用戶已連接的信號化時，您可以使用storege.adduser（）方法將用戶添加到存儲中，而下一個調用updatateState（）。
此描述看起來可能很複雜:)。但是相信，與您必須照顧一切相比，這真的很簡單。
這是非常簡單的示例，但是它顯示了使用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 >
) ;
} ;文件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 > ) ;
} https://chatscope.io
麻省理工學院
