伪直播接入IM流程
作者:互联网
一、接入流程
步骤1:创建应用
- 登录 即时通信IM控制台
- 创建新应用
- 记录该应用的SDKAppID信息
步骤2:创建AVChatRoom
可以通过控制台创建群组,也可以通过调用 创建群组API 创建群组
通过控制台创建直播群步骤:
- 登录即时通信IM控制台,单击目标应用卡片。
- 在左侧导航栏选择群组管理,单击添加群组
- 输入群名称,选填群主ID,选择群类型为直播群
- 单击确认,待群组创建成功后,记录群ID
步骤3:集成SDK
npm install tim-js-sdk --save-dev
步骤4:创建SDK实例
// 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let options = {
SDKAppID: 0 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
}
let tim = TIM.create(options) // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别,详细分级请参考 setLogLevel 接口的说明
tim.setLogLevel(0) // 普通级别,日志量较多,接入时建议使用
tim.on(TIM.EVENT.SDK_READY, function (event) {
// SDK ready 后接入侧才可以调用 sendMessage 等需要鉴权的接口,否则会提示失败!
// event.name - TIM.EVENT.SDK_READY
})
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
// 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
// event.name - TIM.EVENT.MESSAGE_RECEIVED
// event.data - 存储 Message 对象的数组 - [Message]
const length = event.data.length
let message
for (let i = 0; i < length; i++) {
// Message 实例的详细数据结构请参考 Message
// 其中 type 和 payload 属性需要重点关注
// 从v2.6.0起,AVChatRoom 内的群聊消息,进群退群等群提示消息,增加了 nick(昵称) 和 avatar(头像URL) 属性,便于接入侧做体验更好的展示
// 前提您需要先调用 updateMyProfile 设置自己的 nick(昵称) 和 avatar(头像 URL),请参考 updateMyProfile 接口的说明
message = event.data[i]
switch (message.type) {
case TIM.TYPES.MSG_TEXT:
// 收到了文本消息
this._handleTextMsg(message)
break
case TIM.TYPES.MSG_CUSTOM:
// 收到了自定义消息
this._handleCustomMsg(message)
break
case TIM.TYPES.MSG_GRP_TIP:
// 收到了群提示消息,如成员进群、群成员退群
this._handleGroupTip(message)
break
case TIM.TYPES.MSG_GRP_SYS_NOTICE:
// 收到了群系统通知,通过 REST API 在群组中发送的系统通知请参考 在群组中发送系统通知 API
this._handleGroupSystemNotice(message)
break
default:
break
}
}
})
_handleTextMsg(message) {
// 详细数据结构请参考 TextPayload 接口的说明
console.log(message.payload.text) // 文本消息内容
}
_handleCustomMsg(message) {
// 详细数据结构请参考 CustomPayload 接口的说明
console.log(message.payload)
}
_handleGroupTip(message) {
// 详细数据结构请参考 GroupTipPayload 接口的说明
switch (message.payload.operationType) {
case TIM.TYPES.GRP_TIP_MBR_JOIN: // 有成员加群
break
case TIM.TYPES.GRP_TIP_MBR_QUIT: // 有群成员退群
break
case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT: // 有群成员被踢出群
break
case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN: // 有群成员被设为管理员
break
case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN: // 有群成员被撤销管理员
break
case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED: // 群组资料变更
//从v2.6.0起支持群组自定义字段变更内容
// message.payload.newGroupProfile.groupCustomField
break
case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED: // 群成员资料变更,例如群成员被禁言
break
default:
break
}
}
_handleGroupSystemNotice(message) {
// 详细数据结构请参考 GroupSystemNoticePayload 接口的说明
console.log(message.payload.userDefinedField) // 用户自定义字段。使用 RESTAPI 发送群系统通知时,可在该属性值中拿到自定义通知的内容。
// 用 REST API 发送群系统通知请参考 在群组中发送系统通知 API
}
步骤5:登录SDK
let promise = tim.login({userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
console.log(imResponse.data); // 登录成功
}).catch(function(imError) {
console.warn('login error:', imError); // 登录失败的相关信息
});
步骤6:设置自己的昵称和头像
let promise = tim.updateMyProfile({
nick: '我的昵称',
avatar: 'http(s)://url/to/image.jpg'
});
promise.then(function(imResponse) {
console.log(imResponse.data); // 更新资料成功
}).catch(function(imError) {
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
});
步骤7:加入群组
// 匿名用户加入(无需登录,入群后仅能接收消息)
let promise = tim.joinGroup({ groupID: 'avchatroom_groupID'});
promise.then(function(imResponse) {
switch (imResponse.data.status) {
case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
break
case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
console.log(imResponse.data.group) // 加入的群组资料
break
case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
break
default:
break
}
}).catch(function(imError){
console.warn('joinGroup error:', imError) // 申请加群失败的相关信息
});
步骤8:创建消息实例并发送
// 发送文本消息,Web 端与小程序端相同
// 1. 创建消息实例,接口返回的实例可以上屏
let message = tim.createTextMessage({
to: 'avchatroom_groupID',
conversationType: TIM.TYPES.CONV_GROUP,
// 消息优先级,用于群聊(v2.4.2起支持)。如果某个群的消息超过了频率限制,后台会优先下发高优先级的消息,详细请参考 消息优先级与频率控制
// 支持的枚举值:TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL(默认), TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
payload: {
text: 'Hello world!'
}
})
// 2. 发送消息
let promise = tim.sendMessage(message)
promise.then(function(imResponse) {
// 发送成功
console.log(imResponse)
}).catch(function(imError) {
// 发送失败
console.warn('sendMessage error:', imError)
})
二、踩坑
【1】用服务端 API 进行禁言或者设置管理员后,没有触发MESSAGE_RECEIVED事件,无法对此做出相应的变化
- 举个例子: a 管理员 设置 b为管理员(老师/助手),需要监听这些状态,在b的界面,更新b的权限,不然由于不刷新,在b那里,权限还是普通用户,发消息没有标记管理员 。
- 解决:让后端调用服务端接口,通过App管理员账号在群中发送系统通知,前端通过接收通知判断当前用户是否需要更新权限或其他。
【2】play() can only be initiated by a user gesture
- 问题描述:部分设备如测试机nova9,在没有任何其他操作的情况下,视频无法自动播放,会提示
play() can only be initiated by a user gesture
。 - 解决:针对安卓设备,监听触摸事件,用户有触摸操作后,再播放视频。
【3】视频设置currentTime问题
- 问题描述:有些iphone设备,调用play方法播放视频,再设置视频的currentTime,视频一直从头开始,不会从设置的currentTime开始播放。
- 解决方案:监听视频播放事件,当播放的时候再设置currentTime。
三、相关文档
● 接入说明文档:https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html
● 登录鉴权:https://cloud.tencent.com/document/product/269/31999
● SDK 更新日志: https://cloud.tencent.com/document/product/269/38492
● SDK 接口文档: https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html
● 常见问题: https://web.sdk.qcloud.com/im/doc/zh-cn/tutorial-01-faq.html
● 反馈问题?戳我提 issue: https://github.com/tencentyun/TIMSDK/issues
● 问答:https://cloud.tencent.com/developer/tag/126?entry=ask
● 参数:https://web.sdk.qcloud.com/im/doc/zh-cn/Profile.html
● 实现群直播功能:https://cloud.tencent.com/document/product/269/43002
标签:case,接入,群组,break,TIM,直播,IM,message,TYPES 来源: https://www.cnblogs.com/let423/p/16463333.html