ng chat
3.1.0
Un simple module de chat Facebook / LinkedIn pour les applications angulaires.
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();
}
Paramètres requis
Paramètres supplémentaires
IChatController . La valeur par défaut est fausse.FileMessage pour l'utilisateur destinataire.Localisation
Événements
Afin d'instruire ce module sur la façon d'envoyer et de recevoir des messages dans votre logiciel, vous devrez implémenter votre propre chatadapter. La classe que vous implémenterez est celle que vous devez fournir comme instance au paramètre [adaptateur] du module discuté ci-dessus.
Ce package expose une classe abstraite de chatadapter que vous pouvez importer sur votre nouvelle définition de fichier de classe:
import { ChatAdapter } from 'ng-chat';
Après l'avoir implémenté dans votre implémentation d'adaptateur personnalisé (par exemple: MyAdapter.ts), vous devez implémenter au moins 3 méthodes qui sont abstraites dans la classe de base de ChatAdapter qui sont:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Ces méthodes seront effectuées via l'intégration du client. Outre l'intégration et les actions du client, vous devez également instruire l'adaptateur sur la façon de recevoir des notifications push du serveur en utilisant les méthodes suivantes:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Veuillez noter qu'il n'est pas nécessaire de remplacer les 2 méthodes ci-dessus. Vous devez les appeler dans votre implémentation d'adaptateur juste pour informer le module qu'un message a été reçu ou que la liste des amis a été mise à jour. Le second pourrait être ignoré si vous décidez d'utiliser la fonctionnalité "PollfriendsList".
En cas de doute, voici 2 implémentations d'exemples d'adaptateur:
Un IChatParticipant peut être un utilisateur ou un groupe, mais afin d'activer le chat de groupe, vous devez implémenter et fournir à NG-chat une instance d' IChatGroupAdapter . Vous devrez mettre en œuvre le contrat suivant:
groupCreated(group: Group): void;
Ng-chat génère un GUID chaque fois qu'un nouveau groupe est créé et invoque la méthode ci-dessus afin que vous puissiez le gérer sur votre application pour persister le groupe nouvellement généré (ID, participants, etc.).
Une fois que vous avez une implémentation d' IChatGroupAdapter , fournissez-le simplement à votre instance NG-Chat:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
Ng-chat prend en charge la pièce jointe de tout type de fichiers. Pour ce faire, vous devez implémenter un point de terminaison de l'API sur votre application qui peut recevoir un message avec un fichier de formulaire.
Sur votre instance NG-Chat, assurez-vous de fournir un URI valide pour le paramètre fileUploadUrl . Cela permettra l'adaptateur de téléchargement de fichiers par défaut et chaque fenêtre de chat rendra en bas à droite une action de pièce jointe qui déclenchera une entrée de type = fichier.
Avec un fichier de formulaire de demande, Ng-chat enverra également un champ nommé ng-chat-destinatary-userid contenant l'ID de l'utilisateur dans lequel le fichier sera envoyé. Assurez-vous d'utiliser cette valeur pour composer un message de réponse car votre point de terminaison de l'API devra renvoyer un FileMessage . Cette instance FileMessage sera envoyée automatiquement à l'utilisateur désinatrice par NG-Chat dès que le téléchargement de fichiers se termine avec succès.
Vous pouvez vérifier ici des exemples d'implémentation de téléchargement de fichiers backend:
Certaines actions NG-Chat peuvent être déclenchées à partir de votre application en utilisant l'interface IChatController exportée.
En supposant que vous avez une instance NG-chat déclarée sur votre fichier de modèle, ajoutez un identifiant unique angulaire:
<ng-chat #ngChatInstance ... />
Ensuite, sur le code de votre composant, déclarez une propriété ViewChild afin de lier votre instance NG-Chat:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Vous pouvez désormais déclencher certaines actions NG-Chat telles que l'ouverture d'une fenêtre de chat à partir d'ailleurs en utilisant le code suivant:
this.ngChatInstance.triggerOpenChatWindow(user);
Cet adaptateur est similaire à ChatAdapter mais fournit un bouton de pagination pour charger des messages plus anciens de l'historique de votre message. Vous devez implémenter une méthode supplémentaire: getMessageHistoryByPage . Vous pouvez consulter un exemple de mise en œuvre pour cela dans le projet de démonstration avec la classe DemoAdapterPagedHistory .
Si vous aimez cette fonctionnalité et croyez que ce devrait être le comportement et l'implémentation par défaut pour NG-chat, veuillez ouvrir un problème et voter ici afin que nous puissions potentiellement l'introduire comme l'adaptateur de chat par défaut sur les versions suivantes de NG-Chat.
Si vous souhaitez afficher une miniature d'image sur un message de fenêtre de chat, il suffit de définir le type de message sur Image . Le contenu du message doit indiquer une URL d'image valide:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Veuillez suivre cette directive lors de la déclaration de bogues et de demandes de fonctionnalités:
Merci de votre compréhension!
La licence MIT (voir le fichier de licence pour le texte intégral)
