use chat
v3.1.2
!!! Tolong jangan gunakan versi 1.5.0 itu memiliki nama properti yang salah !!!
React Hook untuk manajemen negara dalam aplikasi obrolan.
Dokumentasi lengkap belum tersedia, tetapi akan disiapkan .
Jika Anda tertarik dengan perpustakaan ini dan membutuhkan lebih banyak dokumentasi, beri tahu saya dengan menambahkan salah satu reaksi positif (+1, jantung, roket) dalam edisi khusus di sini: #1
Ini adalah perpustakaan obrolan tanpa kepala. Anggap saja sebagai sesuatu seperti formik tetapi untuk aplikasi obrolan.
Perpustakaan dapat digunakan keduanya dengan @chatscope/chat-ui-kit-react serta dengan komponen obrolan lainnya.
Tujuannya adalah untuk menyediakan alat untuk menangani fitur yang paling sering diimplementasikan dalam aplikasi obrolan.
Terutama ini adalah manajemen negara aplikasi serta beberapa addons bagus seperti debounce atau pelambatan mengirim atau menerima pensinyalan indikator pengetikan.
Logika aplikasi obrolan seringkali berulang. Sebagian besar aplikasi ini berisi daftar pengguna, daftar konferensi dan tentu saja pesan. Setidaknya ada beberapa penyedia API obrolan di pasaran. Mereka menyediakan layanan SaaS yang dapat Anda gunakan untuk membuat aplikasi obrolan. Anda juga hampir selalu mendapatkan perpustakaan pesan yang siap digunakan dan sederhana dari mereka. Perpustakaan semacam itu merangkum protokol komunikasi yang kompleks.
Terkadang Anda juga mendapatkan komponen dan pengait/penyedia yang mengikat UI ke perpustakaan pesan penyedia. Keduanya terkait erat, yang membuat penggantian perpustakaan pesan atau komponen UI banyak pekerjaan.
Dalam hal ini Anda harus mengurus cara menyimpan di aplikasi Anda: daftar kontak dan status mereka, daftar pesan untuk setiap kontak, beralih di antara obrolan, mengatur obrolan aktif, memberikan pesan dan sebagainya ...
Jika Anda membuat sendiri yang didukung dan menerapkan lapisan komunikasi sendiri, Anda juga tidak akan menghindari melakukan semua hal ini.
Bukankah lebih baik fokus pada fungsionalitas bisnis aplikasi? Pada tata letak, pemilihan warna, dll., Alih -alih bertanya -tanya bagaimana menemukan pesan di array untuk mengatur keadaannya menjadi "membaca"?
Hal -hal seperti itu sering berubah menjadi lebih rumit untuk dilakukan daripada yang terlihat.
Misalnya, daftar pesan tidak selalu merupakan array datar. Ini akan sering menjadi objek dengan pesan yang ditetapkan untuk pengguna dan percakapan, dan juga, itu akan dikelompokkan ke dalam blok pesan yang masuk dan keluar.
Menambahkan pesan ke daftar membutuhkan kira -kira langkah -langkah berikut:
Uff, ada sedikit, kan?
Hal -hal seperti itu harus ditutup di perpustakaan logika yang terpisah, yang dapat digunakan dengan cara yang sederhana dan intuitif. Implementasi antarmuka yang konsisten juga menyediakan kemungkinan penyetelan internal (misalnya mengubah struktur data) tanpa mengubah cara perpustakaan digunakan.
Menggunakan benang.
yarn add @chatscope/use-chatMenggunakan NPM.
npm install @chatscope/use-chatPerpustakaan terdiri dari tiga bagian:
Ini adalah kelas yang mengimplementasikan antarmuka iStorage. Semua data seperti percakapan, pesan, indikator percakapan saat ini dll berada di penyimpanan. Basicstorage adalah implementasi dasar dari iStorage. Ini harus berfungsi penuh, dan dapat digunakan untuk sebagian besar aplikasi. Namun, dimungkinkan untuk menulis implementasi baru misalnya berdasarkan Redux atau perpustakaan negara lain. Itulah sebabnya penyimpanan disediakan untuk chatprovider dari luar.
Ini adalah kelas yang mengimplementasikan antarmuka ichatService. Tujuan dari layanan ini adalah untuk mempertahankan koneksi dengan server obrolan, mengirim dan menerima pesan dan perintah protokol obrolan. Ini adalah titik yang menghubungkan server obrolan Anda dengan perpustakaan. Untuk menggunakan perpustakaan ini, Anda perlu menulis layanan obrolan Anda sendiri yang mengimplementasikan antarmuka ichatservice. Implementasi layanan tergantung pada server obrolan mana yang Anda gunakan. Konten Layanan dapat berupa kode Anda yang ditulis dari awal, tetapi layanan ini juga dapat menjadi lapisan enkapsulasi untuk setiap Perpustakaan Komunikasi Obrolan yang siap digunakan
Ada src/contoh/exampleChatservice.ts tersedia untuk awal yang cepat. Ini adalah titik awal yang baik untuk mengembangkan layanan nyata untuk aplikasi Anda.
Di masa depan saya akan memberikan lebih banyak contoh yang menunjukkan komunikasi nyata dengan server obrolan berbasis socket.io.
Implementasi layanan untuk beberapa penyedia SaaS juga akan tersedia.
Ini adalah fungsi sederhana yang perlu Anda implementasikan sendiri. Fungsi ini menerima objek penyimpanan obrolan (IChatStorage) sebagai argumen pertama dan fungsi pembaruan sebagai yang kedua. Fungsi ini harus mengembalikan instance dari kelas yang mengimplementasikan ICHATSERVICE. Terkadang dalam implementasi layanan obrolan Anda, Anda harus mendapatkan nilai dari penyimpanan serta menyimpannya ke penyimpanan. Di sini Anda dapat meneruskan penyimpanan ke layanan Anda. Akses ke status penyimpanan disediakan dengan metode Storage.getState (). Menulis ke penyimpanan direalisasikan dengan memanggil fungsi seperti penyimpanan.addConversation (), Storage.adduser () dll. Argumen kedua adalah fungsi Updatestate . Setiap penulisan ke penyimpanan yang dilakukan dari layanan perlu memanggil fungsi UpdateState untuk melakukan render ulang. Misalnya ketika layanan menerima sinyalisasi yang telah dihubungkan oleh beberapa pengguna, Anda dapat menambahkan pengguna ke penyimpanan menggunakan metode penyimpanan
Deskripsi ini mungkin terlihat rumit :). Tapi percaya, saya sangat sederhana dibandingkan ketika Anda harus mengurus semuanya.
Ini adalah contoh yang sangat sederhana, tetapi menunjukkan betapa mudahnya menerapkan obrolan menggunakan hook usechat .
Untuk contoh yang lebih kompleks berdasarkan CRA, silakan kunjungi https://github.com/chatscope/use-rat-cat-example. Aplikasi Contoh Bekerja Tersedia Di Sini: https://use-rat.examples.chatscope.io
File: index.js
import { nanoid } from "nanoid" ;
import {
BasicStorage ,
ChatProvider ,
ExampleChatService ,
AutoDraft
} from "@chatscope/use-chat" ;
// Storage needs to generate id for messages and groups
const messageIdGenerator = ( ) => nanoid ( ) ;
const groupIdGenerator = ( ) => nanoid ( ) ;
// Create serviceFactory
const serviceFactory = ( storage , updateState ) => {
return new ExampleChatService ( storage , updateState ) ;
} ;
const chatStorage = new BasicStorage ( { groupIdGenerator , messageIdGenerator } ) ;
export const App = ( ) => {
return (
< ChatProvider serviceFactory = { serviceFactory } storage = { chatStorage } config = { {
typingThrottleTime : 250 ,
typingDebounceTime : 900 ,
debounceTyping : true ,
autoDraft : AutoDraft . Save | AutoDraft . Restore
} } >
< Chat />
</ ChatProvider >
) ;
} ;File Chat.js:
import { useState , useMemo } from "react" ;
import { MainContainer , Sidebar , ConversationList , Conversation , Avatar , MessageGroup , Message ,
ChatContainer , ConversationHeader , MessageList , MessageInput } from "@chatscope/chat-ui-kit-react" ;
import { useChat , ChatMessage , MessageContentType , MessageDirection , MessageStatus } from "@chatscope/use-chat" ;
export const Chat = ( ) => {
// Message input value
const [ value , setValue ] = useState ( "" ) ;
// Get all chat related values and methods from useChat hook
const {
currentMessages , conversations , activeConversation , setActiveConversation , sendMessage , getUser
} = useChat ( ) ;
// Get current user data
const [ currentUserAvatar , currentUserName ] = useMemo ( ( ) => {
if ( activeConversation ) {
const participant = activeConversation . participants . length > 0 ? activeConversation . participants [ 0 ] : undefined ;
if ( participant ) {
const user = getUser ( participant . id ) ;
if ( user ) {
return [ < Avatar src = { user . avatar } /> , user . username ]
}
}
}
return [ undefined , undefined ] ;
} , [ activeConversation ] ) ;
const handleSend = text => {
// Logger user (sender)
const currentUserId = "123" ;
const message = new ChatMessage ( {
id : "" ,
content : text ,
contentType : MessageContentType . TextHtml ,
senderId : currentUserId ,
direction : MessageDirection . Outgoing ,
status : MessageStatus . Sent
} ) ;
sendMessage ( {
message ,
conversationId : activeConversation . id ,
senderId : currentUserId ,
} ) ;
} ;
return ( < MainContainer >
< Sidebar position = "left" >
< ConversationList >
{ conversations . map ( c => {
// Helper for getting the data of the first participant
const [ avatar , name ] = ( ( ) => {
const participant = c . participants . length > 0 ? c . participants [ 0 ] : undefined ;
if ( participant ) {
const user = getUser ( participant . id ) ;
if ( user ) {
return [ < Avatar src = { user . avatar } /> , user . username ]
}
}
return [ undefined , undefined ]
} ) ( ) ;
return ( < Conversation key = { c . id }
name = { name }
active = { activeConversation ?. id === c . id }
unreadCnt = { c . unreadCounter }
onClick = { e => setActiveConversation ( c . id ) } >
{ avatar }
</ Conversation > ) ;
} ) }
</ ConversationList >
</ Sidebar >
< ChatContainer >
< ConversationHeader >
{ currentUserAvatar }
< ConversationHeader . Content userName = { currentUserName } />
</ ConversationHeader >
< MessageList >
{ currentMessages . map ( g => < MessageGroup key = { g . id } direction = { g . direction } >
< MessageGroup . Messages >
{ g . messages . map ( m => < Message key = { m . id } model = { {
type : "text" ,
payload : m . content
} } /> ) }
</ MessageGroup . Messages >
</ MessageGroup > ) }
</ MessageList >
< MessageInput value = { value } onSend = { handleSend } />
</ ChatContainer >
</ MainContainer > ) ;
} https://chatscope.io
Mit
