uni-app 72聊天类封装-完善发送消息状态

Posted 2019ab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 72聊天类封装-完善发送消息状态相关的知识,希望对你有一定的参考价值。

chat.js

import $U from "./util.js";
import $H from './request.js';
class chat {
	constructor(arg) {
		this.url = arg.url
		this.isOnline = false
		this.socket = null
		// 获取当前用户相关信息
		let user = $U.getStorage('user');
		this.user = user ? JSON.parse(user) : {},
			// 初始化聊天对象
			this.TO = false;
		// 连接和监听
		if (this.user.token) {
			this.connectSocket()
		}
	}
	// 连接socket
	connectSocket() {
		console.log(this.user);
		this.socket = uni.connectSocket({
			url: this.url + '?token=' + this.user.token,
			complete: () => {}
		})
		// 监听连接成功
		this.socket.onOpen(() => this.onOpen())
		// 监听接收信息
		this.socket.onMessage((res) => this.onMessage(res))
		// 监听断开
		this.socket.onClose(() => this.onClose())
		// 监听错误
		this.socket.onError(() => this.onError())
	}
	// 监听打开
	onOpen() {
		// 用户状态上线
		this.isOnline = true;
		console.log('socket连接成功');

		// 获取用户离线消息
	}
	// 监听关闭
	onClose() {
		// 用户下线
		this.isOnline = false;
		this.socket = null;
		console.log('socket连接关闭');
	}
	// 监听消息
	onMessage(data) {
		console.log('监听消息', data);
	}
	// 监听连接错误
	onError() {
		// 用户下线
		this.isOnline = false;
		this.socket = null;
		console.log('socket连接错误');
	}
	// 关闭连接
	close() {
		this.socket.close()
	}
	// 创建聊天对象
	createChatObject(detail) {
		this.TO = detail;
		console.log('创建聊天对象', this.TO)
	}
	// 销毁聊天对象
	destoryChatObject() {
		this.TO = false
	}
	// 组织发送信息格式
	formatSendData(params) {
		return {
			id: 0, // 唯一id,后端生成,用于撤回指定消息
			from_avatar: this.user.avatar, // 发送者头像
			from_name: this.user.nickname || this.user.username, // 发送者昵称
			from_id: this.user.id, // 发送者id
			to_id: params.to_id || this.TO.id, // 接收人/群 id
			to_name: params.to_name || this.TO.name, // 接收人/群 名称
			to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
			chat_type: params.chat_type || this.TO.chat_type, // 接收类型
			type: params.type, // 消息类型
			data: params.data, // 消息内容
			options: params.options ? params.options : {}, // 其他参数
			create_time: (new Date()).getTime(), // 创建时间
			isremove: 0, // 是否撤回
			sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态,success发送成功,fail发送失败,pending发送中
		}
	}
	// 发送信息
	send(message) {
		return new Promise((result, reject) => {
			// 添加消息历史记录
			// let {
			// 	data,
			// 	k
			// } = this.addChatDetail(params, true);
			// 置顶消息记录

			// 验证是否上线
			$H.post('/chat/send', {
				to_id: this.TO.id,
				type: message.type,
				chat_type: this.TO.chat_type,
				data: message.data,
			}).then(res => {
				// 发送成功
				message.id = res.id 
				message.sendStatus = 'success'
				result(res);
			}).catch(err => {
				// 发送失败
				message.sendStatus = 'fail'
				// 断线重连提示
				result(err);
			});
		})

	}
}
export default chat

chat.vue

<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar title="呵呵呵呵" :noreadnum="1" 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">

			<block 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>
			</block>
			<!-- 右边 -->
			<!-- 	<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 class="bg-white rounded p-1 font-md" style="height: 50rpx;max-width: 500rpx;" :adjust-position="false"
					v-model="text" @click="onInputClick" />
			</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以上是关于uni-app 72聊天类封装-完善发送消息状态的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 71聊天类封装-组织发送消息格式

uni-app 79聊天类封装(十四)-处理接收消息

uni-app 67聊天类封装-创建销毁聊天对象

uni-app 73聊天类封装-添加聊天记录

uni-app 74聊天类封装-更新指定聊天记录

uni-app 75聊天类封装-更新会话列表