ng chat
3.1.0
Ein einfaches Facebook/LinkedIn -Lookalike -Chat -Modul für Winkelanwendungen.
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();
}
Erforderliche Einstellungen
Zusätzliche Einstellungen
IChatController umgeschaltet werden. Standard ist falsch.FileMessage für den destinatären Benutzer zurückgegeben wird.Lokalisierung
Ereignisse
Um dieses Modul zum Senden und Empfangen von Nachrichten in Ihrer Software zu unterweisen, müssen Sie Ihren eigenen Chatadapter implementieren. Die Klasse, die Sie implementieren werden, ist diejenige, die Sie als Instanz für die oben diskutierte Modul [Adapter] bereitstellen müssen.
Dieses Paket enthält eine abstrakte Chatadapter -Klasse, die Sie in Ihrer neuen Klassendateidefinition importieren können:
import { ChatAdapter } from 'ng-chat';
Nach dem Importieren in Ihre benutzerdefinierte Adapterimplementierung (z. B.: myAdapter.ts) müssen Sie mindestens 3 Methoden implementieren, die in der Chatadapter -Basisklasse abstrakt sind, die sind:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Diese Methoden werden über die Client -Integration durchgeführt. Neben der Client -Integration und den Aktionen müssen Sie auch den Adapter anweisen, wie Push -Benachrichtigungen vom Server mit den folgenden Methoden empfangen werden:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Bitte beachten Sie, dass die 2 oben genannten Methoden nicht überschreiben müssen. Sie müssen sie in Ihrer Adapter -Implementierung anrufen, um das Modul zu benachrichtigen, dass eine Nachricht empfangen wurde oder dass die Liste der Freunde aktualisiert wurde. Der zweite könnte ignoriert werden, wenn Sie sich für die Funktion "POMLFARFARTSLIST" beschließen.
Im Zweifelsfall finden Sie hier 2 Adapter -Beispielimplementierungen:
Ein IChatParticipant kann ein Benutzer oder eine Gruppe sein, aber um einen Gruppenchat zu aktivieren, müssen Sie eine Instanz von IChatGroupAdapter implementieren und an NG-CHAT liefern. Sie müssen den folgenden Vertrag umsetzen:
groupCreated(group: Group): void;
NG-CHAT generiert jedes Mal, wenn eine neue Gruppe erstellt wird, eine GUID und ruft die oben genannte Methode auf, sodass Sie diese in Ihrer Anwendung behandeln können, um die neu generierte Gruppe (ID, Teilnehmer usw.) zu bestehen.
Sobald Sie eine Implementierung von IChatGroupAdapter haben, liefern Sie sie einfach an Ihre NG-CHAT-Instanz:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-CHAT unterstützt die Anhänge jeglicher Art von Dateien. Dazu müssen Sie einen API -Endpunkt für Ihre Anwendung implementieren, der einen Beitrag mit einer Formulardatei erhalten kann.
Stellen Sie auf Ihrer NG-CHAT-Instanz sicher, dass Sie einen gültigen URI für den Parameter fileUploadUrl angeben. Dadurch aktiviert das Upload -Adapter des Standarddatei -Uploads und jedes Chat -Fenster rendert unten rechts eine Anhangsaktion, die eine Eingabe von Type = Datei auslöst.
Zusammen mit einer Anforderungsformulardatei sendet NG-CHAT auch ein Feld mit dem Namen ng-chat-destinatary-userid das die ID des Benutzer enthält, in die die Datei gesendet wird. Stellen Sie sicher, dass Sie diesen Wert verwenden, um eine Antwortnachricht zu verfassen, da Ihr API -Endpunkt eine FileMessage zurückgeben muss. Diese FileMessage Instanz wird automatisch von NG-CHAT an den destinatären Benutzer gesendet, sobald das Upload des Datei erfolgreich endet.
Sie können hier einige Backend -Datei -Upload -Beispiele für Implementierungen überprüfen:
Bestimmte NG-CHAT-Aktionen können aus Ihrer Anwendung mithilfe der exportierten IchatController-Schnittstelle ausgelöst werden.
Angenommen, Sie haben eine NG-CHAT-Instanz, die in Ihrer Vorlagendatei deklariert ist, fügen Sie ihm eine eindeutige Kennung hinzu:
<ng-chat #ngChatInstance ... />
Deklarieren Sie dann auf dem Code Ihrer Komponente eine ViewChild Eigenschaft, um Ihre NG-CHAT-Instanz zu binden:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Sie können jetzt einige NG-CHAT-Aktionen auslösen, z. B. das Öffnen eines Chat-Fensters von an anderer Stelle mit dem folgenden Code:
this.ngChatInstance.triggerOpenChatWindow(user);
Dieser Adapter ähnelt ChatAdapter , bietet jedoch eine Paginationstaste, um ältere Nachrichten aus Ihrem Nachrichtenverlauf zu laden. Sie müssen eine zusätzliche Methode implementieren: getMessageHistoryByPage . Sie können eine Beispielimplementierung für dies unter dem Demo -Projekt mit der DemoAdapterPagedHistory -Klasse überprüfen.
Wenn Sie diese Funktion mögen und der Meinung sind, dass dies das Standardverhalten und die Implementierung für NG-CHAT sein sollten, öffnen Sie bitte ein Problem und stimmen Sie hier ab, damit wir sie möglicherweise als Standard-Chat-Adapter für nachfolgende Versionen von NG-CHAT vorstellen können.
Wenn Sie in einer Chat -Fenstermeldung ein Bildvorhandhumme anzeigen möchten, legen Sie den Nachrichtentyp auf Image fest. Der Inhalt der Nachricht sollte auf eine gültige Bild -URL verweisen:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Bitte befolgen Sie diese Richtlinie, wenn Sie Fehler und Funktionsanfragen melden:
Danke fürs Verständnis!
Die MIT -Lizenz (siehe Lizenzdatei für den Volltext)
