uni-app使用腾讯IM即时通讯
这段时间接触到了即时通讯,今天整理出来官方文档地址:文档地址基本配置List item在官网找到需要的SDK下载,并放到自己的项目中下载地址传送门在main.js引入import TIM from 'tim-js-sdk';import TIMUploadPlugin from 'tim-upload-plugin';Vue.prototype.$TIM = TIMVue.prototype.$T
·
这段时间接触到了即时通讯,今天整理出来
官方文档地址:文档地址
基本配置
- 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、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); // 登录失败的相关信息
});
2、IM退出
这块代码建议写在退出页 现在觉得写在app.vue里面onHide会更好
let tim = this.$TIM.create({SDKAppID: 1400504461});
tim.logout();
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); // 获取会话列表失败的相关信息
});
4、监听新消息
这个方法在只写一遍就行了
一个页面写完,别的页面也会有新消息也会触发,不知道为什么,欢迎大佬指点
// 监听新消息
let onMessageReceived = (event) =>{
console.log('我正在监听新消息')
};
tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
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); // 获取其他用户资料失败的相关信息
});
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)
})
7、已读上报
如果不走此方法,所有收到的消息都将显示未读
tim.setMessageRead({ conversationID: 'C2C' + '对方id' });
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);
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);
});
更多推荐
已为社区贡献7条内容
所有评论(0)