uni-app聊天室功能(优医问诊)

实现类似微信聊天的功能，但是目前仅仅支持图片文字交流的方式

功能点1.websocket如何在实际开发中使用，前后端约定emit,on事件名，用于前后端联调

//跟聊天室建立socket链接 
const socket = io(baseURL, {
// 认证信息
auth: { token: `Bearer ${userStore.basicInfo.token}` },
// 查询参数
query: { orderId: props.orderId },
// 传输方式
transports: ['websocket', 'polling'],
// 超时时间
timeout: 5000,
	}) 

功能点2.接收服务端消息,小功能点包括消息分组

	// 获取聊天记录
	socket.on('connect', () => {
		// console.log('连接成功')
		// 接受服务器传过来的数据
		// 建立成功服务器会自动触发一次chatMsgList 事件 将聊天记录给客户端
		socket.on('chatMsgList', async (e) => {
			// 收起下拉刷新
			isRefreshing.value = false
			if (e.data.length === 0) return uni.utils.toast('暂无更多聊天记录')
			e.data.reverse() //历史记录要往下添加新数组 但是后端返回的数据是从小到大就需要倒序
			// 实现消息分组
			for (const [index, v] of e.data) {
				// 设置当前向下滚动日期
				// 分组的第一条消息创建时间当做入参
				if (index === 0) lastTime.value = currentValue
				// 在拆包每一组消息时 先插入一条时间通知消息 作为分组分割
				messageList.value.unshift(
					{
						id: v.createTime,
						msgType: 31,
						msg: {
							content: v.createTime,
						},
					},
					...v.items
				)
			}
			// 数据push进去后 但是视图并不会马上更新 视图更新是异步的
			await nextTick()
			// 要等待视图更新完成后 再设置滚动距离
			scrollTop.value = 10000
		})
		// 接收医生发送的消息
		socket.on('receiveChatMsg', async (msg) => {
			// console.log(msg, 'msg')
			// 修改消息为已读
			socket.emit('updateMsgStatus', msg.id)
			// 接收到的消息追加到消息列表中
			messageList.value.push(msg)
			await nextTick()
			scrollTop.value += 10000
		})
		// 监听订单状态改变的事件，实时更新订单状态
		
		.on('statusChange', () => {
			// 重新获取订单详情
			getOrderDetail()
		})
	})

功能点3.向服务端发送消息

	socket.emit('sendChatMsg', {
			from: userStore.basicInfo.id, //发送人id
			to: orderDetail.value.docInfo.id, //接收人id
			msgType: 4, //4：图片
			msg: {
				picture: {
					id: res.tempFiles[0].lastModified,
					url: res.tempFiles[0].url,
				},
			},
		})

功能点4.下拉刷新，实现历史消息分页

// 下拉刷新显示历史记录
// 下拉刷新
    const isRefreshing = ref(false)
    const onRefresh = () => {
    isRefreshing.value = true
    // 获取历史记录
    socket.emit(
    'getChatMsgList', //事件名称 固定的
    20, //每页条数
    // dateFormat(new Date(),'yyyy-mm-dd'), //消息时间点
    //	messageList.value[0].id,
    lastTime.value,
    props.orderId //订单id
    )
    }

功能点6.使用scroll-view 配合:scroll-top="scrollTop"实现，最后一条消息总是显示在列表最底部，而不用自己手动下滑

// 数据push进去后 但是视图并不会马上更新 视图更新是异步的
await nextTick()
// 要等待视图更新完成后 再设置滚动距离（10000是自动到最底部去的意思）
scrollTop.value = 10000