ng chat
3.1.0
Простой модуль чата в Facebook/LinkedIn для угловых приложений.
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();
}
Требуемые настройки
Дополнительные настройки
IChatController . По умолчанию ложь.FileMessage для Destinatary пользователя.Локализация
События
Чтобы инструктировать этот модуль о том, как отправлять и получать сообщения в вашем программном обеспечении, вам придется реализовать свой собственный чатаптер. Класс, который вы будете реализовать, - это тот, который вы должны предоставить в качестве экземпляра для настройки [адаптера] модуля, обсуждаемого выше.
Этот пакет обнаруживает абстрактный класс чатадаптера, который вы можете импортировать в своем новом определении файла класса:
import { ChatAdapter } from 'ng-chat';
После импорта его в реализации пользовательской адаптеров (например: myadapter.ts) вы должны реализовать как минимум 3 метода, которые абстрактны в базовом классе чатаптера:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Эти методы будут выполняться с помощью клиентской интеграции. Помимо интеграции и действий клиента, вы также должны информировать адаптер о том, как получить Push -уведомления от сервера, используя следующие методы:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Обратите внимание, что нет необходимости переопределять 2 метода выше. Вы должны позвонить им в рамках вашей реализации адаптера, чтобы уведомить модуль о том, что было получено сообщение или что список друзей был обновлен. Второй можно проигнорировать, если вы решите использовать функцию «PollFriendSlist».
Если вы сомневаетесь, вот 2 примера адаптера:
IChatParticipant может быть пользователем или группой, но для того, чтобы включить групповой чат, вы должны реализовать и предоставить NG-Chat экземпляр IChatGroupAdapter . Вам придется внедрить следующий контракт:
groupCreated(group: Group): void;
NG-Chat генерирует GUID каждый раз, когда создается новая группа и вызывает приведенный выше метод, чтобы вы могли обрабатывать его в своем приложении, чтобы сохранить вновь сгенерированную группу (ID, участники и т. Д.).
После того, как у вас появится реализация IChatGroupAdapter , просто поставьте его в экземпляр NG-Chat:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-Chat поддерживает вложение любого типа файлов. Для этого вам нужно реализовать конечную точку API в вашем приложении, которая может получить сообщение с файлом формы.
В вашем экземпляре NG-Chat убедитесь, что вы предоставили действительный URI для параметра fileUploadUrl . Это включит адаптер загрузки файла по умолчанию, и каждое окно чата будет отображаться в правом нижнем правом действии, которое запустит ввод файла type =.
Наряду с файлом формы запроса NG-Chat также отправит поле, названное в качестве ng-chat-destinatary-userid содержащий идентификатор пользователя, в котором будет отправлен файл. Убедитесь, что вы используете это значение для составления ответного сообщения, так как ваша конечная точка API должна будет вернуть FileMessage . Этот экземпляр FileMessage будет автоматически отправлен на Destinatary пользователя NG-Chat, как только загрузка файла успешно завершается.
Вы можете проверить некоторые примеры реализации бэкэнд -файла здесь:
Некоторые действия NG-чат могут быть запускаются из вашего приложения с помощью экспортируемого интерфейса iChatController.
Предполагая, что у вас есть экземпляр NG-Chat, объявленный в вашем файле шаблонов, добавьте в него угловой уникальный идентификатор:
<ng-chat #ngChatInstance ... />
Затем в коде вашего компонента объявите свойство ViewChild , чтобы связать ваш экземпляр NG-Chat:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Теперь вы можете запустить некоторые действия NG-чат, такие как открытие окна чата из других мест, используя следующий код:
this.ngChatInstance.triggerOpenChatWindow(user);
Этот адаптер похож на ChatAdapter , но обеспечивает кнопку странификации для загрузки более старых сообщений из истории ваших сообщений. Вы должны реализовать еще один метод: getMessageHistoryByPage . Вы можете проверить образец реализации для этого в рамках демонстрационного проекта с классом DemoAdapterPagedHistory .
Если вам нравится эта функция и считаете, что это должно быть поведение и реализацию по умолчанию для NG-Chat, пожалуйста, откройте проблему и проголосуйте за нее здесь, чтобы мы могли потенциально представить его как адаптер чата по умолчанию в последующих версиях NG-Chat.
Если вы хотите отобразить миниатюру изображения на сообщении окна чата, просто установите тип сообщения на Image . Содержание сообщения должно указывать на действительный URL изображения:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Пожалуйста, следуйте этому руководству при сообщении об ошибках и запросах функций:
Спасибо за понимание!
Лицензия MIT (см. Файл лицензии для полного текста)
