use chat
v3.1.2
!!! Por favor, não use a versão 1.5.0 Ele tem nomes de propriedades errados !!!
React Hook para gerenciamento de estado em aplicativos de bate -papo.
A documentação completa ainda não está disponível, mas será preparada .
Se você está interessado nesta biblioteca e precisa de mais documentação, entre em contato com uma das reações positivas (+1, coração, foguete) na questão dedicada aqui: #1
Esta é uma biblioteca de bate -papo sem cabeça. Pense nisso como algo como um Formik, mas para aplicativos de bate -papo.
A biblioteca pode ser usada com @chatscope/chat-ui-kit-react, bem como com outros componentes de bate-papo.
O objetivo é fornecer uma ferramenta para lidar com recursos que são mais frequentemente implementados em aplicativos de bate -papo.
Principalmente, é um gerenciamento de estado do aplicativo, bem como alguns complementos legais, como debounce ou redução do envio ou recebimento de sinalização de indicadores de digitação.
A lógica dos aplicativos de bate -papo geralmente é repetitiva. A maioria desses aplicativos contém uma lista de usuários, uma lista de conferências e, é um curso. Existem pelo menos alguns provedores de API de bate -papo no mercado. Eles fornecem serviços SaaS que você pode usar para criar um aplicativo de bate -papo. Você também quase sempre recebe uma biblioteca de mensagens simples e pronta para uso. Essa biblioteca encapsula um protocolo de comunicação complexo.
Às vezes, você também recebe componentes e ganchos/provedores da interface do usuário que ligam a interface do usuário à biblioteca de mensagens do provedor. Ambos estão intimamente relacionados, o que faz com que a substituição da biblioteca de mensagens ou dos componentes da interface do usuário muito trabalho.
Nesse caso, você deve cuidar de como manter em seu aplicativo: uma lista de contatos e status deles, uma lista de mensagens para cada contato, alternando entre bate -papos, definindo um bate -papo ativo, renderizando mensagens e assim por diante ...
Se você criar seu próprio e implementar a camada de comunicação, também não evitará fazer todas essas coisas.
Não é melhor se concentrar na funcionalidade comercial do aplicativo? No layout, a seleção de cores etc., em vez de se perguntar como encontrar uma mensagem na matriz para definir seu estado para "ler"?
Tais coisas geralmente são mais complicadas de fazer do que parecem.
Por exemplo, uma lista de mensagens nem sempre é uma matriz plana. Geralmente, será um objeto com mensagens atribuídas aos usuários e conversas e, além disso, será agrupado em blocos de mensagens de entrada e saída.
Adicionar uma mensagem à lista requer aproximadamente as seguintes etapas:
Uff, há um pouco disso, certo?
Tais coisas devem ser fechadas em bibliotecas lógicas separadas, que podem ser usadas de maneira simples e intuitiva. A implementação de uma interface consistente também fornece a possibilidade de ajuste interno (por exemplo, alterando a estrutura de dados) sem alterar a maneira como a biblioteca é usada.
Usando fios.
yarn add @chatscope/use-chatUsando NPM.
npm install @chatscope/use-chatA biblioteca consiste em três partes:
Esta é uma classe que implementa a interface do ISTORAGE. Todos os dados como conversas, mensagens, indicador de conversa atual etc. estão no armazenamento. O BasicStorage é a implementação básica do Istorage. Deve ser totalmente funcional e pode ser usado para a maioria dos aplicativos. No entanto, é possível escrever novas implementações, por exemplo, com base no Redux ou em outra biblioteca estadual. É por isso que o armazenamento é fornecido ao ChatProvider de fora.
Esta é uma classe que implementa a interface IchatService. O objetivo deste serviço é manter uma conexão com o servidor de bate -papo, enviar e receber mensagens e comandos de protocolo de bate -papo. Este é um ponto que conecta seu servidor de bate -papo à biblioteca. Para usar esta biblioteca, você precisa escrever seu próprio serviço de bate -papo que implementa a interface IchatService. A implementação do serviço depende de qual servidor de bate -papo você está usando. O conteúdo do serviço pode ser o seu código escrito do zero, mas o serviço também pode ser uma camada de encapsulamento para qualquer biblioteca de comunicação de bate -papo pronta para uso
Existem SRC/Exemplos/ExampleChatservice.ts disponíveis para um início rápido. Este é um bom ponto de partida para desenvolver o serviço real para o seu aplicativo.
No futuro, fornecerei mais exemplos mostrando a comunicação real com o servidor de bate -papo baseado no soquete.io.
As implementações de serviço para alguns provedores de SaaS também estarão disponíveis.
É uma função simples que você precisa para se implementar. Esta função recebe um objeto de armazenamento de bate -papo (IchatStorage) como o primeiro argumento e a função de atualização como a segunda. Esta função deve retornar uma instância da classe implementando o IchatService. Às vezes, na sua implementação de serviço de bate -papo, você precisará obter valores do armazenamento e salvá -los no armazenamento. Aqui você pode passar o armazenamento para o seu serviço. O acesso ao estado de armazenamento é fornecido pelo método storage.getState (). A gravação no armazenamento é realizada chamando funções como armazenamento.addConversation (), storage.adduser () etc. O segundo argumento é a função Updatestate . Cada gravação no armazenamento executado a partir do serviço precisa chamar a função Updatestate para executar novamente. Por exemplo, quando o serviço recebe sinalização que algum usuário conectou, você pode adicionar o usuário ao armazenamento usando o método Storage.adduser () e a próxima chamada UpdateState ().
Esta descrição provavelmente parece complicada :). Mas acredite, eu é realmente simples em comparação com quando você precisa cuidar de tudo.
Este é um exemplo muito simples, mas mostra como é fácil implementar um bate -papo usando o USechat Hook.
Para um exemplo mais complexo baseado no CRA, visite https://github.com/chatscope/use-chat-example. Exemplo de aplicativo de trabalho está disponível aqui: https://use-chat.examples.chatscope.io
Arquivo: 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 >
) ;
} ;File 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
