uni-app 82聊天页实时接收信息功能实现

这一块主要将保存在缓存中的数据拿出来，然后就是发送消息，并且监听消息，监听到了将数据push到消息列表中

chat.vue

<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
			<free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#xe6fd;</text>
			</free-icon-button>
		</free-nav-bar>
		<!-- 聊天内容区域 -->
		<scroll-view scroll-y="true" class="bg-light position-fixed left-0 right-0" style="bottom: 105rpx;"
			:style="chatBodyBottom" :show-scrollbar="false">

			<!-- <view v-for="(item,index) in list" :key="index" 
			:id="'chatItem_'+index">
				<free-chat-item :item="item" :index="index" ref="chatItem"
				:pretime=" index > 0 ? list[index-1].create_time : 0"
				@long="long" @preview="previewImage" 
				:shownickname="currentChatItem.shownickname"
				></free-chat-item>
			</view> -->

			<!-- 聊天信息列表组件 -->
			<view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
				<free-chat-item :item="item" :index="index" ref="chatItem"
					:pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage">
				</free-chat-item>
			</view>
			<!-- 聊天信息列表组件 -->
			<!-- <view v-for="(item,index) in list" :key="index">
				<free-chat-item :item="item" :index="index" :pretime="index > 0 ? list[index-1].create_time : 0"
					@long="long" ref="chatItem" @preview="previewImage"></free-chat-item>
			</view> -->
			<!-- 右边 -->
			<!-- 	<view class="flex align-start justify-end position-relative">
				<div class="bg-chat-item p-2 rounded mr-3" style="max-width:500rpx;">
					<text class="font-md">你好你好你好你好你好你好你好你好你好你好你好</text>
				</div>
				<view class="iconfont font-md position-absolute chat-right-icon"><text class="text-chat-item iconfont font-md">&#xe640;</text></view>
				<free-avatar size="75" src="/static/images/demo/demo6.jpg"></free-avatar>
			</view> -->
		</scroll-view>

		<!-- 扩展菜单 -->
		<free-popup ref="action" bottom transformOrigin="center bottom" @hide="keyBoardHeight = 0" :mask="false">
			<view style="height: 580rpx;" class="border-top border-light-secondary">
				<swiper :indicator-dots="emoticonOrActionList.length>1" style="height:510rpx;">
					<swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index">
						<view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;"
							v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
							<image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
							<text class="font-sm text-muted mt-2">{{item2.name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</free-popup>
		<!-- 弹出层 -->
		<free-popup ref="extend" maskColor bottom :bodyWidth="240" :bodyHeight="geMenusHeight" :tabbarHeight="105">
			<view class="flex flex-column" style="width:240rpx;" :style="getMenusStyle">
				<view v-for="(item,index) in menusList" :key="index" class="flex-1 flex align-center"
					hover-class="bg-light" @click="clickEvent(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
		<!-- #ifdef APP-PLUS-NVUE -->
		<div class="position-fixed top-0 right-0 left-0 bottom-0" v-if="mode==='action' || mode==='emoticon'"
			@click="clickPage" :style="'bottom:'+maskBottom+'px;'"></div>
		<!-- #endif -->

		<!-- 底部输入框 -->
		<view class="position-fixed left-0 right-0 border-top flex align-center"
			style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+keyBoardHeight+'px;'">
			<free-icon-button @click="changeVoiceOrText">
				<block v-if="mode === 'audio'">
					<text class="iconfont font-lg">&#xe607;</text>
				</block>
				<block v-else>
					<text class="iconfont font-lg">&#xe606;</text>
				</block>
			</free-icon-button>
			<view class="flex-1">
				<view v-if="mode==='audio'" class="rounded flex align-center justify-center" style="height: 80rpx;"
					:class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart"
					@touchend="voiceTouchEnd" @touchmove="voiceTouchMove" @touchcancel="voiceTouchCancel">
					<text class="font">{{isRecording ? '松开 结束' : '按住 说话'}}</text>
				</view>
				<!-- 底部输入框 -->
				<textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;"
					:adjust-position="false" v-model="text" @focus="mode = 'text'" />
				<!-- @click="onInputClick" -->
				<!-- <textarea v-else class="bg-white rounded p-1 font-md" style="height: 50rpx;max-width: 500rpx;"
					:adjust-position="false" v-model="text" @focus="mode = 'text'"  /> -->
			</view>

			<template v-if="text.length === 0">
				<!-- 表情 -->
				<free-icon-button><text class="iconfont font-lg"
						@click="openActionOrEmoticon('emoticon')">&#xe605;</text></free-icon-button>
				<!-- 扩展菜单 -->
				<free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</text>
				</free-icon-button>
			</template>
			<view v-else class="flex-shrink">
				<!-- 发送按钮 -->
				<!-- <view class="main-bg-color rounded flex align-center justify-center mr-2 px-2 pt-4" style="height: 70rpx;" @click="send('text')"> 发送
				</view> -->
				<free-main-button name="发送" @click="send('text')"></free-main-button>
			</view>
		</view>

		<!-- 录音提示 -->
		<view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
			style="bottom: 105rpx;">
			<view class="rounded flex flex-column align-center justify-center"
				style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);">
				<image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
				<text class="font text-white mt-3">{{unRecord?'松开手指，取消发送':'手指上滑，取消发送'}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef APP-NVUE
	const domModule = weex.requireModule('dom');
	// #endif
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeChatItem from '@/components/free-ui/free-chat-item.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import auth from '@/common/mixin/auth.js';
	export default {
		mixins: [auth],
		components: {
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeMainButton
		},
		watch: {
			mode(newValue, oldValue) {

				if (newValue !== 'action' && newValue !== 'emoticon') {
					this.$refs.action.hide();
				}

				if (newValue !== 'text') {
					uni.hideKeyboard()
				}
			}
		},
		// 生命周期
		mounted() {
			this.statusBarHeight = 0;
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
			// 监听键盘高度变化
			uni.onKeyboardHeightChange((res) => {
				if (this.mode !== 'action' && this.mode !== 'emoticon') {
					this.keyBoardHeight = res.height;
				}
				if (this.keyBoardHeight > 0) {
					this.pageToBottom()
				}
			})
			// 注册发送音频事件
			this.regSendVoiceEvent((url) => {
				if (!this.unRecord) {
					// 发送
					this.send('audio', url, {
						time: this.RecordTime
					})
				}
			});
		},
		onLoad(e) {
			if (!e.params) {
				return this.backToast();
			}
			// 初始化
			this.__init();
			this.detail = JSON.parse(e.params)

			// 创建聊天对象
			this.chat.createChatObject(this.detail)

			// 获取历史记录
			this.list = this.chat.getChatdetail()
			// 监听接收聊天信息
			uni.$on('onMessage', (message)=>{
				if(message.from_id === this.data.id && message.chat_type === this.detail.chat_type){
					this.list.push(message);
					// 置于顶部
				}
			})

			// uni.$on('updateHistory', this.updateHistory)

		},
		destroyed() {
			// 销毁聊天对象
			this.chat.destoryChatObject();
			// 销毁监听接收聊天消息
			uni.$off('onMessage',()=>{})
		},
		computed: {
			...mapState({
				RECORD: state => state.audio.RECORD,
				RecordTime: state => state.audio.RecordTime,
				chat: state => state.user.chat,
				totalNoreadnum:state=>state.user.totalNoreadnum
			}),
			// 所有信息的图片地址
			imageList() {
				var arr = [];
				this.list.forEach((item) => {
					if (item.type === 'emoticon' || item.type === 'image') {
						arr.push(item.data)
					}
				})
				return arr;
			},
			// 获取蒙版的位置
			maskBottom() {
				return this.keyBoardHeight + uni.upx2px(105)
			},
			// 动态获取菜单高度
			geMenusHeight() {
				let H = 100;
				return this.menus.length * H;
			},
			// 获取菜单的样式
			getMenusStyle() {
				return `height:${this.geMenusHeight}rpx;`;
			},
			// 是否是本人
			isdoSelf() {
				// 获取本人id（假设拿到了）
				let id = 1
				let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
				return user_id === id
			},
			// 获取操作菜单
			menusList() {
				return this.menus.filter(v => {
					if (v.name === '撤回' && this.isDoSelf) {
						return false;
					} else {
						return true;
					}
				})
			},
			// 聊天区域bottom
			chatBodyBottom() {
				return `bottom:${uni.upx2px(105) + this.keyBoardHeight}px;top:${this.navBarHeight}px`;
			},
			// 获取操作或者表情列表
			emoticonOrActionList() {
				if (this.mode === 'emoticon' || this.mode === 'action') {
					return this[this.mode + 'List'];
				} else {
					return [];
				}
			}
		},
		data() {
			return {
				// 模式 text输入文字 emoticon表情 action操作 audio音频
				mode: 'text',
				// 扩展菜单列表
				actionList: [
					[{
							name: "相册",
							icon: "/static/images/extends/pic.png",
							event: "uploadImage"
						},
						{
							name: "拍摄",
							icon: "/static/images/extends/video.png",
							event: "uploadVideo"
						},
						{
							name: "收藏",
							icon: "/static/images/extends/shoucan.png",
							event: ""
						},
						{
							name: "名片",
							icon: "/static/images/extends/man.png",
							event: ""
						},
						{
							name: "语音通话",
							icon: "/static/images/extends/phone.png",
							event: ""
						},
						{
							name: "位置",
							icon: "/static/images/extends/path.png",
							event: ""
						}
					]
				],
				// 表情包
				emoticonList: [
					[{
							name: "沮丧",
							icon: "/static/images/emoticon/5497/0.gif",
							event: ""
						},
						{
							name: "沮丧",
							icon: "/static/images/emoticon/5497/0.gif",
							event: ""
						}
					]
				],
				// 输入文字
				text: "",
				// 音频录制中
				isRecording: false,
				// 取消录音
				unRecord: false,
				// 当前气泡索引
				keyBoardHeight: 0,
				propIndex: 1,
				navBarHeight: 0,
				list: [],
				RecordingStartY: 0,
				detail: {
					id: 0,
					name: '',
					avatar: '',
					chat_type: 'user'
				},
				menus: [{
						name: '复制',
						event: ""
					},
					{
						name: '发送给朋友',
						event: ""
					},
					{
						name: '收藏',
						event: ""
					},
					{
						name: '删除',
						event: ""
					},
					{
						name: '多选',
						event: ""
					},
					{
						name: '撤回',
						event: "removeChatItem"
					}
				],

			}
		},
		methods: {
			...mapMutations(['regSendVoiceEvent']),
			__init() {
				var total = 24;
				var page = Math.ceil(total / 8);
				var arr = [];
				for (var i = 0; i < page; i++) {
					var start = i * 8;
					arr[i] = [];
					for (var j = 0; j <= 8; j++) {
						arr[i].push({
							name: '表情' + (start + j),
							icon: '/static/images/emoticon/5497/' + (start + j) + '.gif',
							event: 'sendEmoticon'
						})
					}
				}
				this.emoticonList = arr;
			},
			// 点击区域
			clickPage() {
				// 隐藏操作菜单
				this.$refs.action.hide();
				this.mode = 'text';
			},
			// 输入框聚焦
			// onInputClick(event) {
			// 	this.mode = 'text';
			// },
			// 事件分发
			actionEvent(e) {
				switch (e.event) {
					case 'uploadImage':
						uni.chooseImage({
							count: 9, //默认9
							success: (res) => {
								res.tempFilePaths.forEach((item) => {
									// 发送到服务器

									// 渲染到页面
									this.send('image', item);
								})
							}
						});
						break;
					case 'sendEmoticon': // 发送表情包
						this.send('emoticon', e.icon);
						break;
					case 'uploadVideo': // 发送短视频
						uni.chooseVideo({
							maxDuration: 10,
							success: (res) => {
								// 渲染页面
								this.send('video', res.tempFilePath);
								// 发送到服务端（获取视频封面，返回url）
								// 修改本地发送状态
							}
						})
						break;
				}
			},
			// 打开扩展菜单或者表情包
			openActionOrEmoticon(model = 'action') {
				this.mode = model;
				this.$refs.action.show();
				uni.hideKeyboard();
				this.keyBoardHeight = uni.upx2px(580);
			},

			// 发送
			send(type, data = '', options = {}) {
				// 组织数据格式
				switch (type) {
					case 'text':
						data = data || this.text
						break;
				}
				let message = this.chat.formatSendData({
					type,
					data,
					options
				})
				// 渲染到页面
				console.log('this.list：', this.list)
				let index = this.list.length
				this.list.push(message)
				// 监听上传进度
				let onProgress = false
				if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
					.startsWith('http')) {
					onProgress = (progress) => {
						console.log('上传进度：', progress);
					}
				}
				// 发送到服务端
				this.chat.send(message, onProgress).then(res => {
					console.log(res);
					// 发送成功
					this.list[index].id = res.id
					this.list[index].sendStatus = 'success'
				}).catch(err => {
					// 发送失败
					this.list[index].sendStatus = 'fail'
					console.log(err);
				})
				// 发送文字成功，清空输入框
				if (type === 'text') {
					this.text = ''
				}
				// 置于底部
				// this.pageToBottom()
			},
			// 长按消息气泡
			long(e) {
				this.propIndex = e.index;
				this.$refs.extend.show(e.x, e.y);
			},
			// 回到底部
			pageToBottom() {
				let chatItem = this.$refs.chatItem;
				let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0;

				let last = chatItem[lastIndex];
				// #ifdef APP-NVUE
				if (chatItem[lastIndex]) {
					domModule.scrollToElement(last, {});
				}
				// #endif
			},
			// 操作菜单方法分发
			clickEvent(event) {
				switch (event) {
					case 'removeChatItem': // 撤回消息
						// 拿到当前被操作的信息
						this.list[this.propIndex].isremove = true;
						break;
					default:
						break;
				}
				// 关闭菜单
				this.$refs.extend.hide();
			},
			// 预览图片
			previewImage(url) {
				// 预览图片
				uni.previewImage({
					current: url,
					urls: this.imageList,
					indicator: "default",
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 切换音频录制喝文本输入
			changeVoiceOrText() {
				this.mode = this.mode !== 'audio' ? 'audio' : 'text';
			},
			// 录音相关 
			// 录音开始
			voiceTouchStart(e) {
				this.isRecording = true;
				this.RecordingStartY = e.changedTouches[0].screenY;
				this.unRecord = false;
				// 开始录音
				this.RECORD.start({
					format: 'mp3'
				})
			},
			// 录音结束
			voiceTouchEnd() {
				this.isRecording = false;
				// 停止录音
				this.RECORD.stop();
			},
			// 录音打断
			voiceTouchCancel() {
				this.isRecording = false;
				this.unRecord = true;
				// 停止录音
				this.RECORD.stop();
			},
			voiceTouchMove(e) {
				var Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY);
				this.unRecord = (Y >= 80);
			},
			// 打卡聊天信息
			openChat() {
				uni.navigateTo({
					url: '/pages/chat/chat-set/chat-set'
				})
			}
		}
	}
</script>

<style>

</style>