demo地址:https://gitee.com/beekim/vue-advanced-chat
vue-advanced-chat的git地址:https://github.com/advanced-chat/vue-advanced-chat
1.搭建demo
demo地址克隆后在demo目录安装依赖并启动
启动之后的页面如下:
2.前端代码分析
2.1 重点api分析
current-user-id:当前用户id
room-id:可随时加载特定房间?
rooms:?
messages:消息列表
room-actions:可用于在单击房间列表中每个房间的下拉图标时显示您自己的按钮
配合事件room-action-handler使用
roomActions: [
{
name: 'inviteUser', title: '测试下拉' },
{
name: 'removeUser', title: 'Remove User' },
{
name: 'deleteRoom', title: 'Delete Room' }
]
menu-actions:可用于在单击房间内的垂直点图标时显示您自己的按钮
配合事件menu-action-handler使用
menuActions: [
{
name: 'inviteUser', title: '测试菜单' },
{
name: 'removeUser', title: 'Remove User' },
{
name: 'deleteRoom', title: 'Delete Room' }
],
message-selection-actions:选择消息时,您可以使用它在房间标题中显示自定义操作按钮
messageSelectionActions: [{
name: 'deleteMessages', title: '你确定要删除嘛?' }]
templates-text:可用于/在房间文本区域中输入内容时添加自动完成模板文本
templatesText: [
{
tag: '吃好',
text: '吃好喝好,一路走好!'
},
{
tag: 'action',
text: 'This is the action'
},
{
tag: 'action 2',
text: 'This is the second action'
}
],
text-messages:可用于替换默认的 i18n 文本
textMessages: {
ROOMS_EMPTY: '无聊天',
ROOM_EMPTY: '未选中聊天',
NEW_MESSAGES: '新消息',
MESSAGE_DELETED: '消息已删除',
MESSAGES_EMPTY: '无消息',
CONVERSATION_STARTED: '聊天开始于:',
TYPE_MESSAGE: '请输入',
SEARCH: '搜索',
IS_ONLINE: '在线',
LAST_SEEN: 'last seen ',
IS_TYPING: '正在输入...',
CANCEL_SELECT_MESSAGE: '取消'
}
2.2 重点事件分析
fetch-more-rooms ?
向下滚动房间列表时触发,应该是实现分页系统的方法
fetch-messages
每次打开房间时都会触发。如果房间是第一次打开,options参数将保持reset: true。(其目的是当用户滚动到顶部时加载对话的较旧消息)
fetchMessages({
room, options = {
} }) {
this.$emit('show-demo-options', false)
//如果是第一次打开就初始化房间的参数
if (options.reset) {
this.resetMessages()
}
if (this.previousLastLoadedMessage && !this.lastLoadedMessage) {
this.messagesLoaded = true
return
}
//设置当前选中的房间的id值
this.selectedRoom = room.roomId
console.info('[fetchMessages] Selected Room(选中的房间id):' + this.selectedRoom