| 【uniapp】腾讯云即时通信+直播云 | 您所在的位置：网站首页 › h5接入腾讯云直播 › 【uniapp】腾讯云即时通信+直播云 |
【uniapp】腾讯云即时通信+直播云
|
腾讯云即时通信+直播云-小程序对接（上）
文章目录
腾讯云即时通信+直播云-小程序对接（上）项目背景一、即时通信！步骤一，页面蒙版框，使到最后监听到的聊天信息显示到屏幕步骤二，实现消息最新显示把旧消息顶上去1，页面中scroll-view书写scroll-into-view，给里面的加上动态 id2，等监听消息写好，通过改变intoindex使之用于滚动到指定元素的位置
1.即时通讯，引入sdk即时通讯官方地址：https://cloud.tencent.com/document/product/269/1498
2.在项目脚本里引入模块3.在页面中使用tim和TIM并登录即时通信1.生成 UserSig，引入js2.登录
4.创建聊天群并加入（注意，必须处于登录状态才可以创建聊天群）1.写页面 function，使之等登录状态创建
5.发送聊天信息6.监听聊天信息（不仅登录，而且，必须建群成功才可以监听）7.肯定不成功，因为你没有onload中监听事件7.切记，在你关闭直播的时候，解散群，登出一系列步骤8.最后还得取消监听才算功成圆满所有地方不能忘记let that = this哦！
总结截止这里，即时通讯模块，完成，不懂的地方可以找我花神！
项目背景
对接第三方直播，实现小程序以直播云为背景+即时通信的覆盖聊天，实现直播的聊天互动 提示：以下是本篇文章正文内容，下面案例可供参考 一、即时通信！ 步骤一，页面蒙版框，使到最后监听到的聊天信息显示到屏幕代码如下（示例）： {{item.text}} 注意问题一，页面蒙版框要固定在屏幕上，要有固定高度 注意问题二，此时的聊天的最新消息没有始终显示在屏幕上，想要的效果是最新消息要把旧消息顶上去 步骤二，实现消息最新显示把旧消息顶上去scroll-into-view 是 scroll-view 的一个属性，主要作用是用于滚动到指定元素的位置，其对应值是 元素的id 1，页面中scroll-view书写scroll-into-view，给里面的加上动态 id代码如下（示例）：
… … 提示：引入腾讯云第三方插件，我大致写一下，整体细节请打开官方文档 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哦！ 总结 截止这里，即时通讯模块，完成，不懂的地方可以找我花神！ |
【本文地址】
公司简介
联系我们