腾讯云即时通信+直播云-小程序对接（上）

---

---

项目背景

对接第三方直播，实现小程序以直播云为背景+即时通信的覆盖聊天，实现直播的聊天互动

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、即时通信！

步骤一，页面蒙版框，使到最后监听到的聊天信息显示到屏幕

代码如下（示例）：

<view>
		<scroll-view scroll-y="true" class="box" :scroll-into-view="intoindex">
				<view :id="'text'+index" class="charitem" v-for="(item,index) in misslist" :key="index" v-if="item.text">
						{{item.text}}
				</view>
		</scroll-view>
</view>

注意问题一，页面蒙版框要固定在屏幕上，要有固定高度

注意问题二，此时的聊天的最新消息没有始终显示在屏幕上，想要的效果是最新消息要把旧消息顶上去

步骤二，实现消息最新显示把旧消息顶上去

scroll-into-view 是 scroll-view 的一个属性，主要作用是用于滚动到指定元素的位置，其对应值是
元素的id

1，页面中scroll-view书写scroll-into-view，给里面的加上动态 id

代码如下（示例）：

2，等监听消息写好，通过改变intoindex使之用于滚动到指定元素的位置

that.intoindex = "text" + Number(that.misslist.length - 1)

…
…

提示：引入腾讯云第三方插件，我大致写一下，整体细节请打开官方文档

1.即时通讯，引入sdk

即时通讯官方地址：https://cloud.tencent.com/document/product/269/1498

代码如下（示例）：

// IM 小程序 SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-wx-sdk --save
// 发送图片、文件等消息需要腾讯云 即时通信 IM 上传插件
npm install tim-upload-plugin --save

2.在项目脚本里引入模块

注意的是：uniapp中，为保证后续的问题，引入的模块建议放在全局模块下

代码如下（示例）：

import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
const _SDKAPPID = XXXXX;
const _SECRETKEY = 'XXXXXX';
let options = {
	SDKAppID: _SDKAPPID // 接入时需要将 0 替换为您的云通信应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
tim.setLogLevel(1); // 普通级别，日志量较多，接入时建议使用
tim.registerPlugin({
	'tim-upload-plugin': TIMUploadPlugin
});
console.log(tim,"tim")
// export default tim

这里定义全局变量，方便其他页面接收参数

Vue.prototype.$tim = tim;
Vue.prototype.$TIM = TIM;

截止到这一步，即时通信的导入和配置就完成了，在项目中就可以直接使用tim和TIM

3.在页面中使用tim和TIM并登录即时通信

登录时，还得 生成 UserSig，这个可以后端生成，也可以前端生成

1.生成 UserSig，引入js

链接：https://github.com/TencentCloud/TIMSDK/blob/master/Web/Demo/debug/GenerateTestUserSig.js

import LibGenerateTestUserSig from '@/js/lib-generate-test-usersig-es.min.js'
//在methods里面,传入用户id，也就是用户名，这个不用非得是用户id
genTestUserSig(userID) {
				var SDKAPPID = xxx;
				var EXPIRETIME = xx;
				var SECRETKEY = 'xx';
				var generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
				var userSig = generator.genTestUserSig(userID);
				return {
					sdkappid: SDKAPPID,
					userSig: userSig
				};
			},

2.登录

that.userid = ""//获取用户名
that.UserSig = that.genTestUserSig(that.userid)//生成UserSig

// 先登出，后登录
			let getlogin = that.$tim.login({
				userID: that.userid,
				userSig: that.UserSig.userSig
			});
			getlogin.then(function(imResponse) {
				console.log(imResponse, "登陆成功"); // 登录成功
				if (imResponse.data.repeatLogin === true) {
					// 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
					console.log(imResponse.data.errorInfo);
				}
			}).catch(function(imError) {
				console.warn('重复登录', imError); // 登录失败的相关信息
			});

截止到这一步，即时通讯的导入和登录就okl！

4.创建聊天群并加入（注意，必须处于登录状态才可以创建聊天群）

1.写页面 function，使之等登录状态创建

//注意：这一步的vue，可以让你在生命周期外调用methods里面的方法
//js中
let vue = {}
//记住在created里面!!!!!!!!
created() {
	vue = this
},

//js中
function onsdkReady() {
		setTimeout(() => {
			console.log(vue, '创建直播房');
			vue.creatgroup()
		}, 1000)
	}

// 创建直播群
			creatgroup(event) {
				let that = this
				let creatpromise = that.$tim.createGroup({
					type: that.$TIM.TYPES.GRP_AVCHATROOM,
					name: 'group1',//群名
					groupID: that.live_group_id,//这是获取后台的群id
				});
				creatpromise.then(function(imResponse) { // 创建成功
					console.log(imResponse.data.group, "创建成功"); // 创建的群的资料
					//申请加群
					that.addgroup()
				}).catch(function(imError) {
					console.warn('创建失败:', imError); // 创建群组失败的相关信息
				});

			},

//申请加群
			addgroup() {
				let that = this
				let promise = that.$tim.joinGroup({
					groupID: that.live_group_id,//这是获取后台的群id
					type: that.$TIM.TYPES.GRP_AVCHATROOM
				});
				promise.then(function(imResponse) {
					console.log(imResponse, "000")
					switch (imResponse.data.status) {
						case that.$TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
							console.log(imResponse.data.group, "等待管理员同意"); // 加入的群组资料
							break;
						case that.$TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
							console.log(imResponse.data.group, "加群成功"); // 加入的群组资料
							break;
						case that.$TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
							console.log(imResponse.data.group, "已在群中"); // 加入的群组资料
							break;
						default:
							break;
					}
				}).catch(function(imError) {
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});
			},

5.发送聊天信息

//发送消息
			onput() {
				let that = this
				let text6 = ""
				//这一步看项目需求，这里是拼凑发送人的名字和内容，使发送的时候可以看见谁发送的
				text6 = uni.getStorageSync("nickname") + ":" + that.texts
				let message = that.$tim.createTextMessage({
					to: that.live_group_id,
					conversationType: that.$TIM.TYPES.CONV_GROUP,
					payload: {
						text: text6
					}
				});
				// 2. 发送消息
				let promisemiss = that.$tim.sendMessage(message);
				promisemiss.then(function(imResponse) {
					// 发送成功
					that.texts = "",
						console.log(imResponse, "成功发送消息");

				}).catch(function(imError) {
					// 发送失败
					console.warn('sendMessage error:', imError);
				});

			},

6.监听聊天信息（不仅登录，而且，必须建群成功才可以监听）

//js中
function oncreatmiss(event) {
		console.log(event, "0")
		vue.listinmiss(event)
	}

//监听消息
	listinmiss(event) {
				let that = this
				let listgroup = []
				// 收到群组列表更新通知，可通过遍历 event.data 获取群组列表数据并渲染到页面
				// event.name - TIM.EVENT.GROUP_LIST_UPDATED
				// event.data - 存储 Group 对象的数组 - [Group]
				listgroup = event.data;
				listgroup.forEach((item, index) => {
					that.misslist.push(item.lastMessage.payload)

				})
				//这一步就是为了滚动到聊天的当前位置
				setTimeout(() => {
					that.intoindex = "text" + Number(that.misslist.length - 1)
				}, 100)
			},

7.肯定不成功，因为你没有onload中监听事件

//创建群组
			that.$tim.on(that.$TIM.EVENT.SDK_READY, onsdkReady);
//消息监听
			that.$tim.on(that.$TIM.EVENT.GROUP_LIST_UPDATED, oncreatmiss);

7.切记，在你关闭直播的时候，解散群，登出一系列步骤

//解散群
			editgroup() {
				let that = this
				let dispromise = that.$tim.dismissGroup(that.live_group_id);
				dispromise.then(function(imResponse) { // 解散成功
					console.log(imResponse.data.groupID); // 被解散的群组 ID
				}).catch(function(imError) {
					console.warn('dismissGroup error:', imError); // 解散群组失败的相关信息
				});
			},

//登出
	that.$tim.logout();

8.最后还得取消监听才算功成圆满

	onUnload() {
			let that = this
			//凡是监听的这里大多数都得取消监听，我就不一一写了，底下这个是模板	
			that.$tim.off(that.$TIM.EVENT.MESSAGE_RECEIVED, onsdkReady);
		},

所有地方不能忘记let that = this哦！

---

总结

截止这里，即时通讯模块，完成，不懂的地方可以找我花神！