use chat
v3.1.2
!!! Bitte verwenden Sie keine Version 1.5.0 Es hat falsche Immobiliennamen !!!
React Hook für die staatliche Verwaltung in Chat -Anwendungen.
Eine vollständige Dokumentation ist noch nicht verfügbar, wird aber vorbereitet .
Wenn Sie an dieser Bibliothek interessiert sind und weitere Unterlagen benötigen, teilen Sie mir bitte eine der positiven Reaktionen (+1, Herz, Rakete) in der speziellen Ausgabe mit: #1 hinzu: #1
Dies ist eine kopflose Chat -Bibliothek. Betrachten Sie es als so etwas wie ein Formik, aber für Chat -Apps.
Die Bibliothek kann sowohl mit @chatscope/chat-ui-kit-reagiert als auch mit anderen Chat-Komponenten verwendet werden.
Das Ziel ist es, ein Tool für die Handhabung von Funktionen bereitzustellen, die in Chat -Anwendungen am häufigsten implementiert werden.
In erster Linie handelt es sich um ein Anwendungsstaatmanagement sowie einige nette Addons wie Entlüftung oder Drosselung des Sendens oder Empfangens der Tippindikatorsignalisierung.
Die Logik der Chat -Anwendungen ist häufig wiederholt. Die meisten dieser Anwendungen enthalten eine Benutzerliste, eine Konferenzliste und natürlich Nachrichten. Es gibt mindestens ein paar Chat -API -Anbieter auf dem Markt. Sie bieten SaaS -Dienste an, mit denen Sie eine Chat -Anwendung erstellen können. Sie erhalten auch fast immer eine benutzerfreundliche, einfache Messaging-Bibliothek von ihnen. Eine solche Bibliothek fasst ein komplexes Kommunikationsprotokoll zusammen.
Manchmal erhalten Sie auch UI -Komponenten und Haken/Anbieter, die die Benutzeroberfläche an die Messaging -Bibliothek des Anbieters binden. Beide sind eng miteinander verbunden, wodurch das Ersetzen der Messaging -Bibliothek oder der UI -Komponenten viel Arbeit ersetzt wird.
In diesem Fall müssen Sie sich darum kümmern, wie Sie in Ihrer App aufbewahren: eine Liste von Kontakten und ihren Status, eine Liste von Nachrichten für jeden Kontakt, Wechsel zwischen Chats, Einstellen eines aktiven Chats, Rendern von Nachrichten usw.
Wenn Sie Ihre eigene gesichertes Erstellen erstellen und die Kommunikationsebene selbst implementieren, werden Sie auch nicht all diese Dinge vermeiden.
Ist es nicht besser, sich auf die Geschäftsfunktionalität der Anwendung zu konzentrieren? Auf dem Layout, der Farbauswahl usw., anstatt sich zu fragen, wie man eine Nachricht im Array finde, um seinen Status auf "Lesen" festzulegen?
Solche Dinge erweisen sich oft als komplizierter als sie scheinen.
Beispielsweise ist eine Nachrichtenliste nicht immer ein flaches Array. Es handelt sich häufig um ein Objekt mit Nachrichten, die Benutzern und Gesprächen zugewiesen sind, und es wird außerdem in Blöcke eingehender und ausgehender Nachrichten zusammengefasst.
Das Hinzufügen einer Nachricht in die Liste erfordert ungefähr die folgenden Schritte:
Uff, es gibt ein bisschen davon, oder?
Solche Dinge sollten in separaten Logikbibliotheken geschlossen werden, die auf einfache und intuitive Weise verwendet werden können. Die Implementierung einer konsistenten Schnittstelle bietet auch die Möglichkeit einer internen Abstimmung (z. B. Änderung der Datenstruktur), ohne die Art und Weise zu ändern, wie die Bibliothek verwendet wird.
Mit Garn.
yarn add @chatscope/use-chatVerwenden von NPM.
npm install @chatscope/use-chatDie Bibliothek besteht aus drei Teilen:
Dies ist eine Klasse, die die iStorage -Schnittstelle implementiert. Alle Daten wie Konversationen, Nachrichten, aktuelle Konversationsanzeigen usw. befinden sich im Speicher. BasicStorage ist die grundlegende Implementierung des ISTORAGE. Es sollte voll funktionsfähig sein und für die meisten Anwendungen verwendet werden. Es ist jedoch möglich, neue Implementierungen zu schreiben, die auf der Redux oder einer anderen Staatsbibliothek basieren. Aus diesem Grund wird der Speicher von außen an ChatProvider zur Verfügung gestellt.
Dies ist eine Klasse, die die IchsService -Schnittstelle implementiert. Der Zweck dieses Dienstes besteht darin, eine Verbindung mit dem Chat -Server zu verwalten, Nachrichten zu senden und zu empfangen und Chat -Protokollbefehle zu empfangen. Dies ist ein Punkt, der Ihren Chat -Server mit der Bibliothek verbindet. Um diese Bibliothek zu verwenden, müssen Sie Ihren eigenen Chatservice schreiben, der die IchatService -Schnittstelle implementiert. Die Implementierung des Dienstes hängt davon ab, welchen Chat -Server Sie verwenden. Der Inhalt des Dienstes kann Ihr Code von Grund auf neu geschrieben sein. Der Dienst kann jedoch auch eine Verkapselungsebene für jede Verwendung von Chat -Kommunikationsbibliothek sein
Es gibt SRC/Beispiele/ExamPeChatService.Ts für einen kurzen Start. Dies ist ein guter Ausgangspunkt für die Entwicklung des eigentlichen Dienstes für Ihre Bewerbung.
In Zukunft werde ich weitere Beispiele angeben, die eine echte Kommunikation mit Socket.io -basierten Chat -Server zeigen.
Service -Implementierungen für einige SaaS -Anbieter sind ebenfalls verfügbar.
Es ist eine einfache Funktion, die Sie benötigen, um sich selbst zu implementieren. Diese Funktion empfängt ein Chat -Speicherobjekt (iChatStorage) als erste Argument- und Aktualisierungsfunktion als zweites. Diese Funktion muss eine Instanz der Klasse zurückgeben, in der IchatService implementiert wird. Manchmal müssen Sie in Ihrer ChatService -Implementierung Werte aus dem Speicher abrufen und sie im Speicher speichern. Hier können Sie den Speicher an Ihren Service übergeben. Der Zugriff auf den Speicherzustand wird von Storage.getState () Methode bereitgestellt. Das Schreiben in den Speicher wird durch Aufrufen von Funktionen wie Storage.addConversation (), Storage.adduser () usw. Realisiert. Das zweite Argument ist die Aktualisierungsfunktion . Jedes Schreiben in den vom Dienst ausgeführten Speicher muss die UpdateState-Funktion aufrufen, um eine erneute Rendere auszuführen. Wenn der Dienst beispielsweise eine Signalisierung erhält, die ein Benutzer angeschlossen hat, können Sie den Benutzer zum Speicher hinzufügen.
Diese Beschreibung sieht wahrscheinlich kompliziert aus :). Aber glauben Sie, ich ist wirklich einfach, wenn man sich um alles kümmern muss.
Dies ist ein sehr einfaches Beispiel, aber es zeigt, wie einfach es ist, einen Chat mit Usechat Hook zu implementieren.
Für ein komplexeres Beispiel basierend auf CRA finden Sie unter https://github.com/chatscope/use-chat-example. ARBEITSBEISE APP ist hier verfügbar: https://use-chat.examples.chatscope.io
Datei: 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 >
) ;
} ;Datei 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
