uni-app使用腾讯IM即时通讯

本是古典何须时尚 2023-01-13 10:40 489阅读 0赞

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

## 基本配置 ##

*  **List item**

在官网找到需要的SDK下载，并放到自己的项目中[下载地址传送门][Link 2]  
![我的是这个][20210418141010329.png]

*  **在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里面会更好**

## 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、获取对方资料 ##

## 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、接收消息 ##

## 9、发送消息 ##

[Link 1]: https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/module-EVENT.html#.SDK_READY
[Link 2]: https://cloud.tencent.com/document/product/269/36887
[20210418141010329.png]: /images/20221022/ad210957389649b799649bd44f7129a7.png