use chat
v3.1.2
!!! Veuillez ne pas utiliser la version 1.5.0 Il a de mauvais noms de propriétés !!!
React Hook pour la gestion de l'État dans les applications de chat.
La documentation complète n'est pas encore disponible, mais sera préparée .
Si vous êtes intéressé par cette bibliothèque et que vous avez besoin de plus de documentation, veuillez me le faire savoir en ajoutant l'une des réactions positives (+1, Heart, Rocket) dans le problème dédié ici: # 1
Ceci est une bibliothèque de chat sans tête. Considérez-le comme quelque chose comme un Formik mais pour les applications de chat.
La bibliothèque peut être utilisée à la fois avec @ chatScope / Chat-ui-kit-react ainsi qu'avec d'autres composants de chat.
L'objectif est de fournir un outil pour gérer les fonctionnalités qui sont le plus souvent implémentées dans les applications de chat.
Il s'agit principalement d'une gestion de l'état d'application ainsi que de beaux addons tels que le débouchement ou la limitation de l'envoi ou de la réception de la signalisation de l'indicateur de frappe.
La logique des applications de chat est souvent répétitive. La plupart de ces applications contient une liste d'utilisateurs, une liste de conférences et bien sûr des messages. Il y a au moins quelques fournisseurs d'API de chat sur le marché. Ils fournissent des services SaaS que vous pouvez utiliser pour créer une application de chat. Vous obtenez également presque toujours une bibliothèque de messagerie simple et prêt à l'emploi. Une telle bibliothèque résume un protocole de communication complexe.
Parfois, vous obtenez également des composants d'interface utilisateur et des crochets / fournisseurs qui lient l'interface utilisateur à la bibliothèque de messagerie du fournisseur. Les deux sont étroitement liés, ce qui rend beaucoup de travail de la bibliothèque de messagerie ou des composants d'interface utilisateur.
Dans ce cas, vous devez vous occuper de la façon de garder dans votre application: une liste de contacts et leurs statuts, une liste de messages pour chaque contact, de basculer entre les chats, de définir un chat actif, de rendre des messages, etc. ...
Si vous créez votre propre soutenu et implémentez la couche de communication vous-même, vous n'éviterez pas non plus de faire toutes ces choses.
N'est-il pas préférable de se concentrer sur les fonctionnalités commerciales de l'application? Sur la disposition, la sélection des couleurs, etc., au lieu de se demander comment trouver un message dans le tableau pour définir son état pour "lire"?
De telles choses s'avèrent souvent plus compliquées à faire qu'elles ne semblent.
Par exemple, une liste de messages n'est pas toujours un tableau plat. Ce sera souvent un objet avec des messages affectés aux utilisateurs et aux conversations, et en outre, il sera regroupé en blocs de messages entrants et sortants.
L'ajout d'un message à la liste nécessite à peu près les étapes suivantes:
Uff, il y en a un peu, non?
De telles choses doivent être fermées dans des bibliothèques logiques distinctes, qui peuvent être utilisées de manière simple et intuitive. La mise en œuvre d'une interface cohérente offre également la possibilité d'un réglage interne (par exemple, modifiant la structure des données) sans modifier la façon dont la bibliothèque est utilisée.
Utilisation du fil.
yarn add @chatscope/use-chatUtilisation de NPM.
npm install @chatscope/use-chatLa bibliothèque se compose de trois parties:
Il s'agit d'une classe qui implémente l'interface Istorage. Toutes les données telles que les conversations, les messages, l'indicateur de conversation actuel, etc. se trouvent dans le stockage. BasicStorage est la mise en œuvre de base de l'Istorage. Il doit être entièrement fonctionnel et peut être utilisé pour la plupart des applications. Cependant, il est possible d'écrire de nouvelles implémentations, par exemple sur la base de Redux ou d'une autre bibliothèque d'État. C'est pourquoi le stockage est fourni à ChatProvider de l'extérieur.
Il s'agit d'une classe qui implémente l'interface ICHATSERVICE. Le but de ce service est de maintenir une connexion avec le serveur de chat, d'envoyer et de recevoir des messages et des commandes de protocole de chat. C'est un point qui connecte votre serveur de chat à la bibliothèque. Pour utiliser cette bibliothèque, vous devez rédiger votre propre service de chat qui implémente l'interface iChatService. L'implémentation du service dépend du serveur de chat que vous utilisez. Le contenu du service peut être votre code écrit à partir de zéro, mais le service peut également être une couche d'encapsulation pour toute bibliothèque de communication de chat prête à utiliser
Il existe SRC / Exemples / ExampleChatsService.ts disponibles pour un démarrage rapide. C'est un bon point de départ pour développer le véritable service de votre application.
À l'avenir, je fournirai plus d'exemples montrant une véritable communication avec le serveur de chat basé sur socket.io.
Les implémentations de services pour certains fournisseurs de SaaS seront également disponibles.
C'est une fonction simple que vous devez vous implémenter. Cette fonction reçoit un objet de stockage de chat (iChatStorage) comme le premier argument et la fonction de mise à jour comme seconde. Cette fonction doit renvoyer une instance de la classe implémentant iChatService. Parfois, dans votre implémentation ChatService, vous devrez obtenir des valeurs du stockage et les enregistrer dans le stockage. Ici, vous pouvez transmettre le stockage à votre service. L'accès à l'état de stockage est fourni par la méthode Storage.getState (). L'écriture dans le stockage est réalisée en appelant des fonctions telles que Storage.AddConversation (), Storage.AdDuser () etc. Le deuxième argument est la fonction UpdateState . Chaque écriture dans le stockage effectué à partir du service doit appeler la fonction UpdateState pour effectuer Re-Render. Par exemple, lorsque le service reçoit la signalisation qu'un utilisateur s'est connecté, vous pouvez ajouter l'utilisateur à un stockage à l'aide de la méthode Storage.AdDuser () et de l'appel suivant UpdateState ().
Cette description semble probablement compliquée :). Mais croyez, moi, c'est vraiment simple par rapport à quand vous devez prendre soin de tout.
C'est un exemple très simple, mais cela montre à quel point il est facile d'implémenter un chat à l'aide de Hook Usechat .
Pour un exemple plus complexe basé sur l'ARC, veuillez visiter https://github.com/chatscope/use-chat-example. L'application d'exemple de travail est disponible ici: https://use-chat.examples.chatscope.io
Fichier: 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 >
) ;
} ;Fichier 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
