vue advanced chat
2.1.0
楽しむ ？
vue-advanced-chatコンポーネントのすべての機能を紹介するプログレッシブWebアプリケーション。
Firestore、Vuetify、およびプッシュ通知で構築されています。
Real Worldの例のソースコードへのプレミアムアクセスを取得したい場合は、メールでお問い合わせください。
Webおよびモバイル向けの完全に機能するチャットアプリケーションを取得します。
# 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 >構成ファイルにWebコンポーネントとしてvue-advanced-chatとemoji-pickerを登録します。
compilerOptions: {
isCustomElement : tagName => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
}
}デモ：https：//github.com/advanced-chat/vue-advanced-sandbox/tree/main
デモ：https：//github.com/advanced-chat/vue-advanced-sandbox/tree/react
デモ：https：//github.com/advanced-chat/vue-advanced-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プロップを更新して、UIの読み込みパターンに従ってください fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} VUE 3を使用している場合は、配列とオブジェクトの小道具を正常に渡すことができます。VUE3でDOMプロパティを渡すことができます
それ以外の場合は、それらの小道具を文字列として渡す必要があります。例： [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）チャットを使用してユーザーに応じてUIを表示し、トリガーアクションをトリガーするには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数に応じてユーザー名を表示/hideルームのメッセージを表示できます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_ | このテキストはイタリック体です |
| strikethrough | ~ ~ | ~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リンクを無効にするか、URLSターゲットを変更できます。元：
: link - options = "{ disabled: true, target: '_self', rel: null }" （21） room-info-enabledルームヘッダーコンポーネントをクリックした後、イベントをトリガーするために使用できます。
その後、ヘッダーをクリックした後、Room-INFOイベントを使用して独自のアクションを呼び出すことができます。
（22） textarea-action-enabled使用して、Textareaの右側に追加のアイコンを追加できます
その後、Iconをクリックした後、Textarea-active 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など、あらゆる並べ替え可能な値にすることができます。
部屋のユーザーごとに、 stateとlastChangedプロパティを保持できるstatusプロパティを追加できます。
state 'online'または'offline'にすることができますlastChanged 、 stateが最後に変更された日付です。 typingUsers 、現在メッセージを書いているすべてのユーザーの配列です
メッセージオブジェクトは、タイプに応じて異なるレンダリングされます。テキスト、絵文字、画像、ビデオ、ファイルの種類がサポートされています。
各メッセージオブジェクトには、対応するエージェントのIDを保持するsenderIdフィールドがあります。 senderId currentUserIdプロップと一致する場合、特定のUIとアクションが実装されます。
注：
usernameが表示されますsystem 、特定の中心ディスプレイでメッセージを表示するために使用されますindexId 、部屋に既に表示されているメッセージIDを変更する必要がある場合に使用できます。これにより、アニメーションの不具合が妨げられます。たとえば、事前に知らない場合、バックエンドが作成するメッセージIDが作成されます。メッセージの状態：
saved: true One Checkmarkdistributed: true 2つのチェックマークseen: true 2つの青いチェックマーク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 | - | 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トリガーされます。フッターテキストアレアに@を入力してメッセージを送信してユーザータグを作成すると、タグは以下のパターンで識別されます。
< 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） Custom- search-room custom-search-room-enabled Prop。これにより、検索された部屋を除外するために独自の方法を呼び出すことができます。
（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 Propの結果です。
（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-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 | PaperClipアイコンを交換します |
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を使用して、フルフィーチャーチャットアプリを実装するソースコードを見つけることができます。
独自のFireBaseプロジェクトを使用してテストするには：
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.jsファイル、 const config = ...独自のFirebase 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ライセンスに基づいてライセンスされています
