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
麻省理工学院
