ng chat
3.1.0
Angular 응용 프로그램을위한 간단한 Facebook/LinkedIn Lookalike 채팅 모듈.
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 Abstract 클래스를 노출시킵니다.
import { ChatAdapter } from 'ng-chat';
사용자 정의 어댑터 구현 (예 : MyAdapter.ts)으로 가져온 후 ChatAdapter Base 클래스에서 초록 인 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
위의 두 가지 방법을 무시할 필요가 없습니다. 메시지가 수신되거나 친구 목록이 업데이트되었음을 모듈에 알리려면 어댑터 구현 내에서 전화해야합니다. "pollfriendslist"기능을 사용하기로 결정하면 두 번째는 무시할 수 있습니다.
의심스러운 경우 다음은 다음과 같습니다. 2 개의 어댑터 예제 구현이 있습니다.
IChatParticipant 사용자 또는 그룹 일 수 있지만 그룹 채팅을 가능하게하려면 IChatGroupAdapter 의 인스턴스를 NG-Chat에 구현하고 공급해야합니다. 다음 계약을 구현해야합니다.
groupCreated(group: Group): void;
NG-CHAT는 새 그룹이 생성 될 때마다 안내를 생성하고 위의 방법을 호출하여 새로 생성 된 그룹 (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에 의해 Destinatary 사용자에게 자동으로 전송됩니다.
일부 백엔드 파일 업로드 구현 예제를 확인할 수 있습니다.
내보낸 ICHATController 인터페이스를 사용하여 특정 NG-Chat 조치를 응용 프로그램에서 트리거 할 수 있습니다.
템플릿 파일에 ng-chat 인스턴스가 선언되었다고 가정하면 각도 고유 식별자를 추가하십시오.
<ng-chat #ngChatInstance ... />
그런 다음 구성 요소의 코드에서 NG-CHAT 인스턴스를 바인딩하기 위해 ViewChild 속성을 선언하십시오.
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
이제 다음 코드를 사용하여 다른 곳에서 채팅 창을 열는 것과 같은 일부 NG-Chat 작업을 트리거 할 수 있습니다.
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 라이센스 (전체 텍스트의 라이센스 파일 참조)
