ng chat
3.1.0
Angularアプリケーション用のシンプルなFacebook/LinkedIn LookIlike Chatモジュール。
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を使用して引き続き開き、閉じ、切り替えることができます。デフォルトはfalseです。FileMessageを返す有効なCORS対応URLを定義します。ローカリゼーション
イベント
ソフトウェア内でメッセージを送信および受信する方法についてこのモジュールに指示するには、独自のChatAdapterを実装する必要があります。実装するクラスは、上記のモジュールの[アダプター]設定のインスタンスとして提供する必要があるクラスです。
このパッケージは、新しいクラスファイル定義にインポートできるChatAdapterの抽象クラスを公開します。
import { ChatAdapter } from 'ng-chat';
カスタムアダプターの実装にインポートした後（例：myadapter.ts）、chatadapterベースクラスで抽象的な少なくとも3つのメソッドを実装する必要があります。
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
これらの方法は、クライアント統合を介して実行されます。クライアントの統合とアクションとは別に、次の方法を使用してサーバーからプッシュ通知を受信する方法についてアダプターに指示する必要があります。
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
上記の2つの方法をオーバーライドする必要はないことに注意してください。メッセージが受信されたこと、または友人リストが更新されたことをモジュールに通知するために、アダプターの実装内でそれらを呼び出す必要があります。 「PollfriendSlist」機能を使用することにした場合、2番目のものは無視できます。
疑わしい場合は、2つのアダプターの例の実装があります。
IChatParticipantユーザーまたはグループになることができますが、グループチャットを有効にするには、 IChatGroupAdapterのインスタンスを実装および供給する必要があります。次の契約を実装する必要があります。
groupCreated(group: Group): void;
NG-Chatは、新しいグループが作成されるたびにGUIDを生成し、上記のメソッドを呼び出すため、アプリケーションでそれを処理して、新しく生成されたグループ（ID、参加者など）を維持できます。
IChatGroupAdapterの実装ができたら、NG-Chatインスタンスに提供するだけです。
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-Chatは、あらゆるタイプのファイルの添付ファイルをサポートしています。そのためには、フォームファイルのある投稿を受信できるAPIエンドポイントをアプリケーションに実装する必要があります。
ng-chatインスタンスで、 fileUploadUrlパラメーターに有効なURIを提供してください。これにより、デフォルトのファイルアップロードアダプターが有効になり、各チャットウィンドウが右下の添付ファイルアクションをレンダリングして、タイプ=ファイルの入力をトリガーします。
リクエストフォームとともに、Ng-chatは、ファイルが送信されるユーザーのIDを含むng-chat-destinatary-useridという名前のフィールドを送信します。 APIエンドポイントはFileMessageを返す必要があるため、この値を使用して応答メッセージを作成してください。このFileMessageインスタンスは、ファイルのアップロードが正常に終了するとすぐに、NG-Chatによって自動的にデスティナタリーユーザーに送信されます。
バックエンドファイルのアップロード実装の例をここで確認できます。
特定のNG-CHATアクションは、エクスポートされたICHATCONTROLLERインターフェイスを使用して、アプリケーションからトリガーできます。
テンプレートファイルにng-chatインスタンスが宣言されていると仮定すると、角度のある一意の識別子を追加します。
<ng-chat #ngChatInstance ... />
次に、コンポーネントのコードで、ng-chatインスタンスをバインドするために、 ViewChildプロパティを宣言します。
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
これで、次のコードを使用して他の場所からチャットウィンドウを開くなど、いくつかのNG-CHATアクションをトリガーできます。
this.ngChatInstance.triggerOpenChatWindow(user);
このアダプターはChatAdapterに似ていますが、メッセージ履歴から古いメッセージをロードするためのページネーションボタンを提供します。追加方法を実装する必要があります： getMessageHistoryByPage 。 DemoAdapterPagedHistoryクラスを使用して、デモプロジェクトでこれのサンプル実装を確認できます。
この機能が気に入っており、NG-chatのデフォルトの動作と実装であるべきだと思われる場合は、ここで問題を開いて投票してください。
チャットウィンドウメッセージに画像サムネイルを表示したい場合は、メッセージタイプをImageに設定してください。メッセージの内容は、有効な画像URLを指す必要があります。
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
バグと機能のリクエストを報告するときは、このガイドラインに従ってください。
理解してくれてありがとう！
MITライセンス（全文のライセンスファイルを参照）
