vue-advanced-chat使用指南-CSDN博客

demo地址：—
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)
console.info('[fetchMessages] Selected Room messages per page（选中房间消息页码）:' + this.messagesPerPage)
console.info('[fetchMessages] Selected Room last loaded message（选中房间最后加载的消息）:' + this.lastLoadedMessage)
firestoreService
.getMessages(room.roomId, this.messagesPerPage, this.lastLoadedMessage)
.then(({
     data, docs }) => {
   
	// this.incrementDbCounter('Fetch Room Messages', messages.length)

      //判空
	if (this.selectedRoom !== room.roomId) return

      //从接口获取到的消息数据为空，或者拿到的数据长度小于本地消息长度，就显示loading
	if (data.length === 0 || data.length < this.messagesPerPage) {
   
		setTimeout(() => {
   
			this.messagesLoaded = true
		}, 0)
	}
      
      //如果是第一次打开就将消息变量messages置为空
	if (options.reset) this.messages = []

	data.forEach(message => {
   
        //格式化消息为模板消息
		const formattedMessage = this.formatMessage(room, message)
		console.info('[fetchMessages] Formatted Message（格式化后的消息）:' + JSON.stringify(formattedMessage))
		this.messages.unshift(formattedMessage)
	})
	console.info('[fetchMessages] Fetch Room Messages Length（获取到的消息长度）:' + this.messages.length)
      
	if (this.lastLoadedMessage) {
   
		this.previousLastLoadedMessage = this.lastLoadedMessage
	}
	this.lastLoadedMessage = docs[docs.length - 1]

	this.listenMessages(room)
})
}

send-message

发送消息，点击发送或者enter时触发

async sendMessage({
     content, roomId, files, replyMessage }) {
   
  //content消息内容 、 roomId房间id 、files文件 、replyMessage（微信引用）回复的消息
const message = {
   
sender_id: this.currentUserId,
content,
timestamp: new Date()
}

if (files) {
   
message.files = this.formattedFiles(files)
}

if (replyMessage) {
   
message.replyMessage = {
   
	_id: replyMessage._id,
	content: replyMessage.content,
	sender_id: replyMessage.senderId
}

if (replyMessage.files) {
   
	message.replyMessage.files = replyMessage.files
}
}
console.info('[sendMessage] room id is（发送消息的房间id）:' + roomId)
console.info('[sendMessage] message is:' + JSON.stringify(message))

const {
    id } = await firestoreService.