创新实训——飞讯（九）

leaf_er

已于 2022-06-07 23:42:31 修改

阅读量171

点赞数

分类专栏：项目实训文章标签： javascript vue.js

于 2022-06-06 23:16:34 首次发布

本文链接：https://blog.csdn.net/leaf_er/article/details/125151250

版权

项目实训专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文档详细介绍了聊天界面的即时通讯（IM）交互流程，包括初始化SDK、接收新消息、播放语音、视频及定位等核心功能。在初始化阶段，通过会话ID和类型获取用户资料和消息列表。在聊天信息处理中，实现了文本、图片、视频、文件、位置等消息类型的发送，并提供了播放和操作功能。此外，还涉及到了消息的读取、提交和更新。

摘要由CSDN通过智能技术生成

聊天界面的im交互

一、初始化

二、聊天信息相关功能

聊天界面的im交互

一、初始化

创建sdk实例，初始化sdk;

跳转到该页面时，接收跳转前页面传来的会话id、会话对象id和会话类型，设置消息监听，用以接受新消息时进行处理。

之后，获取个人资料、根据会话类型调用相应的获取会话对象资料接口、并拉取相应会话的消息列表，存储在相应变量中。

onLoad:function(options){
	this.conversationID = options.conversationID;
	this.detailsId = options.userid;
	this.type = options.type;
	//console.log(this.detailsId);

	//this.getMsg(this.nowpage);
	//this.nextPage();
	
},
onShow:function(options){
	
	tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event)=> {
	  this.getMsg();
	});
},
onReady() {
	this.getMyInfo();
	
	if(this.type == 1){
		this.getDetails();
	}
	else if(this.type == 0){
		this.getGroup();
		this.getMemberList();
	}
	
	this.getMsg();
},

部分im接口调用：

getMsg:function(){
	let promise = tim.getMessageList({conversationID: this.conversationID, count: 15});
	promise.then((imResponse)=> {
	  const messageList = imResponse.data.messageList; // 消息列表。
	  const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
	  const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
	  this.message = messageList;
	  this.nextReqMessageID = nextReqMessageID;
	  this.isCompleted = isCompleted;

	  this.msgReaded();
	  let len = this.message.length;
	  this.$nextTick(function(){
		this.scrollToView = 'msg' + len;
	  },0)
	});
},

二、聊天信息相关功能

播放语音：调用uniapp自带播放函数，传递语音地址url进行播放；

播放视频：点击后跳转到另一个播放视频页面，传递视频url，使用video组件播放视频；

地图定位：点击定位信息后根据消息内的经纬度和地点名称，调用uniapp的相关接口；

playVoice:function(e){
	innerAudioContext.src = e;
	innerAudioContext.play();
},
playVideo:function(e){
	uni.navigateTo({
		url:"../video/video?videourl=" + e,
	})
},
openLocation:function(e){
	uni.openLocation({
		latitude:e.latitude,
		longitude:e.longitude,
		name:e.description,
		success:function(){
			console.log('success');
		}
	});
},

提交输入信息：

从提交组件部分传来要提交的信息，根据其中的对话和消息类型设置参数和确定要调用的函数。

inputs:function(e){
	let conversationType = TIM.TYPES.CONV_C2C;
	if(this.type == 1){
		conversationType = TIM.TYPES.CONV_C2C;
	}
	else if(this.type == 0){
		conversationType = TIM.TYPES.CONV_GROUP
	}
	
	if(e.types == 0){
		//console.log(e.message);
		// 发送文本消息，Web 端与小程序端相同
		// 1. 创建消息实例，接口返回的实例可以上屏
		let message = tim.createTextMessage({
		  to: this.detailsId,
		  conversationType: conversationType,
		  // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
		  // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
		  // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
		  payload: {
			text: e.message
		  },
		  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
		  // cloudCustomData: 'your cloud custom data'
		});
		// 2. 发送消息
		let promise = tim.sendMessage(message);
		promise.then((imResponse)=> {
		  // 发送成功
		  this.getMsg(1);
		}).catch((imError)=> {
		  // 发送失败
		  console.warn('sendMessage error:', imError);
		});
	}
	else if(e.types == 1){
		// Web 端发送图片消息示例1 - 传入 DOM 节点	
		// 1. 创建消息实例，接口返回的实例可以上屏
		let message = tim.createImageMessage({
		  to: this.detailsId,
		  conversationType: conversationType,
		  // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
		  // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
		  // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
		  payload: {
			file: e.message,
		  },
		  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
		  // cloudCustomData: 'your cloud custom data'
		  onProgress: function(event) { console.log('file uploading:', event) }
		});
		// 2. 发送消息
		let promise = tim.sendMessage(message);
		promise.then((imResponse)=> {
		  // 发送成功
		  this.getMsg(1);
		}).catch(function(imError) {
		  // 发送失败
		  uni.showToast({
			title:"发送图片失败",
			duration:2000
		  })
		  console.warn('sendMessage error:', imError);
		});
	}
	else if(e.types == 2){
		let message = tim.createVideoMessage({
			  to: this.detailsId,
			  conversationType: conversationType,
			  payload: { 
				  file: e.message,
				  },
			  onProgress: function(event) { console.log('file uploading:', event) }
			});
			// 2. 发送消息
			let promise = tim.sendMessage(message);
			promise.then((imResponse)=> {
			  // 发送成功
			  this.getMsg(1);
			}).catch(function(imError) {
			  // 发送失败
			  uni.showToast({
				title:"发送视频失败",
				duration:2000
			  })
			  console.warn('sendMessage error:', imError);
			});
	}
	else if(e.types == 3){
		let message = tim.createFileMessage({
			  to: this.detailsId,
			  conversationType: conversationType,
			  payload: { 
				  file: e.message,
				  },
			  onProgress: function(event) { console.log('file uploading:', event) }
			});
			// 2. 发送消息
			let promise = tim.sendMessage(message);
			promise.then((imResponse)=> {
			  // 发送成功
			  this.getMsg(1);
			}).catch(function(imError) {
			  // 发送失败
			  console.warn('sendMessage error:', imError);
			});
	}
	else if(e.types == 4){
		// 发送地理位置消息，Web 端与小程序端相同（v2.15.0起支持）
		// 1. 创建消息实例，接口返回的实例可以上屏
		let message = tim.createLocationMessage({
		  to: this.detailsId,
		  conversationType: conversationType,
		  // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
		  // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
		  // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
		  payload: {
			description: e.message.name,
			longitude: e.message.longitude, // 经度
			latitude: e.message.latitude // 纬度
		  }
		});
		// 2. 发送消息
		let promise = tim.sendMessage(message);
		promise.then(function(imResponse) {
		  // 发送成功
		}).catch(function(imError) {
		  // 发送失败
		  console.warn('sendMessage error:', imError);
		});
	}
	else if(e.types == 5){
		if(this.type == 1){
			TUICalling.call({ userID: this.detailsId, type: 1 });
		}
		else if(this.type == 0){
			let userIDs = [];
			for (let i = 0; i < this.memberList.length; i++) {
				userIDs.push(this.memberList[i].userID);
			}
			TUICalling.groupCall({ userIDList: userIDs, type: 1 });
		}
		
	}
	else if(e.types == 6){
		if(this.type == 1){
			TUICalling.call({ userID: this.detailsId, type: 2 });
		}
		else if(this.type == 0){
			let userIDs = [];
			for (let i = 0; i < this.memberList.length; i++) {
				userIDs.push(this.memberList[i].userID);
			}
			//console.log(userIDs);
			TUICalling.groupCall({ userIDList: userIDs, type: 2 });
		}
	}
	else if(e.types == 7){
		const message = tim.createAudioMessage({
			to: this.detailsId,
			conversationType: conversationType,
			payload: {
			  file: e.message.voice
			},
		  let promise = tim.sendMessage(message);
		  promise.then((imResponse)=> {
			// 发送成功
			this.getMsg(1);
			console.log(imResponse);
		  }).catch(function(imError) {
			// 发送失败
			console.warn('sendMessage error:', imError);
		  });
	}
	
	let len = this.message.length;
	this.$nextTick(function(){
		this.scrollToView = 'msg' + len;
	},0)
},