ng chat
3.1.0
โมดูลการแชทแบบ LOOKEDICE 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การแปลเป็นภาษาท้องถิ่น
เหตุการณ์
ในการสอนโมดูลนี้เกี่ยวกับวิธีการส่งและรับข้อความภายในซอฟต์แวร์ของคุณคุณจะต้องใช้ Chatadapter ของคุณเอง คลาสที่คุณจะนำไปใช้คือคลาสที่คุณต้องให้เป็นอินสแตนซ์ของการตั้งค่า [อะแดปเตอร์] ของโมดูลที่กล่าวถึงข้างต้น
แพ็คเกจนี้แสดงให้เห็นถึงคลาสบทคัดย่อ Chatadapter ซึ่งคุณสามารถนำเข้าในนิยามไฟล์คลาสใหม่ของคุณ:
import { ChatAdapter } from 'ng-chat';
หลังจากนำเข้าไปยังการใช้งานอะแดปเตอร์แบบกำหนดเองของคุณ (เช่น: myadapter.ts) คุณต้องใช้อย่างน้อย 3 วิธีซึ่งเป็นนามธรรมในคลาสฐาน Chatadapter ซึ่ง ได้แก่ :
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 ตัวอย่างอะแดปเตอร์: การใช้งาน:
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 สิ่งนี้จะเปิดใช้งานอะแดปเตอร์อัพโหลดไฟล์เริ่มต้นและหน้าต่างแชทแต่ละรายการจะแสดงผลที่ด้านล่างขวาการดำเนินการแนบซึ่งจะกระตุ้นการป้อนข้อมูลของประเภท = ไฟล์
พร้อมกับไฟล์แบบฟอร์มคำขอ NG-Chat จะส่งฟิลด์ที่มีชื่อว่า ng-chat-destinatary-userid ที่มี ID ของผู้ใช้ที่จะส่งไฟล์ไป ตรวจสอบให้แน่ใจว่าคุณใช้ค่านี้เพื่อเขียนข้อความตอบกลับเนื่องจากปลายทาง API ของคุณจะต้องส่งคืน FileMessage อินสแตนซ์ FileMessage นี้จะถูกส่งไปยังผู้ใช้ Destinatary โดยอัตโนมัติโดย NG-Chat ทันทีที่การอัปโหลดไฟล์สิ้นสุดลงสำเร็จ
คุณสามารถตรวจสอบตัวอย่างการอัพโหลดไฟล์แบ็กเอนด์ได้ที่นี่:
การกระทำของ NG-Chat บางอย่างสามารถเรียกใช้จากแอปพลิเคชันของคุณโดยใช้อินเตอร์เฟส IchatController ที่ส่งออก
สมมติว่าคุณมีอินสแตนซ์ NG-Chat ที่ประกาศไว้ในไฟล์เทมเพลตของคุณเพิ่มตัวระบุที่ไม่ซ้ำกันเชิงมุมลงไป:
<ng-chat #ngChatInstance ... />
จากนั้นในรหัสส่วนประกอบของคุณประกาศคุณสมบัติ ViewChild เพื่อผูกอินสแตนซ์ NG-Chat ของคุณ:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
ตอนนี้คุณสามารถเรียกใช้การกระทำของ NG-Chat เช่นการเปิดหน้าต่างแชทจากที่อื่นโดยใช้รหัสต่อไปนี้:
this.ngChatInstance.triggerOpenChatWindow(user);
อะแดปเตอร์นี้คล้ายกับ ChatAdapter แต่มีปุ่ม Pagination เพื่อโหลดข้อความเก่า ๆ จากประวัติข้อความของคุณ คุณต้องใช้วิธีการเพิ่มเติมหนึ่งวิธี: 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 (ดูไฟล์ใบอนุญาตสำหรับข้อความเต็ม)
