vue advanced chat
2.1.0
享受 ？
渐进的Web应用程序展示了vue-advanced-chat组件的所有功能。
由Firestore建造，Vuetify和推送通知。
如果您想获得对现实世界示例源代码的高级访问权限，请通过电子邮件与我联系。
您将获得网络和移动设备的全部工作聊天应用程序：
# 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为Web组件：
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模式 fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} 如果您使用的是VUE 3，则可以正常传递数组和对象道具：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）当所有房间都装载时，必须设置为true rooms-loaded 。这意味着用户无法滚动以加载更多分页的房间
（4） room-id可随时加载特定的房间
（5）可以使用load-first-room来删除在初始化时打开第一个房间的默认行为
（6） custom-search-room-enabled
（7）可用于添加默认文本area room-message
（8）可以根据房间内的最小用户minUsers商数量来显示username-options用户名，如果消息用户是当前的用户当前用户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可用于添加自动完整模板在键入/在室内文本中添加文本。前任：
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可用于添加文本格式。当前可用粗体，斜体，罢工，下划线，内联代码和多行代码格式，可以结合使用。
: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
多行密码
示例：``这是多行代码''
输出：
This is
multiline code （20） link-options可用于禁用消息中的URL链接或更改URL目标。前任：
: link - options = "{ disabled: true, target: '_self', rel: null }" （21） room-info-enabled后，可以在单击房间标题组件后触发事件。
然后，您可以在单击标头后使用房间内事件来调用自己的操作。
（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是当前正在写消息的所有用户的数组
消息对象根据其类型而呈现不同。支持文本，表情符号，图像，视频和文件类型。
每个消息对象都有一个符合相应代理的ID的senderId字段。如果senderId匹配currentUserId Prop，则将实施特定的UI和操作。
笔记：
usernamesystem用于显示具有特定居中显示的消息indexId ，这阻止了动画故障。例如，当您不预先知道后端会创建消息ID时。消息指出：
saved: true一个检查标记distributed: true两个符号标记seen: true两个蓝色的符号标记deleted: 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 | - | 单击搜索栏旁边的加号图标 |
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 ACT的结果。
（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}} | 替换消息阿凡达的模板 |
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 | 替换编辑关闭图标 |
preview-close-icon | 替换媒体预览关闭图标 |
emoji-picker-icon | 更换表情符号采摘图标 |
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 | 更换添加房间图标 |
audio-stop-icon | 更换音频录音机停止图标 |
audio-check-icon | 更换录音机确认图标 |
audio-pause-icon_{{MESSAGE_ID}} | 更换消息音频暂停图标 |
audio-play-icon_{{MESSAGE_ID}} | 更换消息音频播放图标 |
您可以在demo文件夹中使用Firebase/Firestore找到源代码，以实现完整的聊天应用程序。
使用您自己的火箱项目对其进行测试：
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js文件，由您自己的firebase config替换行const config = ...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许可证获得许可的
