【uniapp】腾讯云即时通信+直播云-小程序对接（上）
腾讯云即时通信+直播云-小程序对接（上）
·
腾讯云即时通信+直播云-小程序对接（上）
文章目录
项目背景
对接第三方直播，实现小程序以直播云为背景+即时通信的覆盖聊天，实现直播的聊天互动
提示：以下是本篇文章正文内容，下面案例可供参考
一、即时通信！
步骤一，页面蒙版框，使到最后监听到的聊天信息显示到屏幕
代码如下（示例）：
<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哦！
总结
截止这里，即时通讯模块，完成，不懂的地方可以找我花神！
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
4
0- 0
已为社区贡献8条内容
所有评论(0)