ng chat
3.1.0
Modul obrolan mirip Facebook/LinkedIn sederhana untuk aplikasi sudut.
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();
}
Pengaturan yang diperlukan
Pengaturan tambahan
IChatController . Default salah.FileMessage untuk pengguna destinata.Lokalisasi
Acara
Untuk menginstruksikan modul ini tentang cara mengirim dan menerima pesan dalam perangkat lunak Anda, Anda harus mengimplementasikan chatadapter Anda sendiri. Kelas yang akan Anda implementasikan adalah yang harus Anda berikan sebagai contoh untuk pengaturan [adaptor] modul yang dibahas di atas.
Paket ini memperlihatkan kelas abstrak chatadapter yang dapat Anda impor pada definisi file kelas baru Anda:
import { ChatAdapter } from 'ng-chat';
Setelah mengimpornya ke implementasi adaptor khusus Anda (misalnya: myAdapter.ts), Anda harus menerapkan setidaknya 3 metode yang abstrak di kelas dasar chatAdapter yaitu:
public abstract listFriends(): Observable<ParticipantResponse[]>;
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;
public abstract sendMessage(message: Message): void;
Metode ini akan dilakukan melalui integrasi klien. Terlepas dari integrasi dan tindakan klien, Anda juga harus menginstruksikan adaptor tentang cara menerima pemberitahuan push dari server menggunakan metode berikut:
public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void
Harap dicatat tidak perlu mengesampingkan 2 metode di atas. Anda harus menghubungi mereka dalam implementasi adaptor Anda hanya untuk memberi tahu modul bahwa pesan diterima atau bahwa daftar teman diperbarui. Yang kedua dapat diabaikan jika Anda memutuskan untuk menggunakan fitur "Pollfriendslist".
Jika ragu, berikut adalah 2 Implementasi Contoh Adaptor:
IChatParticipant dapat berupa pengguna atau grup tetapi untuk mengaktifkan obrolan grup yang harus Anda terapkan dan berikan kepada NG-CHAT instance IChatGroupAdapter . Anda harus mengimplementasikan kontrak berikut:
groupCreated(group: Group): void;
NG-CHAT menghasilkan GUID setiap kali grup baru dibuat dan memohon metode di atas sehingga Anda dapat menanganinya pada aplikasi Anda untuk mempertahankan grup yang baru dihasilkan (ID, peserta, dll).
Setelah Anda memiliki implementasi IChatGroupAdapter , cukup berikan ke instance NG-CHAT Anda:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-CHAT mendukung lampiran semua jenis file. Untuk melakukannya, Anda perlu menerapkan titik akhir API pada aplikasi Anda yang dapat menerima posting dengan file formulir.
Pada instance NG-CHAT Anda, pastikan Anda menyediakan URI yang valid untuk parameter fileUploadUrl . Ini akan mengaktifkan adaptor unggahan file default dan setiap jendela obrolan akan membuat di kanan bawah tindakan lampiran yang akan memicu input tipe = file.
Bersamaan dengan file formulir permintaan Ng-Chat juga akan mengirim bidang yang dinamai ng-chat-destinatary-userid yang berisi ID pengguna di mana file akan dikirim ke. Pastikan Anda menggunakan nilai ini untuk menyusun pesan respons karena titik akhir API Anda harus mengembalikan FileMessage . Instance FileMessage ini akan dikirim ke pengguna Destinatayy secara otomatis oleh NG-CHAT segera setelah unggahan file berhasil berakhir.
Anda dapat memeriksa beberapa contoh implementasi unggahan file backend di sini:
Tindakan NG-CHAT tertentu dapat dipicu dari aplikasi Anda dengan menggunakan antarmuka IchatController yang diekspor.
Dengan asumsi Anda memiliki instance NG-CHAT yang dinyatakan pada file templat Anda, tambahkan pengidentifikasi unik sudut ke dalamnya:
<ng-chat #ngChatInstance ... />
Kemudian pada kode komponen Anda, nyatakan properti ViewChild untuk mengikat instance NG-CHAT Anda:
@ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;
Anda sekarang dapat memicu beberapa tindakan ng-obrolan seperti membuka jendela obrolan dari tempat lain menggunakan kode berikut:
this.ngChatInstance.triggerOpenChatWindow(user);
Adaptor ini mirip dengan ChatAdapter tetapi menyediakan tombol pagination untuk memuat pesan lama dari riwayat pesan Anda. Anda harus mengimplementasikan satu metode tambahan: getMessageHistoryByPage . Anda dapat memeriksa implementasi sampel untuk ini di bawah proyek demo dengan kelas DemoAdapterPagedHistory .
Jika Anda menyukai fitur ini dan percaya itu harus menjadi perilaku dan implementasi default untuk NG-CHAT, buka masalah dan pilih di sini sehingga kami berpotensi memperkenalkannya sebagai adaptor obrolan default pada versi NG-CHAT berikutnya.
Jika Anda ingin menampilkan thumbnail gambar pada pesan jendela obrolan, cukup atur jenis pesan ke Image . Konten pesan harus menunjuk ke URL gambar yang valid:
const imageMessage: Message = {
fromId: 1,
toId: 999,
type: MessageType.Image,
message: "https://valid.url/image.jpg",
dateSent: new Date()
};
Harap ikuti pedoman ini saat melaporkan bug dan permintaan fitur:
Terima kasih sudah mengerti!
Lisensi MIT (lihat file lisensi untuk teks lengkapnya)
