use chat
v3.1.2
! ¡No use la versión 1.5.0, tiene nombres de propiedades incorrectos!
Reaccionar gancho para la gestión estatal en aplicaciones de chat.
La documentación completa aún no está disponible, pero estará preparada .
Si está interesado en esta biblioteca y necesita más documentación, avíseme agregando una de las reacciones positivas (+1, corazón, cohete) en el tema dedicado aquí: #1
Esta es una biblioteca de chat sin cabeza. Piense en ello como algo así como un formik pero para aplicaciones de chat.
La biblioteca se puede usar tanto con @chatscope/chat-ui-kit-react como con otros componentes de chat.
El objetivo es proporcionar una herramienta para manejar características que se implementan con mayor frecuencia en las aplicaciones de chat.
Principalmente es una administración de estado de aplicación, así como algunos complementos agradables, como el debilidad o la aceleración de enviar o recibir señalización del indicador de mecanografía.
La lógica de las aplicaciones de chat a menudo es repetitiva. La mayoría de estas aplicaciones contienen una lista de usuarios, una lista de conferencias y, por supuesto, mensajes. Hay al menos algunos proveedores de API de chat en el mercado. Proporcionan servicios SaaS que puede usar para crear una aplicación de chat. Casi siempre obtienes una biblioteca de mensajería simple lista para usar de ellos. Dicha biblioteca encapsula un complejo protocolo de comunicación.
A veces también obtienes componentes de interfaz de usuario y ganchos/proveedores que unen la interfaz de usuario a la biblioteca de mensajería del proveedor. Ambos están estrechamente relacionados, lo que hace que el reemplazo de la biblioteca de mensajería o los componentes de la interfaz de usuario sean mucho trabajo.
En este caso, debe ocuparse de cómo mantener en su aplicación: una lista de contactos y estados de sus suyos, una lista de mensajes para cada contacto, cambiar entre chats, configurar un chat activo, hacer mensajes, etc.
Si crea su propio respaldo e implementa la capa de comunicación usted mismo, tampoco evitará hacer todas estas cosas.
¿No es mejor centrarse en la funcionalidad comercial de la aplicación? En el diseño, selección de color, etc., en lugar de preguntarse cómo encontrar un mensaje en la matriz para establecer su estado en "leer".
Tales cosas a menudo resultan ser más complicadas de lo que parecen.
Por ejemplo, una lista de mensajes no siempre es una matriz plana. A menudo será un objeto con mensajes asignados a usuarios y conversaciones, y además, se agrupará en bloques de mensajes entrantes y salientes.
Agregar un mensaje a la lista requiere aproximadamente los siguientes pasos:
Uff, hay un poco de eso, ¿verdad?
Tales cosas deben cerrarse en bibliotecas lógicas separadas, que pueden usarse de manera simple e intuitiva. La implementación de una interfaz consistente también proporciona la posibilidad de un ajuste interno (por ejemplo, cambiar la estructura de datos) sin cambiar la forma en que se utiliza la biblioteca.
Usando hilo.
yarn add @chatscope/use-chatUsando NPM.
npm install @chatscope/use-chatLa biblioteca consiste en tres partes:
Esta es una clase que implementa la interfaz IStorage. Todos los datos, como conversaciones, mensajes, indicador de conversación actual, etc., se encuentran en el almacenamiento. BasicStorage es la implementación básica del IStorage. Debe ser completamente funcional y puede usarse para la mayoría de las aplicaciones. Sin embargo, es posible escribir nuevas implementaciones, por ejemplo, basadas en Redux u otra biblioteca estatal. Es por eso que el almacenamiento se proporciona a ChatProvider desde el exterior.
Esta es una clase que implementa la interfaz IChatservice. El propósito de este servicio es mantener una conexión con el servidor de chat, enviar y recibir mensajes y comandos de protocolo de chat. Este es un punto que conecta su servidor de chat con la biblioteca. Para usar esta biblioteca, debe escribir su propio servicio de chat que implementa la interfaz IChatservice. La implementación del servicio depende del servidor de chat que esté utilizando. El contenido del servicio puede ser su código escrito desde cero, pero el servicio también puede ser una capa de encapsulación para cualquier biblioteca de comunicación de chat listo para usar
Hay SRC/Ejemplos/ExpplechatService.ts disponibles para un inicio rápido. Este es un buen punto de partida para desarrollar el servicio real para su aplicación.
En el futuro, proporcionaré más ejemplos que muestren una comunicación real con el servidor de chat basado en Socket.io.
Las implementaciones de servicios para algunos proveedores de SaaS también estarán disponibles.
Es una función simple que necesita implementar usted mismo. Esta función recibe un objeto de almacenamiento de chat (iChatStorage) como el primer argumento y actualización de la función como el segundo. Esta función debe devolver una instancia de la clase que implementa iChatService. A veces, en su implementación de servicio de chat, deberá obtener valores del almacenamiento y guardarlos en el almacenamiento. Aquí puede pasar el almacenamiento a su servicio. El acceso al estado de almacenamiento es proporcionado por el método Storage.getState (). Escribir en el almacenamiento se realiza llamando a funciones como Storage.AddConversation (), Storage.adduser (), etc. El segundo argumento es la función UpdateState . Cada escritura en el almacenamiento realizado desde el servicio debe llamar a la función UpdateState para realizar Render Render. Por ejemplo, cuando el servicio recibe la señalización que algún usuario ha conectado, puede agregar el usuario al almacenamiento usando el método Storage.adduser () y la próxima llamada updateState ().
Esta descripción probablemente parece complicada :). Pero cree, es realmente simple en comparación con cuando tienes que ocuparte de todo.
Este es un ejemplo muy simple, pero muestra qué tan fácil es implementar un chat usando USECHAT Hook.
Para obtener un ejemplo más complejo basado en CRA, visite https://github.com/chatscope/use-chat-example. La aplicación de ejemplo de trabajo está disponible aquí: https://use-chat.examples.chatscope.io
Archivo: 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 >
) ;
} ;Archivo 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
MIT
