ng chat
3.1.0
Un simple módulo de chat de Facebook/LinkedIn Bealike para aplicaciones 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();
}
Configuración requerida
Configuración adicional
IChatController . El valor predeterminado es falso.FileMessage para el usuario destinatario.Localización
Eventos
Para instruir a este módulo sobre cómo enviar y recibir mensajes dentro de su software, deberá implementar su propio ChatAdapter. La clase que implementará es la que debe proporcionar como instancia a la configuración [adaptador] del módulo discutido anteriormente.
Este paquete expone una clase de resumen de ChatAdapter que puede importar en la definición de su nuevo archivo de clase:
import { ChatAdapter } from 'ng-chat';
Después de importarlo a la implementación de su adaptador personalizado (por ejemplo: MyAdapter.ts), debe implementar al menos 3 métodos que son abstractos en la clase base ChatAdapter que son:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Estos métodos se realizarán a través de la integración del cliente. Además de la integración y las acciones del cliente, también debe instruir al adaptador sobre cómo recibir notificaciones push del servidor utilizando los siguientes métodos:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Tenga en cuenta que no es necesario anular los 2 métodos anteriores. Debe llamarlos dentro de su implementación del adaptador solo para notificar al módulo que se recibió un mensaje o que la lista de amigos se actualizó. El segundo podría ignorarse si decide usar la función "Pollfriendslist".
En caso de duda, aquí hay 2 implementaciones de ejemplo de adaptador:
Un IChatParticipant puede ser un usuario o un grupo, pero para habilitar el chat del grupo debe implementar y suministrar a NG-chat una instancia de IChatGroupAdapter . Tendrá que implementar el siguiente contrato:
groupCreated(group: Group): void;
Ng-Chat genera un GUID cada vez que se crea un nuevo grupo e invoca el método anterior para que pueda manejarlo en su aplicación para persistir al grupo recién generado (ID, participantes, etc.).
Una vez que tenga una implementación de IChatGroupAdapter , simplemente suministre su instancia NG-Chat:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-CHAT admite el archivo adjunto de cualquier tipo de archivos. Para hacerlo, debe implementar un punto final API en su aplicación que pueda recibir una publicación con un archivo de formulario.
En su instancia NG-Chat, asegúrese de proporcionar un URI válido para el parámetro fileUploadUrl . Esto habilitará el adaptador de carga de archivo predeterminado y cada ventana de chat hará en la parte inferior derecha una acción de archivo adjunto que activará una entrada de type = archivo.
Junto con un archivo de formulario de solicitud, Ng-chat también enviará un campo llamado como ng-chat-destinatary-userid que contiene la ID del usuario en el que se enviará el archivo. Asegúrese de usar este valor para componer un mensaje de respuesta, ya que su punto final API tendrá que devolver un FileMessage . Esta instancia FileMessage se enviará al usuario destinatario automáticamente por Ng-Chat tan pronto como la carga del archivo termine con éxito.
Puede consultar algunos ejemplos de implementación de carga de archivo de backend aquí:
Ciertas acciones NG-Chat se pueden activar desde su aplicación utilizando la interfaz IChatController exportada.
Suponiendo que tenga una instancia NG-Chat declarada en su archivo de plantilla, agregue un identificador único angular:
<ng-chat #ngChatInstance ... />
Luego, en el código de su componente, declare una propiedad ViewChild para vincular su instancia de NG-Chat:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Ahora puede activar algunas acciones NG-chat, como abrir una ventana de chat desde otro lugar utilizando el siguiente código:
this.ngChatInstance.triggerOpenChatWindow(user);
Este adaptador es similar al ChatAdapter pero proporciona un botón de paginación para cargar mensajes más antiguos desde el historial de su mensaje. Debe implementar un método adicional: getMessageHistoryByPage . Puede consultar una implementación de muestra para esto en el proyecto Demo con la clase de DemoAdapterPagedHistory .
Si le gusta esta característica y cree que debería ser el comportamiento y la implementación predeterminados para NG-CHAT, abra un problema y vote aquí para que podamos presentarlo potencialmente como el adaptador de chat predeterminado en versiones posteriores de NG-CHAT.
Si desea mostrar una miniatura de imagen en un mensaje de la ventana de chat, simplemente establezca el tipo de mensaje en Image . El contenido del mensaje debe apuntar a una URL de imagen válida:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Siga esta guía al informar errores y solicitudes de funciones:
¡Gracias por entender!
La licencia MIT (consulte el archivo de licencia para el texto completo)
