vue advanced chat
2.1.0
สนุก ?
เว็บแอปพลิเคชันแบบก้าวหน้าแสดงคุณสมบัติทั้งหมดของส่วนประกอบ vue-advanced-chat
สร้างขึ้นด้วย Firestore, Vuetify และ Push Notifications
หากคุณต้องการเข้าถึงซอร์สโค้ดตัวอย่างของโลกแห่งความเป็นจริงโปรดติดต่อฉันทางอีเมล
คุณจะได้รับแอปพลิเคชันแชทที่ทำงานได้อย่างสมบูรณ์สำหรับเว็บและมือถือ:
# 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 > ลงทะเบียน vue-advanced-chat และ emoji-picker เป็นส่วนประกอบของเว็บในไฟล์กำหนดค่าของคุณ:
compilerOptions: {
isCustomElement : tagName => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
}
}ตัวอย่าง: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main
ตัวอย่าง: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react
ตัวอย่าง: https://github.com/advanced-chat/vue-advanced-chat-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 > ส่วนประกอบ vue-advanced-chat คือการมุ่งเน้นประสิทธิภาพดังนั้นคุณต้องปฏิบัติตามกฎเฉพาะเพื่อให้ทำงานได้อย่างถูกต้อง
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 Prop ทุกครั้งที่มีการดึงห้องใหม่ fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} หากคุณใช้ Vue 3 คุณสามารถผ่านอาร์เรย์และอุปกรณ์ประกอบฉากตามปกติ: ผ่านคุณสมบัติ DOM ใน Vue 3
มิฉะนั้นคุณจะต้องผ่านอุปกรณ์ประกอบฉากเหล่านั้นเป็นสตริง ตัวอย่างเช่น: [messages]="JSON.stringify(messages)"
ข้อต่อ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น |
|---|---|---|---|
height | สาย | - | 600px |
current-user-id (1) | สาย | true | - |
rooms | [สตริงอาร์เรย์] | - | [] |
rooms-order | desc / asc | - | desc |
loading-rooms (2) | บูลีน | - | false |
rooms-loaded (3) | บูลีน | - | false |
room-id (4) | สาย | - | null |
load-first-room (5) | บูลีน | - | true |
rooms-list-opened | บูลีน | - | true |
custom-search-room-enabled (6) | บูลีน | - | false |
messages | [สตริงอาร์เรย์] | - | [] |
room-message (7) | สาย | - | null |
username-options (8) | [สตริงวัตถุ] | - | {minUsers: 3, currentUser: false} |
messages-loaded (9) | บูลีน | - | false |
room-actions (10) | [สตริงอาร์เรย์] | - | [] |
menu-actions (11) | [สตริงอาร์เรย์] | - | [] |
message-actions (12) | [สตริงอาร์เรย์] | - | (11) |
message-selection-actions (13) | [สตริงอาร์เรย์] | - | (13) |
templates-text (14) | [สตริงอาร์เรย์] | - | null |
auto-scroll (15) | [สตริงวัตถุ] | - | { send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } } |
show-search | บูลีน | - | true |
show-add-room | บูลีน | - | true |
show-send-icon | บูลีน | - | true |
show-files | บูลีน | - | true |
show-audio | บูลีน | - | true |
audio-bit-rate | ตัวเลข | - | 128 |
audio-sample-rate | ตัวเลข | - | 44100 |
show-emojis | บูลีน | - | true |
show-reaction-emojis | บูลีน | - | true |
show-new-messages-divider (16) | บูลีน | - | true |
show-footer (17) | บูลีน | - | true |
text-messages (18) | [สตริงวัตถุ] | - | null |
text-formatting (19) | [สตริงวัตถุ] | - | {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '}` |
link-options (20) | [สตริงวัตถุ] | - | { disabled: false, target: '_blank', rel: null } |
room-info-enabled (21) | บูลีน | - | false |
textarea-action-enabled (22) | บูลีน | - | false |
textarea-auto-focus | บูลีน | - | true |
user-tags-enabled | บูลีน | - | true |
emojis-suggestion-enabled | บูลีน | - | true |
media-preview-enabled | บูลีน | - | true |
responsive-breakpoint (23) | ตัวเลข | - | 900 |
single-room (24) | บูลีน | - | false |
scroll-distance (25) | ตัวเลข | - | 60 |
theme (26) | light / dark | - | light |
accepted-files (27) | สาย | - | * |
capture-files (28) | สาย | - | '' |
multiple-files (29) | บูลีน | - | true |
styles (30) | [สตริงวัตถุ] | - | (26) |
show-audio (31) | บูลีน | - | true |
emoji-data-source | สาย | - | https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json |
(1) current-user-id ต้องแสดงการดำเนินการ UI และทริกเกอร์ตามผู้ใช้โดยใช้การแชท (เช่น: ตำแหน่งข้อความทางด้านขวา ฯลฯ )
(2) loading-rooms สามารถใช้เพื่อแสดง/ซ่อนไอคอนสปินเนอร์ในขณะที่ห้องกำลังโหลด
(3) ต้องตั้ง rooms-loaded เป็น true เมื่อมีการโหลดห้องพักทุกห้อง หมายความว่าผู้ใช้ไม่สามารถเลื่อนเพื่อโหลดห้องที่น่าสนใจมากขึ้น
(4) room-id สามารถใช้ในการโหลดห้องที่เฉพาะเจาะจงได้ตลอดเวลา
(5) load-first-room สามารถใช้เพื่อลบพฤติกรรมเริ่มต้นของการเปิดห้องแรกเมื่อเริ่มต้น
(6) custom-search-room-enabled สามารถใช้เพื่อใช้กิจกรรมห้องค้นหาเพื่อเรียกใช้วิธีการของคุณเองเพื่อกรองห้องพัก
(7) room-message สามารถใช้เพื่อเพิ่มค่า textarea เริ่มต้น
(8) username-options สามารถใช้เพื่อแสดง/ซ่อนข้อความห้องชื่อผู้ใช้ตามจำนวนผู้ใช้ขั้นต่ำของผู้ใช้ minUsers อยู่ภายในห้องและหากผู้ใช้ข้อความเป็นผู้ใช้ปัจจุบันผู้ใช้ currentUser
(9) ต้องตั้ง messages-loaded เป็น true เมื่อมีการโหลดข้อความทั้งหมดของการสนทนาแล้ว หมายความว่าผู้ใช้ไม่สามารถเลื่อนไปด้านบนเพื่อโหลดข้อความที่น่าสนใจมากขึ้น
(10) room-actions สามารถใช้เพื่อแสดงปุ่มของคุณเองเมื่อคลิกที่ไอคอนดรอปดาวน์ของแต่ละห้องภายในรายการห้องพัก
จากนั้นคุณสามารถใช้กิจกรรมผู้จัดการการกระทำในห้องเพื่อเรียกการกระทำของคุณเองหลังจากคลิกปุ่ม อดีต:
room - actions = "[
{
name : 'archiveRoom' ,
title : 'Archive Room'
}
] " (11) menu-actions สามารถใช้เพื่อแสดงปุ่มของคุณเองเมื่อคลิกที่ไอคอนจุดแนวตั้งภายในห้อง
จากนั้นคุณสามารถใช้กิจกรรมการจัดการเมนูแอ็คชั่นเพื่อเรียกการกระทำของคุณเองหลังจากคลิกปุ่ม อดีต:
menu - actions = "[
{
name : 'inviteUser' ,
title : 'Invite User'
} ,
{
name : 'removeUser' ,
title : 'Remove User'
} ,
{
name : 'deleteRoom' ,
title : 'Delete Room'
}
] " (12) message-actions สามารถใช้เพื่อแสดงปุ่มของคุณเองเมื่อคลิกที่ไอคอนดรอปดาวน์ภายในข้อความ
จากนั้นคุณสามารถใช้กิจกรรมผู้จัดการข้อความการกระทำเพื่อเรียกการกระทำของคุณเองหลังจากคลิกปุ่ม อดีต:
message - actions = "[
{
name : 'addMessageToFavorite' ,
title : 'Add To Favorite'
} ,
{
name : 'shareMessage' ,
title : 'Share Message'
}
] " คุณสามารถใช้ชื่อ message-actions ในตัวเพื่อทริกเกอร์การแก้ไข UI เฉพาะเมื่อคลิก
ปัจจุบันมีชื่อการดำเนินการ replyMessage , editMessage และ deleteMessage
หากไม่ได้ตั้ง messageActions จะใช้ค่าเริ่มต้นด้านล่าง
หากคุณไม่ต้องการแสดงเมนู messageActions นี้คุณสามารถผ่านอาร์เรย์ที่ว่างเปล่าได้
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 เกี่ยวข้องกับการดำเนินการข้อความ selectMessages ด้านบน คุณสามารถใช้เพื่อแสดงปุ่มการกระทำที่กำหนดเองในส่วนหัวห้องเมื่อเลือกข้อความ อดีต:
messageActions="[
{
name: 'deleteMessages',
title: 'Delete'
},
{
name: 'forwardMessages',
title: 'Forward'
}
]"
(14) templates-text สามารถใช้เพื่อเพิ่มข้อความเทมเพลตการเติมข้อความอัตโนมัติเมื่อพิมพ์ / ในห้อง textarea อดีต:
templatesText = "[
{
tag : 'help' ,
text : 'This is the help'
} ,
{
tag : 'action' ,
text : 'This is the action'
}
] " (15) auto-scroll สามารถใช้เพื่อเปลี่ยนพฤติกรรมการเลื่อนอัตโนมัติเมื่อส่ง/รับข้อความ อดีต:
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 สามารถใช้เพื่อแสดง/ซ่อนตัวแบ่งสายสีน้ำเงินระหว่างข้อความที่เห็นและข้อความที่มองไม่เห็น
(17) show-footer สามารถใช้เพื่อซ่อนส่วนท้ายของห้อง ตัวอย่างเช่นเพื่อป้องกันไม่ให้ผู้ใช้ส่งข้อความหรือสื่อใด ๆ
(18) text-messages สามารถใช้เพื่อแทนที่ข้อความ I18N เริ่มต้น อดีต:
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 สามารถใช้เพื่อเพิ่มการจัดรูปแบบข้อความ Bold, italic, strikethrough, ขีดเส้นใต้, รหัสอินไลน์และการจัดรูปแบบรหัส multiline มีอยู่ในปัจจุบันและสามารถใช้ร่วมกันได้
:text-formatting="{disabled: true}":text-formatting="{italic: '^'}":text-formatting="{bold: null}"| สไตล์ | ไวยากรณ์ | ตัวอย่าง | เอาท์พุท |
|---|---|---|---|
| ตัวหนา | * * | *This is bold text* | นี่คือข้อความที่เป็นตัวหนา |
| ตัวเอียง | _ _ | _This text is italicized_ | ข้อความนี้เป็นตัวเอียง |
| การตี | ~ ~ | ~This was mistaken text~ | |
| ขีดเส้นใต้ | ° ° | °This text is underlined° | ข้อความนี้ขีดเส้นใต้ |
| การจัดรูปแบบซ้อน | * * และ _ _ | *This text is _extremely_ important* | ข้อความนี้มีความสำคัญ อย่างยิ่ง |
รหัสอินไลน์
ตัวอย่าง: `นี่คือรหัสอินไลน์ '
เอาท์พุท: This is inline code
รหัสหลาย
ตัวอย่าง: `` `นี่คือ multiline code`` '
เอาท์พุท:
This is
multiline code (20) link-options สามารถใช้เพื่อปิดใช้งานลิงก์ URL ในข้อความหรือเปลี่ยนเป้าหมาย URL อดีต:
: link - options = "{ disabled: true, target: '_self', rel: null }" (21) room-info-enabled สามารถใช้เพื่อเรียกเหตุการณ์หลังจากคลิกที่ส่วนหัวส่วนหัวของห้อง
จากนั้นคุณสามารถใช้กิจกรรม Room-INFO เพื่อเรียกการกระทำของคุณเองหลังจากคลิกส่วนหัว
(22) textarea-action-enabled สามารถใช้เพื่อเพิ่มไอคอนพิเศษทางด้านขวาของ textarea
จากนั้นคุณสามารถใช้เหตุการณ์ Textarea-Action-Handler เพื่อเรียกการกระทำของคุณเองหลังจากคลิกที่ไอคอน
(23) responsive-breakpoint สามารถใช้เพื่อยุบรายการห้องทางด้านซ้ายเมื่อขนาดวิวพอร์ตต่ำกว่าความกว้างที่ระบุ
(24) single-room สามารถใช้งานได้หากคุณไม่ต้องการแสดงรายการห้องทางด้านซ้าย คุณยังต้องผ่าน rooms พักห้องเป็นอาร์เรย์ที่มีองค์ประกอบเดียว
(25) scroll-distance สามารถใช้ในการเปลี่ยนจำนวนพิกเซลก่อนที่เหตุการณ์ fetchMessages จะถูกเรียกใช้เมื่อเลื่อนขึ้นไปโหลดข้อความเพิ่มเติมหรือเหตุการณ์ fetchMoreRooms จะถูกกระตุ้นเมื่อเลื่อนลงเพื่อโหลดห้องพักมากขึ้น
(26) theme สามารถใช้ในการเปลี่ยนธีมการแชท ปัจจุบันมีเพียง light และ dark เท่านั้น
(27) accepted-files สามารถใช้ในการตั้งค่าประเภทไฟล์เฉพาะที่อนุญาตในการแชท ตามค่าเริ่มต้นทุกประเภทไฟล์ได้รับอนุญาต: "*"
ตัวอย่าง: ตั้ง accepted-files="image/png, image/jpeg, application/pdf" เพื่ออนุญาตไฟล์ JPG PNG และ PDF เท่านั้น
(28) capture-files สามารถใช้เพื่อเปิดใช้งานการจับภาพและวิดีโอโดยตรงบนเบราว์เซอร์มือถือซึ่งตรงข้ามกับการอัปโหลดรูปภาพและวิดีโอที่มีอยู่ซึ่งมีอยู่แล้วบนอุปกรณ์แล้ว ดูที่นี่สำหรับข้อมูลเพิ่มเติมและค่าที่ได้รับการยอมรับ โดยค่าเริ่มต้นแอตทริบิวต์จะถูกละเว้นและเบราว์เซอร์มือถือจะเสนอแกลเลอรี่เพื่อเลือกรูปภาพและวิดีโอเท่านั้น หมายเหตุ: สิ่งนี้มีผลต่อไฟล์แนบไฟล์เท่านั้น ข้อความเสียงจะถูกบันทึกไว้เสมอโดยใช้ไมโครโฟนของอุปกรณ์
(29) multiple-files สามารถใช้เพื่อกำหนดว่าจะยอมรับการเลือกไฟล์หลายรายการหรือไม่ โดยค่าเริ่มต้นนี้เป็นจริง
(30) styles สามารถใช้ในการปรับแต่งธีมของคุณเอง คุณสามารถค้นหารายการทั้งหมดได้ที่นี่
(31) show-audio สามารถใช้เพื่อเปิดใช้งานหรือปิดใช้งานไอคอนเสียง
styles = "{
general : {
color : '#0a0a0a' ,
colorSpinner : '#333' ,
borderStyle : '1px solid #e1e4e8'
} ,
footer : {
background : '#f8f9fa' ,
backgroundReply : 'rgba(0, 0, 0, 0.08)'
} ,
icons : {
search: '#9ca6af'
}
} "อุปกรณ์ประกอบฉากของคุณจะต้องปฏิบัติตามโครงสร้างเฉพาะเพื่อแสดงห้องและข้อความอย่างถูกต้อง:
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 ]
}
] " หากคุณเพิ่มคุณสมบัติ index ห้องพักของคุณจะถูกสั่งซื้อโดยใช้ค่านี้ index อาจเป็นค่าที่สามารถจัดเรียงได้เช่น string , datetime , timestamp ฯลฯ
สำหรับผู้ใช้ห้องแต่ละห้องคุณสามารถเพิ่มคุณสมบัติ status ซึ่งสามารถเก็บ state และคุณสมบัติ lastChanged :
state สามารถเป็น 'online' หรือ 'offline'lastChanged เป็นวันที่เมื่อ state ได้รับการแก้ไขครั้งล่าสุด typingUsers เป็นอาร์เรย์ของผู้ใช้ทั้งหมดที่กำลังเขียนข้อความ
วัตถุข้อความจะแสดงผลต่างกันขึ้นอยู่กับประเภทของพวกเขา รองรับข้อความ, อิโมจิ, รูปภาพ, วิดีโอและประเภทไฟล์ได้รับการสนับสนุน
แต่ละวัตถุข้อความมีฟิลด์ senderId ซึ่งถือ ID ของเอเจนต์ที่เกี่ยวข้อง หาก senderId ตรงกับ Prop currentUserId UI และการกระทำที่เฉพาะเจาะจงจะถูกนำไปใช้
หมายเหตุ:
username จะแสดงในแต่ละข้อความของตัวแทนที่เกี่ยวข้องหากผู้ใช้อย่างน้อย 3 คนอยู่ในห้องsystem ใช้เพื่อแสดงข้อความที่มีการแสดงผลที่เฉพาะเจาะจงindexId สามารถใช้งานได้หากคุณต้องการเปลี่ยน ID ข้อความที่แสดงอยู่แล้วในห้องซึ่งเป็นการป้องกันความผิดพลาดของภาพเคลื่อนไหว ตัวอย่างเช่นเมื่อคุณไม่ทราบล่วงหน้ารหัสข้อความแบ็กเอนด์ของคุณจะสร้างสถานะข้อความ:
saved: truedistributed: trueseen: truedeleted: true พร้อมข้อความที่ถูกลบfailure: 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...'
}
]
} ,
}
] " เหตุการณ์ | พารามิเตอร์ | ยิงเมื่อผู้ใช้ |
|---|---|---|
fetch-messages (1) | { room, options } | เลื่อนด้านบนเพื่อโหลดข้อความเพิ่มเติม |
fetch-more-rooms (2) | - | เลื่อนเพื่อโหลดห้องมากขึ้น |
send-message | { roomId, content, files(11), replyMessage(12), usersTag } | ส่งข้อความ |
edit-message | { roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag } | แก้ไขข้อความ |
delete-message | { roomId, message } | ลบข้อความ |
open-file | { message, file } | คลิกเพื่อดูหรือดาวน์โหลดไฟล์ |
open-user-tag (3) | { user } | คลิกที่แท็กผู้ใช้ภายในข้อความ |
open-failed-message | { roomId, message } | คลิกที่ไอคอนความล้มเหลวถัดจากข้อความ |
add-room | - | คลิกที่ไอคอน Plus ถัดจาก Searchbar |
search-room (4) | { roomId, value } | พิมพ์อักขระในอินพุตการค้นหาห้อง |
room-action-handler (5) | { roomId, action } | คลิกที่ไอคอนจุดแนวตั้งภายในห้อง |
menu-action-handler (6) | { roomId, action } | คลิกที่ไอคอนจุดแนวตั้งภายในห้อง |
message-action-handler (7) | { roomId, action, message } | คลิกที่ไอคอนดรอปดาวน์ภายในข้อความ |
message-selection-action-handler (8) | { roomId, action, messages } | คลิกที่ปุ่มเลือกภายในข้อความ |
send-message-reaction | { roomId, messageId, reaction, remove } | คลิกที่ไอคอนอิโมจิภายในข้อความ |
room-info (9) | room | คลิกที่บาร์ส่วนหัวของห้อง |
toggle-rooms-list | { opened } | คลิกที่ไอคอนสลับภายในส่วนหัวห้อง |
textarea-action-handler (10) | { roomId, message } | คลิกที่ไอคอนที่กำหนดเองภายในส่วนท้าย |
typing-message | { roomId, message } | เริ่มพิมพ์ข้อความ |
(1) fetch-messages จะถูกกระตุ้นทุกครั้งที่เปิดห้อง หากห้องเปิดเป็นครั้งแรก options พารามิเตอร์จะ reset: true
(1) fetch-messages ควรเป็นวิธีการใช้ระบบการแบ่งหน้า วัตถุประสงค์คือการโหลดข้อความเก่า ๆ ของการสนทนาเมื่อผู้ใช้เลื่อนไปด้านบน
(2) fetch-more-rooms จะถูกกระตุ้นเมื่อเลื่อนรายการห้องลงและควรเป็นวิธีการใช้ระบบการแบ่งหน้า
(3) open-user-tag จะถูกเรียกใช้เมื่อคลิกแท็กผู้ใช้ภายในข้อความ เมื่อสร้างแท็กผู้ใช้โดยพิมพ์ @ ในส่วนท้าย textarea และส่งข้อความแท็กจะถูกระบุด้วยรูปแบบด้านล่าง:
< usertag > TAGGED_USER_ID </ usertag > สิ่งนี้จะทำให้แท็กคลิกได้ภายในข้อความ ตัวอย่าง: เนื้อหาแท็กข้อความ
เหตุการณ์ send-message และ edit-message จะจัดการกับรูปแบบนั้นให้คุณและส่งผ่านในพารามิเตอร์ content
(4) room-action-handler เป็นผลมาจากเสาแอ็ room-actions
เมื่อคลิกเพียงปุ่มเดียวจากอาร์เรย์ room-actions ของคุณ room-action-handler จะให้ชื่อปุ่มที่คลิก จากนั้นคุณสามารถทำอะไรก็ได้ที่คุณต้องการ อดีต:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'archiveRoom' :
// call a method to archive the room
}
} (5) menu-action-handler เป็นผลมาจากเสาแอ็ menu-actions
เมื่อคลิกปุ่มจากอาร์เรย์ menu-actions ของคุณ menu-action-handler จะให้ชื่อปุ่มที่คลิก จากนั้นคุณสามารถทำอะไรก็ได้ที่คุณต้องการ อดีต:
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 สามารถเปิดใช้งานได้โดยใช้เสา custom-search-room-enabled สิ่งนี้จะช่วยให้คุณสามารถเรียกวิธีการของคุณเองเพื่อกรองห้องที่ค้นหา
(7) message-action-handler เป็นผลมาจากข้อเสนอ message-actions
เมื่อคลิกปุ่มจากอาร์เรย์ message-actions ของคุณ message-action-handler จะให้ชื่อปุ่มที่คลิกและข้อมูลข้อความที่เกี่ยวข้อง จากนั้นคุณสามารถทำอะไรก็ได้ที่คุณต้องการ อดีต:
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 เป็นผลมาจาก message-selection-actions
เมื่อคลิกปุ่มจากอาร์เรย์ message-selection-actions ของคุณผู้ว่า message-selection-action-handler จะให้ชื่อของปุ่มที่คลิกและข้อมูลข้อความที่เลือกที่สอดคล้องกัน จากนั้นคุณสามารถทำอะไรก็ได้ที่คุณต้องการ อดีต:
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 เป็นผลมาจากเสา room-info-enabled
(10) textarea-action-handler เป็นผลมาจากเสา textarea-action-enabled
(11) อาร์เรย์ของไฟล์ที่แต่ละไฟล์มี: { blob, localUrl, name, size, type, extension }
(12) วัตถุ replyMessage พร้อมใช้งานเมื่อผู้ใช้ตอบกลับข้อความอื่นโดยคลิกที่ไอคอนที่เกี่ยวข้องและมีข้อมูลข้อความที่คลิก
ตัวอย่าง:
< 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 > ช่องเสียบ | การกระทำ |
|---|---|
custom-action-icon | เพิ่มไอคอนที่กำหนดเองภายในส่วนท้าย |
rooms-header | เพิ่มเทมเพลตในรายการห้องพัก (เหนือแถบค้นหา) |
room-list-item_{{ROOM_ID}} | แทนที่เทมเพลตของรายการห้องพัก |
room-list-info_{{ROOM_ID}} | แทนที่ข้อมูลรายการห้องพัก |
room-list-avatar_{{ROOM_ID}} | แทนที่อวตารของรายการห้องพัก |
room-list-options_{{ROOM_ID}} | แทนที่เทมเพลตของตัวเลือกห้องรายการ |
room-list-options-icon_{{ROOM_ID}} | แทนที่ไอคอนตัวเลือกรายการห้องพัก |
rooms-header | แทนที่เนื้อหาด้านบนแถบค้นหา |
rooms-list-search | แทนที่แถบค้นหา |
room-header | แทนที่เทมเพลตของส่วนหัวห้อง |
room-header-avatar | แทนที่เทมเพลตของ Avatar ส่วนหัวของห้องพัก |
room-header-info | แทนที่เทมเพลตของข้อความส่วนหัวห้อง |
room-options | แทนที่เทมเพลตของตัวเลือกห้อง |
message_{{MESSAGE_ID}} | แทนที่เทมเพลตของกล่องข้อความ (และข้อความระบบ) |
message-avatar_{{MESSAGE_ID}} | แทนที่เทมเพลตของ Avatar ข้อความ |
message-failure_{{MESSAGE_ID}} | แทนที่ไอคอนความล้มเหลวของข้อความ |
messages-empty | แทนที่เทมเพลตข้อความที่ว่างเปล่า |
rooms-empty | เปลี่ยนเทมเพลตห้องว่าง |
no-room-selected | แทนที่เทมเพลตที่ไม่มีห้องที่เลือก |
menu-icon | เปลี่ยนไอคอนเมนูห้อง |
toggle-icon | แทนที่ไอคอนรายการห้องสลับ |
spinner-icon-rooms | แทนที่ไอคอนการโหลดสปินเนอร์ในรายการห้องพัก |
spinner-icon-infinite-rooms | แทนที่ไอคอนสปินเนอร์โหลดเพื่อโหลดห้องพักมากขึ้น |
spinner-icon-messages | แทนที่ไอคอนสปินเนอร์โหลดในห้อง |
spinner-icon-infinite-messages | แทนที่ไอคอนการโหลดสปินเนอร์เพื่อโหลดข้อความเพิ่มเติม |
spinner-icon-room-file | แทนที่ไอคอนการโหลดสปินเนอร์เพื่อโหลดไฟล์หนัก |
spinner-icon-message-file_{{MESSAGE_ID}} | แทนที่ไอคอนการโหลดสปินเนอร์ในข้อความที่มีรูปภาพ |
scroll-icon | แทนที่ไอคอนข้อความใหม่ล่าสุด |
reply-close-icon | แทนที่ไอคอนปิดการตอบกลับ |
image-close-icon | แทนที่ไอคอนปิดภาพ |
file-icon | แทนที่ไอคอนไฟล์ |
files-close-icon | แทนที่ไอคอนปิดไฟล์ |
edit-close-icon | แทนที่ไอคอน Edit Close |
preview-close-icon | แทนที่ไอคอนปิดตัวอย่างสื่อ |
emoji-picker-icon | แทนที่ไอคอน Emoji Picker |
emoji-picker-reaction-icon_{{MESSAGE_ID}} | แทนที่ไอคอนปฏิกิริยาอิโมจิตัวเลือก (ในกล่องข้อความ) |
paperclip-icon | เปลี่ยนไอคอนคลิปหนีบกระดาษ |
send-icon | แทนที่ไอคอนส่งข้อความ |
eye-icon_{{MESSAGE_ID}} | แทนที่ไอคอนตา (ข้อความภาพ) |
document-icon_{{MESSAGE_ID}} | แทนที่ไอคอนเอกสาร |
pencil-icon_{{MESSAGE_ID}} | แทนที่ไอคอนดินสอ |
checkmark-icon_{{MESSAGE_ID}} | แทนที่ไอคอนเครื่องหมายถูกของข้อความ |
checkmark-icon_{{ROOM_ID}} | แทนที่ไอคอนเครื่องหมายถูกของข้อความจากรายการห้องพัก |
deleted-icon_{{MESSAGE_ID}} | แทนที่ไอคอนที่ถูกลบของข้อความ |
deleted-icon_{{ROOM_ID}} | แทนที่ไอคอนที่ถูกลบของข้อความจากรายการห้องพัก |
microphone-icon_{{ROOM_ID}} | เปลี่ยนไอคอนไมโครโฟน |
dropdown-icon_{{MESSAGE_ID}} | แทนที่ไอคอนดรอปดาวน์ |
search-icon | แทนที่ไอคอนการค้นหา |
add-icon | แทนที่ไอคอน Add Room |
audio-stop-icon | แทนที่ไอคอนหยุดเครื่องบันทึกเสียง |
audio-check-icon | แทนที่ไอคอนเครื่องบันทึกเสียงยืนยัน |
audio-pause-icon_{{MESSAGE_ID}} | แทนที่ไอคอนข้อความเสียงหยุดชั่วคราว |
audio-play-icon_{{MESSAGE_ID}} | แทนที่ไอคอนการเล่นเสียงข้อความ |
คุณสามารถค้นหาซอร์สโค้ดเพื่อใช้แอพแชทที่โดดเด่นเต็มรูปแบบโดยใช้ Firebase/Firestore ภายในโฟลเดอร์ demo
เพื่อทดสอบโดยใช้โครงการ Firebase ของคุณเอง:
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js แทนที่ LINE const config = ... ตามการกำหนดค่า firebase ของคุณเองdemo และเรียกใช้ npm run serve หากคุณตัดสินใจที่จะใช้รหัสเดียวกันกับในโฟลเดอร์ demo เพื่อสร้างแอพแชทของคุณคุณต้องมีโครงสร้างข้อมูล Firestore เฉพาะ
เพื่อช่วยให้คุณเริ่มต้นได้ฉันเพิ่มใน demo/src/App.vue วิธี addData เพื่อเริ่มต้นข้อมูลบางอย่างในฐานข้อมูล Firestore ของคุณ
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
}
} ความช่วยเหลือของคุณได้รับการชื่นชมเสมอ
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT
