ng chat
3.1.0
Um módulo de bate -papo parecido simples do Facebook/LinkedIn para aplicações angulares.
npm install ng-chat
...
import { NgChatModule } from 'ng-chat';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgChatModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<ng-chat [adapter]="adapter" [userId]="userId"></ng-chat>
import { Component } from '@angular/core';
import { ChatAdapter } from 'ng-chat';
import { MyAdapter } from 'my-adapter';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
userId = 999;
public adapter: ChatAdapter = new MyAdapter();
}
Configurações necessárias
Configurações adicionais
IChatController . O padrão é falso.FileMessage para o usuário Destinatary.Localização
Eventos
Para instruir este módulo sobre como enviar e receber mensagens em seu software, você precisará implementar seu próprio chatadapter. A classe que você implementará é a que você deve fornecer como uma instância à configuração [adaptadora] do módulo discutido acima.
Este pacote expõe uma classe abstrata Chatadapter que você pode importar na sua nova definição de arquivo de classe:
import { ChatAdapter } from 'ng-chat';
Depois de importá -lo para a sua implementação personalizada do adaptador (por exemplo: MyAdapter.ts), você deve implementar pelo menos três métodos abstratos na classe Base Chatadapter que são:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Esses métodos serão realizados através da integração do cliente. Além da integração e das ações do cliente, você também deve instruir o adaptador sobre como receber notificações push do servidor usando os seguintes métodos:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Observe que não há necessidade de substituir os 2 métodos acima. Você deve ligar para eles na implementação do adaptador apenas para notificar o módulo de que uma mensagem foi recebida ou que a lista de amigos foi atualizada. O segundo pode ser ignorado se você decidir usar o recurso "Pollfriendslist".
Em caso de dúvida, aqui estão 2 implementações de exemplo adaptador:
Um IChatParticipant pode ser um usuário ou um grupo, mas, para ativar o bate-papo em grupo, você deve implementar e fornecer para NG-Chat uma instância de IChatGroupAdapter . Você terá que implementar o seguinte contrato:
groupCreated(group: Group): void;
O NG-Chat gera um GUID toda vez que um novo grupo é criado e chama o método acima para que você possa lidar com isso no seu aplicativo para persistir o grupo recém-gerado (ID, participantes, etc.).
Depois de ter uma implementação do IChatGroupAdapter , basta fornecê-lo à sua instância NG-CHAT:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-CHAT suporta anexo de qualquer tipo de arquivos. Para isso, você precisa implementar um terminal de API em seu aplicativo que possa receber uma postagem com um arquivo de formulário.
Na sua instância NG-CHAT, certifique-se de fornecer um URI válido para o parâmetro fileUploadUrl . Isso permitirá o adaptador de upload de arquivo padrão e cada janela de bate -papo renderizará no canto inferior direito uma ação de anexo que acionará uma entrada do tipo = arquivo.
Juntamente com um arquivo de formulário de solicitação, ng-chat também enviará um campo nomeado como ng-chat-destinatary-userid contendo o ID do usuário no qual o arquivo será enviado. Certifique -se de usar esse valor para compor uma mensagem de resposta, pois seu endpoint da API precisará devolver uma FileMessage . Esta instância FileMessage será enviada ao usuário destinatário automaticamente pelo NG-Chat assim que o upload do arquivo terminar com sucesso.
Você pode verificar alguns exemplos de implementação de upload de arquivo de back -end aqui:
Certas ações de bate-papo NG podem ser acionadas pelo seu aplicativo usando a interface IchatController exportada.
Supondo que você tenha uma instância de NG-CHAT declarada no seu arquivo de modelo, adicione um identificador angular exclusivo:
<ng-chat #ngChatInstance ... />
Em seguida, no código do seu componente, declare uma propriedade ViewChild para vincular sua instância NG-Chat:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Agora você pode desencadear algumas ações de bate-papo NG, como abrir uma janela de bate-papo de outros lugares usando o seguinte código:
this.ngChatInstance.triggerOpenChatWindow(user);
Este adaptador é semelhante ao ChatAdapter , mas fornece um botão de paginação para carregar mensagens mais antigas do histórico de mensagens. Você precisa implementar um método adicional: getMessageHistoryByPage . Você pode verificar uma implementação de amostra para isso no projeto de demonstração com a classe DemoAdapterPagedHistory .
Se você gosta desse recurso e acredita que deve ser o comportamento e a implementação padrão do NG-CHAT, abra um problema e vote aqui para que possamos atualizá-lo como o adaptador de bate-papo padrão nas versões subsequentes do NG-Chat.
Se você quiser exibir uma miniatura de imagem em uma mensagem de janela de bate -papo, basta definir o tipo de mensagem como Image . O conteúdo da mensagem deve apontar para um URL de imagem válido:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Siga esta diretriz ao relatar bugs e solicitações de recursos:
Obrigado pela compreensão!
A licença do MIT (consulte o arquivo de licença para o texto completo)
