vue advanced chat
2.1.0
Menikmati ?
Aplikasi web progresif yang menampilkan semua fitur komponen vue-advanced-chat .
Dibangun dengan firestore, vuetify, dan dorong pemberitahuan.
Jika Anda ingin mendapatkan akses premium ke kode sumber contoh dunia nyata, silakan hubungi saya melalui email.
Anda akan mendapatkan aplikasi obrolan yang sepenuhnya berfungsi untuk web dan seluler:
# Using npm
npm install --save vue-advanced-chat
# Using yarn
yarn add vue-advanced-chat
# Using CDN
< script src= " https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-advanced-chat.umd.js " ></script > Daftarkan vue-advanced-chat dan emoji-picker sebagai komponen web dalam file konfigurasi Anda:
compilerOptions: {
isCustomElement : tagName => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
}
}Demo: https://github.com/advanced-ochat/vue-advanced-lat-sandbox/tree/main
Demo: https://github.com/advanced-ochat/vue-advanced-lat-sandbox/tree/react
Demo: https://github.com/advanced-ochat/vue-advanced-lat-sandbox/tree/angular
< template >
< vue-advanced-chat
: current-user-id = "currentUserId"
:rooms = "JSON.stringify(rooms)"
: messages = "JSON.stringify(messages)"
: room - actions = "JSON.stringify(roomActions)"
/ >
</ template >
< script >
import { register } from 'vue-advanced-chat'
register()
// Or if you used CDN import
// window['vue-advanced-chat'].register()
export default {
data ( ) {
return {
currentUserId : '1234' ,
rooms : [ ] ,
messages : [ ] ,
roomActions : [
{ name : 'inviteUser' , title : 'Invite User' } ,
{ name : 'removeUser' , title : 'Remove User' } ,
{ name : 'deleteRoom' , title : 'Delete Room' }
]
}
}
}
</ script > Komponen vue-advanced-chat berorientasi pada kinerja, oleh karena itu Anda harus mengikuti aturan khusus untuk membuatnya bekerja dengan baik.
push // DO THIS
const rooms = [ ]
for ( let i = 0 ; i < res . length ; i ++ ) {
rooms . push ( res )
}
this . rooms = rooms
// DON'T DO THIS
for ( let i = 0 ; i < res . length ; i ++ ) {
this . rooms . push ( res )
} // DO THIS
this . rooms [ i ] . typingUsers = [ ... this . rooms [ i ] . typingUsers , typingUserId ]
// DON'T DO THIS
this . rooms [ i ] . typingUsers . push ( typingUserId ) // DO THIS
this . rooms [ roomIndex ] = room
this . rooms = [ ... this . rooms ]
// DON'T DO THIS
this . rooms [ roomIndex ] = room
// AND DON'T DO THIS
this . rooms . push ( room )messagesLoaded setiap kali ruangan baru diambil fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} Jika Anda menggunakan Vue 3, Anda dapat melewati array dan alat peraga objek secara normal: melewati properti DOM di Vue 3
Kalau tidak, Anda perlu meneruskan alat peraga itu sebagai string. Misalnya: [messages]="JSON.stringify(messages)"
Menopang | Jenis | Diperlukan | Bawaan |
|---|---|---|---|
height | Rangkaian | - | 600px |
current-user-id (1) | Rangkaian | true | - |
rooms | [String, Array] | - | [] |
rooms-order | desc / asc | - | desc |
loading-rooms (2) | Boolean | - | false |
rooms-loaded (3) | Boolean | - | false |
room-id (4) | Rangkaian | - | null |
load-first-room (5) | Boolean | - | true |
rooms-list-opened | Boolean | - | true |
custom-search-room-enabled (6) | Boolean | - | false |
messages | [String, Array] | - | [] |
room-message (7) | Rangkaian | - | null |
username-options (8) | [String, objek] | - | {minUsers: 3, currentUser: false} |
messages-loaded (9) | Boolean | - | false |
room-actions (10) | [String, Array] | - | [] |
menu-actions (11) | [String, Array] | - | [] |
message-actions (12) | [String, Array] | - | (11) |
message-selection-actions (13) | [String, Array] | - | (13) |
templates-text (14) | [String, Array] | - | null |
auto-scroll (15) | [String, objek] | - | { send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } } |
show-search | Boolean | - | true |
show-add-room | Boolean | - | true |
show-send-icon | Boolean | - | true |
show-files | Boolean | - | true |
show-audio | Boolean | - | true |
audio-bit-rate | Nomor | - | 128 |
audio-sample-rate | Nomor | - | 44100 |
show-emojis | Boolean | - | true |
show-reaction-emojis | Boolean | - | true |
show-new-messages-divider (16) | Boolean | - | true |
show-footer (17) | Boolean | - | true |
text-messages (18) | [String, objek] | - | null |
text-formatting (19) | [String, objek] | - | {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '}` |
link-options (20) | [String, objek] | - | { disabled: false, target: '_blank', rel: null } |
room-info-enabled (21) | Boolean | - | false |
textarea-action-enabled (22) | Boolean | - | false |
textarea-auto-focus | Boolean | - | true |
user-tags-enabled | Boolean | - | true |
emojis-suggestion-enabled | Boolean | - | true |
media-preview-enabled | Boolean | - | true |
responsive-breakpoint (23) | Nomor | - | 900 |
single-room (24) | Boolean | - | false |
scroll-distance (25) | Nomor | - | 60 |
theme (26) | light / dark | - | light |
accepted-files (27) | Rangkaian | - | * |
capture-files (28) | Rangkaian | - | '' |
multiple-files (29) | Boolean | - | true |
styles (30) | [String, objek] | - | (26) |
show-audio (31) | Boolean | - | true |
emoji-data-source | Rangkaian | - | https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json |
(1) current-user-id diperlukan untuk menampilkan UI dan memicu tindakan sesuai dengan pengguna menggunakan obrolan (mis: Posisi pesan di sebelah kanan, dll.)
(2) loading-rooms dapat digunakan untuk menampilkan/menyembunyikan ikon pemintal saat kamar memuat
(3) rooms-loaded harus diatur ke true ketika semua kamar telah dimuat. Artinya pengguna tidak dapat menggulir untuk memuat lebih banyak kamar paginated
(4) room-id dapat digunakan untuk memuat kamar tertentu kapan saja
(5) load-first-room dapat digunakan untuk menghapus perilaku default membuka ruang pertama pada inisialisasi
(6) custom-search-room-enabled dapat digunakan untuk menggunakan acara ruang pencarian untuk menghubungi metode Anda sendiri untuk menyaring kamar
(7) room-message dapat digunakan untuk menambahkan nilai tekstara default
(8) username-options dapat digunakan untuk menampilkan/menyembunyikan Pesan Kamar Nama pengguna sesuai dengan jumlah minimum pengguna minUsers di dalam ruangan, dan jika pengguna pesan adalah currentUser saat ini
(9) messages-loaded harus diatur ke true ketika semua pesan percakapan telah dimuat. Artinya pengguna tidak dapat menggulir di atas untuk memuat lebih banyak pesan paginated
(10) room-actions dapat digunakan untuk menampilkan tombol Anda sendiri saat mengklik ikon dropdown dari setiap kamar di dalam daftar kamar.
Anda kemudian dapat menggunakan acara Action-Action-Action untuk memanggil tindakan Anda sendiri setelah mengklik tombol. Mantan:
room - actions = "[
{
name : 'archiveRoom' ,
title : 'Archive Room'
}
] " (11) menu-actions dapat digunakan untuk menampilkan tombol Anda sendiri saat mengklik ikon titik vertikal di dalam ruangan.
Anda kemudian dapat menggunakan acara menu-action-handler untuk memanggil tindakan Anda sendiri setelah mengklik tombol. Mantan:
menu - actions = "[
{
name : 'inviteUser' ,
title : 'Invite User'
} ,
{
name : 'removeUser' ,
title : 'Remove User'
} ,
{
name : 'deleteRoom' ,
title : 'Delete Room'
}
] " (12) message-actions dapat digunakan untuk menampilkan tombol Anda sendiri saat mengklik ikon dropdown di dalam pesan.
Anda kemudian dapat menggunakan acara pemasangan pesan-aksi untuk memanggil tindakan Anda sendiri setelah mengklik tombol. Mantan:
message - actions = "[
{
name : 'addMessageToFavorite' ,
title : 'Add To Favorite'
} ,
{
name : 'shareMessage' ,
title : 'Share Message'
}
] " Anda dapat menggunakan nama message-actions bawaan untuk memicu modifikasi UI tertentu saat diklik.
Saat ini, nama tindakan replyMessage , editMessage dan deleteMessage tersedia.
Jika messageActions tidak diatur, itu akan menggunakan nilai default di bawah ini.
Jika Anda tidak ingin menampilkan menu messageActions ini, Anda dapat meneruskannya array kosong.
messageActions = "[
{
name : 'replyMessage' ,
title : 'Reply'
} ,
{
name : 'editMessage' ,
title : 'Edit Message' ,
onlyMe : true
} ,
{
name : 'deleteMessage' ,
title : 'Delete Message' ,
onlyMe : true
} ,
{
name : 'selectMessages' ,
title : 'Select'
}
] " (13) message-selection-actions terkait dengan tindakan pesan selectMessages di atas. Anda dapat menggunakannya untuk menampilkan tombol tindakan khusus di header kamar saat memilih pesan. Mantan:
messageActions="[
{
name: 'deleteMessages',
title: 'Delete'
},
{
name: 'forwardMessages',
title: 'Forward'
}
]"
(14) templates-text dapat digunakan untuk menambahkan teks templat AutoComplete saat mengetik / di kamar teks. Mantan:
templatesText = "[
{
tag : 'help' ,
text : 'This is the help'
} ,
{
tag : 'action' ,
text : 'This is the action'
}
] " (15) auto-scroll dapat digunakan untuk mengubah perilaku gulir otomatis saat mengirim/menerima pesan. Mantan:
auto - scroll = "{
send : {
new : true , // will scroll down after sending a message
newAfterScrollUp : false // will not scroll down after sending a message when scrolled up
} ,
receive : {
new : false , // will not scroll down when receiving a message
newAfterScrollUp : true // will scroll down when receiving a message when scrolled up
}
} " (16) show-new-messages-divider dapat digunakan untuk menunjukkan/menyembunyikan pembagi garis biru antara pesan yang terlihat dan yang tidak terlihat.
(17) show-footer dapat digunakan untuk menyembunyikan footer kamar. Misalnya untuk mencegah pengguna mengirim pesan atau media.
(18) text-messages dapat digunakan untuk mengganti teks I18N default. Mantan:
text - messages = "{
ROOMS_EMPTY : 'Aucune conversation' ,
ROOM_EMPTY : 'Aucune conversation sélectionnée' ,
NEW_MESSAGES : 'Nouveaux messages' ,
MESSAGE_DELETED : 'Ce message a été supprimé' ,
MESSAGES_EMPTY : 'Aucun message' ,
CONVERSATION_STARTED : 'La conversation a commencée le :' ,
TYPE_MESSAGE : 'Tapez votre message' ,
SEARCH : 'Rechercher' ,
IS_ONLINE : 'est en ligne' ,
LAST_SEEN : 'dernière connexion ' ,
IS_TYPING : 'est en train de taper...' ,
CANCEL_SELECT_MESSAGE : 'Annuler Sélection'
} " (19) text-formatting dapat digunakan untuk menambahkan pemformatan teks. Bold, miring, menyerang, menggarisbawahi, kode inline dan pemformatan kode multilin saat ini tersedia dan dapat digunakan bersama.
:text-formatting="{disabled: true}" .:text-formatting="{italic: '^'}":text-formatting="{bold: null}"| Gaya | Sintaksis | Contoh | Keluaran |
|---|---|---|---|
| Berani | * * | *This is bold text* | Ini adalah teks yang berani |
| Miring | _ _ | _This text is italicized_ | Teks ini dicetak miring |
| Strikethrough | ~ ~ | ~This was mistaken text~ | |
| Menggarisbawahi | ° ° | °This text is underlined° | Teks ini digarisbawahi |
| Pemformatan bersarang | * * Dan _ _ | *This text is _extremely_ important* | Teks ini sangat penting |
Kode inline
Contoh: `Ini kode inline`
Output: This is inline code
Kode multiline
Contoh: `` `Ini adalah kode multiline```
Keluaran:
This is
multiline code (20) link-options dapat digunakan untuk menonaktifkan tautan URL dalam pesan, atau mengubah target URLS. Mantan:
: link - options = "{ disabled: true, target: '_self', rel: null }" (21) room-info-enabled dapat digunakan untuk memicu acara setelah mengklik komponen header kamar.
Anda kemudian dapat menggunakan acara Info kamar untuk memanggil tindakan Anda sendiri setelah mengklik header.
(22) textarea-action-enabled dapat digunakan untuk menambahkan ikon tambahan di sebelah kanan tekstara
Anda kemudian dapat menggunakan acara TextArea-action-handler untuk memanggil tindakan Anda sendiri setelah mengklik ikon.
(23) responsive-breakpoint dapat digunakan untuk runtuh daftar kamar di sebelah kiri ketika ukuran viewport berada di bawah lebar yang ditentukan.
(24) single-room dapat digunakan jika Anda tidak pernah ingin menampilkan daftar kamar di sebelah kiri. Anda masih perlu lulus prop rooms sebagai array dengan satu elemen.
(25) scroll-distance dapat digunakan untuk mengubah jumlah piksel sebelum acara fetchMessages dipicu saat menggulir ke atas untuk memuat lebih banyak pesan, atau acara fetchMoreRooms dipicu saat menggulir ke bawah untuk memuat lebih banyak kamar.
(26) theme dapat digunakan untuk mengubah tema obrolan. Saat ini, hanya light dan dark yang tersedia.
(27) accepted-files dapat digunakan untuk mengatur jenis file spesifik yang diizinkan dalam obrolan. Secara default, semua jenis file diperbolehkan: "*" .
Contoh: Setel accepted-files="image/png, image/jpeg, application/pdf" untuk mengizinkan file PNG dan PDF JPG saja saja
(28) capture-files dapat digunakan untuk memungkinkan pengambilan foto dan video langsung di browser seluler, yang bertentangan dengan hanya mengunggah foto dan video yang sudah ada yang sudah ada di perangkat. Lihat di sini untuk informasi lebih lanjut dan nilai yang diakui. Secara default, atribut dihilangkan dan browser seluler hanya akan menawarkan galeri untuk memilih foto dan video. Catatan: Ini hanya mempengaruhi lampiran file. Pesan audio selalu direkam menggunakan mikrofon perangkat.
(29) multiple-files dapat digunakan untuk menentukan apakah beberapa pilihan file akan diterima. Secara default ini benar.
(30) styles dapat digunakan untuk menyesuaikan tema Anda sendiri. Anda dapat menemukan daftar lengkapnya di sini
(31) show-audio dapat digunakan untuk mengaktifkan atau menonaktifkan ikon audio
styles = "{
general : {
color : '#0a0a0a' ,
colorSpinner : '#333' ,
borderStyle : '1px solid #e1e4e8'
} ,
footer : {
background : '#f8f9fa' ,
backgroundReply : 'rgba(0, 0, 0, 0.08)'
} ,
icons : {
search: '#9ca6af'
}
} "Alat peraga Anda harus mengikuti struktur tertentu untuk menampilkan kamar dan pesan dengan benar:
rooms = "[
{
roomId : '1' ,
roomName : 'Room 1' ,
avatar : 'assets/imgs/people.png' ,
unreadCount : 4 ,
index : 3 ,
lastMessage : {
_id : 'xyz' ,
content : 'Last message received' ,
senderId : '1234' ,
username : 'John Doe' ,
timestamp : '10:20' ,
saved : true ,
distributed : false ,
seen : false ,
new : true
} ,
users : [
{
_id : '1234' ,
username : 'John Doe' ,
avatar : 'assets/imgs/doe.png' ,
status : {
state : 'online' ,
lastChanged : 'today, 14:30'
}
} ,
{
_id : '4321' ,
username : 'John Snow' ,
avatar : 'assets/imgs/snow.png' ,
status : {
state : 'offline' ,
lastChanged : '14 July, 20:00'
}
}
] ,
typingUsers : [ 4321 ]
}
] " Jika Anda menambahkan properti index , kamar Anda akan dipesan menggunakan nilai ini. index dapat berupa nilai apa pun yang dapat diurutkan, seperti string , datetime , timestamp , dll.
Untuk setiap pengguna kamar, Anda dapat menambahkan properti status , yang dapat menahan state dan properti lastChanged :
state bisa menjadi 'online' atau 'offline'lastChanged adalah tanggal ketika state terakhir dimodifikasi. typingUsers adalah array dari semua pengguna yang saat ini menulis pesan
Objek pesan diberikan secara berbeda tergantung pada jenisnya. Teks, emoji, gambar, video, dan jenis file didukung.
Setiap objek pesan memiliki bidang senderId yang memegang ID dari agen yang sesuai. Jika senderId cocok dengan prop currentUserId , UI dan tindakan spesifik akan diterapkan.
Catatan:
username akan ditampilkan pada setiap pesan agen yang sesuai jika setidaknya 3 pengguna berada di dalam ruangansystem digunakan untuk menampilkan pesan dengan tampilan terpusat tertentuindexId dapat digunakan jika Anda perlu mengubah ID pesan yang sudah ditampilkan di ruangan, ini mencegah kesalahan animasi. Misalnya, ketika Anda tidak tahu terlebih dahulu ID pesan akan membuat backend Anda.Menyatakan pesan:
saved: true satu tanda centangdistributed: trueseen: true Dua Kecil Birudeleted: true dengan teks pesan yang dihapusfailure: true messages = "[
{
_id : '7890' ,
indexId : 12092 ,
content : 'Message 1' ,
senderId : '1234' ,
username : 'John Doe' ,
avatar : 'assets/imgs/doe.png' ,
date : '13 November' ,
timestamp : '10:20' ,
system : false ,
saved : true ,
distributed : true ,
seen : true ,
deleted : false ,
failure : true ,
disableActions : false ,
disableReactions : false ,
files : [
{
name : 'My File' ,
size : 67351 ,
type : 'png' ,
audio : true ,
duration : 14.4 ,
url : 'https://firebasestorage.googleapis.com/...' ,
preview : 'data:image/png;base64,iVBORw0KGgoAA...' ,
progress : 88
}
] ,
reactions : {
? : [
'1234' , // USER_ID
'4321'
] ,
? : [
'1234'
]
} ,
replyMessage : {
content : 'Reply Message' ,
senderId : '4321' ,
files : [
{
name : 'My Replied File' ,
size : 67351 ,
type : 'png' ,
audio : true ,
duration : 14.4 ,
url : 'https://firebasestorage.googleapis.com/...' ,
preview : 'data:image/png;base64,iVBORw0KGgoAA...'
}
]
} ,
}
] " Peristiwa | Params | Api saat pengguna |
|---|---|---|
fetch-messages (1) | { room, options } | Gulir di atas untuk memuat lebih banyak pesan |
fetch-more-rooms (2) | - | Gulir untuk memuat lebih banyak kamar |
send-message | { roomId, content, files(11), replyMessage(12), usersTag } | Mengirim pesan |
edit-message | { roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag } | Mengedit pesan |
delete-message | { roomId, message } | Menghapus pesan |
open-file | { message, file } | Diklik untuk melihat atau mengunduh file |
open-user-tag (3) | { user } | Mengklik tag pengguna di dalam pesan |
open-failed-message | { roomId, message } | Mengklik ikon kegagalan di sebelah pesan |
add-room | - | Diklik pada ikon plus di sebelah pencarian |
search-room (4) | { roomId, value } | Mengetik karakter dalam input pencarian ruangan |
room-action-handler (5) | { roomId, action } | Mengklik ikon titik vertikal di dalam ruangan |
menu-action-handler (6) | { roomId, action } | Mengklik ikon titik vertikal di dalam ruangan |
message-action-handler (7) | { roomId, action, message } | Mengklik ikon dropdown di dalam pesan |
message-selection-action-handler (8) | { roomId, action, messages } | Diklik pada tombol Pilih di dalam pesan |
send-message-reaction | { roomId, messageId, reaction, remove } | Mengklik ikon emoji di dalam pesan |
room-info (9) | room | Mengklik bilah header kamar |
toggle-rooms-list | { opened } | Mengklik ikon sakelar di dalam header kamar |
textarea-action-handler (10) | { roomId, message } | Mengklik ikon khusus di dalam footer |
typing-message | { roomId, message } | Mulai mengetik pesan |
(1) fetch-messages dipicu setiap kali ruangan dibuka. Jika ruangan dibuka untuk pertama kalinya, param options akan menahan reset: true .
(1) fetch-messages harus menjadi metode yang mengimplementasikan sistem pagination. Tujuannya adalah untuk memuat pesan percakapan yang lebih lama ketika pengguna menggulir di atas.
(2) fetch-more-rooms dipicu saat menggulir daftar kamar, dan harus menjadi metode yang menerapkan sistem pagination.
(3) open-user-tag dipicu saat mengklik tag pengguna di dalam pesan. Saat membuat tag pengguna dengan mengetik @ di footer textarea dan mengirim pesan, tag akan diidentifikasi dengan pola di bawah ini:
< usertag > TAGGED_USER_ID </ usertag > Ini akan membuat tag dapat diklik di dalam pesan. Contoh: Konten Tag Pesan
Acara send-message dan edit-message akan menangani pola itu untuk Anda dan meneruskannya di param content .
(4) room-action-handler adalah hasil dari prop room-actions .
Saat mengklik tombol dari array room-actions Anda, room-action-handler akan memberi Anda nama tombol yang klik. Maka Anda dapat melakukan apa pun yang Anda inginkan dengannya. Mantan:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'archiveRoom' :
// call a method to archive the room
}
} (5) menu-action-handler adalah hasil dari penyangga menu-actions .
Saat mengklik tombol dari array menu-actions Anda, menu-action-handler akan memberi Anda nama tombol yang klik. Maka Anda dapat melakukan apa pun yang Anda inginkan dengannya. Mantan:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'inviteUser' :
// call a method to invite a user to the room
case 'removeUser' :
// call a method to remove a user from the room
case 'deleteRoom' :
// call a method to delete the room
}
} (6) search-room dapat diaktifkan dengan menggunakan prop custom-search-room-enabled . Ini akan memungkinkan Anda untuk memanggil metode Anda sendiri untuk memfilter kamar yang dicari.
(7) message-action-handler adalah hasil dari penyangga message-actions .
Saat mengklik tombol dari array message-actions Anda, message-action-handler akan memberi Anda nama tombol yang klik dan data pesan yang sesuai. Maka Anda dapat melakukan apa pun yang Anda inginkan dengannya. Mantan:
messageActionHandler ( { roomId , action , message } ) {
switch ( action . name ) {
case 'addMessageToFavorite' :
// call a method to add a message to the favorite list
case 'shareMessage' :
// call a method to share the message with another user
}
} (8) message-selection-action-handler adalah hasil dari penyangga pemilihan message-selection-actions .
Saat mengklik tombol dari array message-selection-actions Anda, message-selection-action-handler akan memberi Anda nama tombol yang klik dan data pesan yang dipilih yang sesuai. Maka Anda dapat melakukan apa pun yang Anda inginkan dengannya. Mantan:
messageSelectionActionHandler ( { roomId , action , message } ) {
switch ( action . name ) {
case 'deleteMessages' :
// call a method to delete selected messaged
case 'shareMessage' :
// call a method to share selected messaged with another user
}
} (9) room-info adalah hasil dari prop room-info-enabled .
(10) textarea-action-handler adalah hasil dari prop textarea-action-enabled .
(11) Array file di mana setiap file berisi: { blob, localUrl, name, size, type, extension }
(12) Objek replyMessage tersedia ketika pengguna membalas pesan lain dengan mengklik ikon yang sesuai, dan berisi informasi pesan yang diklik.
Contoh:
< vue-advanced-chat >
< div slot = "room-header" >
This is a new room header
</ div >
< div v-for = "message in messages" : slot = "'message_' + message._id" >
< div v-if = "message.system" >
System message: { { message . content } }
</ div >
< div v-else >
Normal message: { { message . content } }
</ div >
</ div >
< div v-for = "message in messages" : slot = "'message-avatar_' + message._id" >
New Avatar
</ div >
</ vue-advanced-chat > Slot | Tindakan |
|---|---|
custom-action-icon | Tambahkan ikon khusus di dalam footer |
rooms-header | Tambahkan templat di atas daftar kamar (di atas bilah pencarian) |
room-list-item_{{ROOM_ID}} | Ganti templat item daftar kamar |
room-list-info_{{ROOM_ID}} | Ganti info item daftar kamar |
room-list-avatar_{{ROOM_ID}} | Ganti avatar item daftar kamar |
room-list-options_{{ROOM_ID}} | Ganti template opsi ruang daftar |
room-list-options-icon_{{ROOM_ID}} | Ganti Ikon Dropdown Opsi Daftar Kamar |
rooms-header | Ganti konten di atas bilah pencarian |
rooms-list-search | Ganti bilah pencarian |
room-header | Ganti templat header kamar |
room-header-avatar | Ganti templat avatar header kamar |
room-header-info | Ganti templat teks header kamar |
room-options | Ganti template pilihan kamar |
message_{{MESSAGE_ID}} | Ganti Templat Kotak Pesan (dan Pesan Sistem) |
message-avatar_{{MESSAGE_ID}} | Ganti templat Avatar Pesan |
message-failure_{{MESSAGE_ID}} | Ganti ikon kegagalan pesan |
messages-empty | Ganti template pesan kosong |
rooms-empty | Ganti template kamar kosong |
no-room-selected | Ganti Template Tidak Ada Ruang yang Dipilih |
menu-icon | Ganti ikon menu kamar |
toggle-icon | Ganti ikon daftar kamar sakelar |
spinner-icon-rooms | Ganti ikon pemuatan pemuatan di daftar kamar |
spinner-icon-infinite-rooms | Ganti ikon pemuatan pemuat untuk memuat lebih banyak kamar |
spinner-icon-messages | Ganti ikon pemuatan pemuatan di dalam ruangan |
spinner-icon-infinite-messages | Ganti ikon pemuatan pemuat untuk memuat lebih banyak pesan |
spinner-icon-room-file | Ganti ikon pemuatan pemuatan untuk memuat file berat |
spinner-icon-message-file_{{MESSAGE_ID}} | Ganti ikon pemuatan pemuatan dalam pesan yang berisi gambar |
scroll-icon | Ganti gulungan ke ikon pesan terbaru |
reply-close-icon | Ganti ikon tutup balasan |
image-close-icon | Ganti Ikon Tutup Gambar |
file-icon | Ganti ikon file |
files-close-icon | Ganti Ikon Tutup File |
edit-close-icon | Ganti Ikon Tutup Edit |
preview-close-icon | Ganti Ikon Tutup Pratinjau Media |
emoji-picker-icon | Ganti ikon Emoji Picker |
emoji-picker-reaction-icon_{{MESSAGE_ID}} | Ganti Ikon Reaksi Picker Emoji (di kotak pesan) |
paperclip-icon | Ganti ikon penjepit kertas |
send-icon | Ganti Ikon Kirim Pesan |
eye-icon_{{MESSAGE_ID}} | Ganti ikon mata (pesan gambar) |
document-icon_{{MESSAGE_ID}} | Ganti ikon dokumen |
pencil-icon_{{MESSAGE_ID}} | Ganti ikon pensil |
checkmark-icon_{{MESSAGE_ID}} | Ganti ikon tanda centang pesan |
checkmark-icon_{{ROOM_ID}} | Ganti ikon tanda centang pesan dari daftar kamar |
deleted-icon_{{MESSAGE_ID}} | Ganti ikon pesan yang dihapus |
deleted-icon_{{ROOM_ID}} | Ganti ikon yang dihapus dari pesan dari daftar kamar |
microphone-icon_{{ROOM_ID}} | Ganti ikon mikrofon |
dropdown-icon_{{MESSAGE_ID}} | Ganti ikon dropdown |
search-icon | Ganti ikon pencarian |
add-icon | Ganti ikon Tambah Kamar |
audio-stop-icon | Ganti ikon Stop Recorder Audio |
audio-check-icon | Ganti ikon konfirmasi perekam audio |
audio-pause-icon_{{MESSAGE_ID}} | Ganti ikon PAUSE AUDIO PESANAN |
audio-play-icon_{{MESSAGE_ID}} | Ganti Ikon Putar Audio Pesan |
Anda dapat menemukan kode sumber untuk mengimplementasikan aplikasi obrolan unggulan lengkap menggunakan Firebase/Firestore di dalam folder demo .
Untuk mengujinya menggunakan proyek Firebase Anda sendiri:
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js , ganti line const config = ... oleh firebase config Anda sendiridemo dan jalankan npm run serve Jika Anda memutuskan untuk menggunakan kode yang sama seperti di folder demo untuk membuat aplikasi obrolan Anda, Anda harus memiliki struktur data Firestore tertentu.
Untuk membantu Anda memulai, saya menambahkan dalam demo/src/App.vue metode addData untuk menginisialisasi beberapa data pada database Firestore Anda.
users: {
USER_ID_1 : {
_id : '1' ,
username : 'User 1'
} ,
USER_ID_2 : {
_id : '2' ,
username : 'User 2'
} ,
USER_ID_3 : {
_id : '3' ,
username : 'User 2'
}
} chatRooms: {
ROOM_ID_1 : {
users : [ '1' , '3' ]
} ,
ROOM_ID_2 : {
users : [ '1' , '2' , '3' ]
}
} messages: {
MESSAGE_ID_1 : {
content : 'My first message to <usertag>John</usertag>' ,
senderId : '2' ,
timestamp : 'December 11, 2019 at 4:00:00 PM' ,
seen : true
}
} Bantuan Anda selalu dihargai
Proyek ini dilisensikan di bawah lisensi MIT
