vue advanced chat
2.1.0
Наслаждаться ?
Прогрессивное веб-приложение, демонстрирующее все функции компонента vue-advanced-chat .
Построен из Firestore, Vuetify и Push -уведомлений.
Если вы хотите получить премиальный доступ к исходному коду в реальном мире, пожалуйста, свяжитесь со мной по электронной почте.
Вы получите полностью рабочее приложение чата для веб -и мобильных устройств:
# 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 сообщения, каждый раз, когда новая комната получает 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 и запуска в соответствии с пользователем, использующего чат (например: позиция сообщений справа и т. Д.)
(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 могут использоваться для отображения ваших собственных кнопок при нажатии на выпадающий значок внутри сообщения.
Затем вы можете использовать событие Handler Message-Action, чтобы вызвать свое собственное действие после нажатия кнопки. Бывший:
message - actions = "[
{
name : 'addMessageToFavorite' ,
title : 'Add To Favorite'
} ,
{
name : 'shareMessage' ,
title : 'Share Message'
}
] " Вы можете использовать встроенные имена message-actions для запуска конкретных модификаций пользовательского интерфейса при нажатии.
В настоящее время доступны имена действий 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 может использоваться для добавления форматирования текста. Жирный, курсив, ударный, подчеркивающий, встроенный код и форматирование многослойного кода в настоящее время доступны и могут использоваться в совместном.
: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 можно использовать для запуска события после нажатия на компонент заголовка комнаты.
Затем вы можете использовать событие Room-Info, чтобы вызвать свое собственное действие после нажатия заголовка.
(22) textarea-action-enabled может использоваться для добавления дополнительного значка справа от Textarea
Затем вы можете использовать событие TextareARea-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 , которое удерживает идентификатор соответствующего агента. Если senderId соответствует предложению currentUserId , будет реализован конкретный пользовательский интерфейс и действия.
Примечания:
username будет отображаться в каждом сообщении соответствующих агентов, если в комнате не менее 3 пользователейsystem используется для отображения сообщений с определенным центрированным дисплеемindexId может использоваться, если вам нужно изменить идентификатор сообщения, который уже отображается в комнате, это предотвращает анимацию. Например, когда вы заранее не знаете, идентификатор сообщения ваш бэкэнд создаст.Согласно сообщению:
saved: true One Checkmarkdistributed: true Two Checkmarksseen: true Blue Checkmarksdeleted: 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 Param будет удерживать 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 | Замените шаблон заголовка комнаты Аватаром |
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 загрузки в списке номеров |
spinner-icon-infinite-rooms | Замените значок Spinner загрузки, чтобы загрузить больше комнат |
spinner-icon-messages | Замените значок Spinner загрузки в комнате |
spinner-icon-infinite-messages | Замените значок Spinner загрузки, чтобы загрузить больше сообщений |
spinner-icon-room-file | Замените значок Spinner загрузки на загрузку тяжелых файлов |
spinner-icon-message-file_{{MESSAGE_ID}} | Замените значок Spinner загрузки в сообщение, содержащее изображение |
scroll-icon | Замените свиток на новейший значок сообщения |
reply-close-icon | Замените значок ответа закрытия |
image-close-icon | Замените значок изображения закрыть |
file-icon | Замените значок файла |
files-close-icon | Замените значок File Close |
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}} | Заменить значок сообщения Audio Play |
Вы можете найти исходный код для реализации полноценного приложения чата с использованием Firebase/Firestore в demo -папке.
Чтобы проверить его, используя свой собственный проект Firebase:
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js File, замените линию const config = ... на вашу собственную конфигурацию Firebasedemo папки и запустите 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
