uni-app使用腾讯IM即时通讯_uniapp im消息聊天前端

这段时间接触到了即时通讯，今天整理出来
官方文档地址：文档地址

基本配置

• List item

在官网找到需要的SDK下载，并放到自己的项目中下载地址传送门

• 在main.js引入

import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
Vue.prototype.$TIM = TIM
Vue.prototype.$TIMUploadPlugin = TIMUploadPlugin
1
2
3
4

1、IM登录

这块代码建议写在登录页登录时 现在觉得写在app.vue里面会更好

let tim = this.$TIM.create({SDKAppID: '你的SDKAppID'}); // SDK 实例通常用 tim 表示
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
tim.registerPlugin({'tim-upload-plugin': this.$TIMUploadPlugin});
				
// 登录
let promise = tim.login({userID: '你的userID', userSig: '你的userSig'});
promise.then(function(imResponse) {
	console.log(imResponse.data); // 登录成功
	if (imResponse.data.repeatLogin === true) {
		 // 标识账号已登录，本次登录操作为重复登录
		 console.log('即时通讯登录成功',imResponse.data.errorInfo);
	}
}).catch(function(imError) {
	 console.log('即时通讯login error:', imError); // 登录失败的相关信息
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、IM退出

这块代码建议写在退出页 现在觉得写在app.vue里面onHide会更好

let tim = this.$TIM.create({SDKAppID: 1400504461}); 
tim.logout();
1
2

3、拉取会话列表

// 拉取会话列表
let promise = tim.getConversationList();
promise.then((imResponse)=> {
	const conversationList = imResponse.data.conversationList; 
	// 会话列表，用该列表覆盖原有的会话列表
	 console.log('会话列表',conversationList)
	 
}).catch((imError)=> {	
	//这块再登录一次是为了避免因刷新等问题而掉线，掉线重新走一遍登录（感觉这里有问题，暂时走的通）
	//因为官网文档上给的是只有退出登录后才会触发监听（比较奇怪）
	tim.registerPlugin({'tim-upload-plugin': this.$TIMUploadPlugin});
	tim.login({userID: '你的userID', userSig: '你的userSig'});
	console.log( imError); // 获取会话列表失败的相关信息
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、监听新消息

这个方法在只写一遍就行了
一个页面写完，别的页面也会有新消息也会触发，不知道为什么，欢迎大佬指点

// 监听新消息
let onMessageReceived = (event) =>{
	console.log('我正在监听新消息')
};
tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
1
2
3
4
5

5、获取对方资料

let promise = tim.getUserProfile({userIDList: ['对方id']});
promise.then((imResponse) => {
	console.log(imResponse)				
}).catch((imError)=> {
	//和上面同理，防止登录失败
	tim.registerPlugin({'tim-upload-plugin': this.$TIMUploadPlugin});
	tim.login({userID: '你的userID', userSig: '你的userSig'});
	console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
});
1
2
3
4
5
6
7
8
9

6、获取聊天信息

• 这里每次只能最多获取15条聊天信息，设置当页面滚动到最顶部时再次触发
• 初始获取聊天信息发送请求中nextReqMessageID为空，返回的参数中会带有这个参数，续拉的时候传进去即可。
• 如果拉完了所有消息，返回的参数isCompleted则为true,此时该方法就不能再次调用
• 再次调用记得倒叙在list开头插入imResponse.data.messageList.reverse().map(res => {this.list.unshift(res)})

// 获取聊天信息
let todayTime = new Date(new Date().toLocaleDateString()).getTime() / 1000 // 当天0点时间戳
let promises = tim.getMessageList({
	conversationID: 'C2C' + this.id,
	nextReqMessageID: this.nextReqMessageID,
	count: 15
});
promises.then((imResponse) => {
	console.log(imResponse)
	this.nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段
	console.log('nextReqMessageID', this.nextReqMessageID)
	if (imResponse.data.isCompleted) this.isCompleted = true
	const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
	console.log('是否已经拉完所有消息', isCompleted)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7、已读上报

如果不走此方法，所有收到的消息都将显示未读

tim.setMessageRead({	conversationID: 'C2C' + '对方id'	});
1

8、接收消息

let tim = this.$TIM.create({SDKAppID: this.$store.state.SDKAppID});
// 接收消息
let onMessageReceived = (event) => {
	event.data.map(res => {
		console.log('聊天页面的我正在监听新消息')
		this.list.push(res)
		setTimeout(()=>{
			uni.pageScrollTo({scrollTop: 2000000,duration : 0})
		},10)
					// 已读上报
		let promisess = tim.setMessageRead({
			conversationID: 'C2C' + this.id
		});
	})
};
tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9、发送消息

let tim = this.$TIM.create({SDKAppID: this.$store.state.SDKAppID});

let message = tim.createTextMessage({
	to: this.id,
	conversationType: this.$TIM.TYPES.CONV_C2C,
	payload: {
		text: '要发送的消息'
	}
});
// 发送消息
let promise = tim.sendMessage(message);
promise.then((imResponse) => {
	console.log( imResponse);
	this.list.push(imResponse.data.message)
	setTimeout(()=>{
		uni.pageScrollTo({scrollTop: 2000000,duration : 0})
	},10)
}).catch((imError) => {
	// 发送失败
	console.warn('sendMessage error:', imError);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21