组播带货组件使用文档
直播带货组件是对直播带货场景中使用即时通信IM能力的二次封装,在封装基本的收发消息能力的同时,针对直播带货场景封装了点赞,送礼,商品推送,优惠券领取等相关的能力。
一、组件使用前置条件
- 创建即时通信IM应用
- 创建群自定义字段
- attent
- 作用 记录自己关注了哪些主播
- attent
- 创建群成员自定义字段
- add_goods
- 作用 后台上架新的直播间商品列表
- room_status
- 作用 控制直播间状态
- add_goods
二、sdk接入
- 引入IM SDK
npm i tim-js-sdk --save
- 引入直播带货sdk
npm i im-live-sells --save
三、组件参数
- SDKAppID
- 即时通信应用ID,SDKAppID可在腾讯云即时通信IM控制台上创建应用,SDKAppID可在应用基本信息模块获取,开始创建的应用为体验版,可永久免费试用,但配置有限,不适合正式环境试用。正式环境可购买旗舰版或专业版
- userSig
- 即时通信IM用户签名,UserSig为登录腾讯云即时通信IM SDK的必要参数,可在业务后台生成后返回给前端使用,生成文档与代码可参考这篇文档
- roomID
- 直播间群聊房间ID,此ID为即时通信IM所创建的实时音视频(AVCHATROOM)房间ID,该房间无加入人数限制可通过即时通信IM群组管理创建,或通过restapi创建
- TIM
- 即时通信IM SDK,如是在小程序环境,请使用tim-wx-sdk,web环境则使用tim-js-sdk
- userName
- 与生成userSig的userName一致
四、初始化示例
import TIMLiveSell from 'im-live-sells'
import TIM from 'tim-js-sdk' //web环境
// import TIM from 'tim-wx-sdk' 小程序环境
const tls = new TIMLiveSell({
SDKAppID: 1400***803,
roomID: '@TGS#E****NVLGE',
userSig: 'eJwtzM9****-reWMQw_',
userName: 'Ho***st',
TIM: TIM
})
五、组件回调
- TLS.EVENT.SDK_READY
- 组件已经初始化好,对应于im sdk的TIM.EVENT.SDK_READY,这个时候才可以调用sdk的方法
tls.on(TLS.EVENT.SDK_READY, async() => {
})
- TLS.EVENT.ROOM_STATUS_CHANGE
- 房间状态改变,如主播上(下)线,暂停等
tls.on(TLS.EVENT.ROOM_STATUS_CHANGE, async(data) => {
}
- TLS.EVENT.JOIN_GROUP
- 有人加入群聊时触发
tls.on(TLS.EVENT.JOIN_GROUP, async(data) => {
const {nick,avatar,userID} = data
})
- TLS.EVENT.EXIT_GROUP
- 有人退出群聊时触发
tls.on(TLS.EVENT.EXIT_GROUP, async(data) => {
const {nick,avatar,userID} = data
})
- TLS.EVENT.NOTIFACATION
- 公告发生修改时触发
tls.on(TLS.EVENT.NOTIFACATION, async(data) => {
const { notification } = data
})
- TLS.EVENT.MESSAGE
- 有人发送群消息时触发
- 备注:自己发送的消息不会在这个回调里,自己发送的消息上屏请使用sendMessage方法返回的数据,这里与im sdk保持一致。
tls.on(TLS.EVENT.MESSAGE, async(data) => {
const { nick,avatar,message,userID } = data
})
- TLS.EVENT.LIKE
- 有人给主播点赞是触发
tls.on(TLS.EVENT.LIKE, async(data) => {
const { nick,avatar,value,userID } = data
})
- TLS.EVENT.SEND_GIFT
- 有人给主播送礼时触发
tls.on(TLS.EVENT.SEND_GIFT, async(data) => {
const { nick,avatar,value,userID } = data
})
- TLS.EVENT.ATTENT
- 有人关注主播时触发
tls.on(TLS.EVENT.ATTENT, async(data) => {
const { nick,avatar,value,userID } = data
})
- TLS.EVENT.BUY_GOODS
- 有人购买商品是触发
tls.on(TLS.EVENT.BUY_GOODS, async(data) => {
const { nick,avatar,value,userID } = data
})
- TLS.EVENT.USE_COUPON
- 有人领取优惠券是触发
tls.on(TLS.EVENT.USE_COUPON, async(data) => {
const { nick,avatar,value,userID } = data
})
- TLS.EVENT.ADD_GOODS
- 该直播中所推荐的商品发生改变是触发
tls.on(TLS.EVENT.ADD_GOODS, async(data) => {
const { nick,avatar,value } = data
})
- TLS.EVENT.KICKED
- 账号其他地方登录时触发
tls.on(TLS.EVENT.KICKED, async() => {
})
- TLS.EVENT.NETWORK_CHANGE
- 网络发生改变时触发
tls.on(TLS.EVENT.NETWORK_CHANGE, async() => {
})
- TLS.EVENT.SDK_NOT_READY
- sdk不可用时触发
tls.on(TLS.EVENT.SDK_NOT_READY, async() => {
})
- TLS.EVENT.PROFILE_UPDATE
- 个人资料发生修改是触发
tls.on(TLS.EVENT.PROFILE_UPDATE, async() => {
})
- TLS.EVENT.ERROR
- sdk发生错误时触发
tls.on(TLS.EVENT.ERROR, async(error) => {
})
- ${type}
- 在调用自定义消息时触发的同名事件
tls.on(`${type}`, async(error) => {
})
六、组件方法
- sendMessage(message:string)
- 方法说明:发送弹幕消息
/**
* 发送弹幕消息,调用此方法时,群类所有人都可收到该文本消息
* @method sendMessage
* @for TLS
* @param msg 必填 弹幕消息
* @returns Promise
*/
const {nick,avatar,message} = await tls.sendMessage(msg);
- like(key:string,extension?:string)
- 方法说明:给主播点赞
- Key,触发事件的名字
- extension:点赞时的附加信息,如用户等级
/**
* 发送点赞消息,调用此方法时,群内所有人都可收到该点赞消息
* @method like
* @for TLS
* @param key 触发事件的名字
* @param extension 非必填 点赞时附加信息
* @returns Promise
*
*/
const {nick,avatar} = await tls.like(key,extension);
//代码示例
const {nick,avatar} =await tls.like('customLike','someData') //用户发送点赞
//监听其他用户点赞
tls.on('customLike',async({extension})=>{
console.log(extension) // someData
})
- gift(key:string,extension?:string)
- 方法说明:给主播送礼
- key 触发事件的名字
- extension:送礼时的附加信息,如礼物信息等
/**
* 发送送礼消息,调用此方法时,群内所有人都可收到该送礼消息
* @method gift
* @for TLS
* @param msg 非必填 送礼时附加信息
* @returns Promise
*/
const {nick,avatar} = await tls.gift(extension);
//代码示例同like方法
- exitRoom()
- 方法说明:退出直播间
/**
* 退出房间,主播(群主)不可退出房间
* @method exitRoom
* @for TLS
* @param
* @returns Promise
*/
const {status} = await tls.exitRoom();
- joinRoom()
- 方法说明:加入直播间
/**
* 加入房间
* @method joinRoom
* @for TLS
* @param
* @returns Promise
*/
const {userInfo,groupInfo} = await tls.joinRoom();
const { ownerInfo } = groupInfo;//获取主播信息
const { userID,nick,avatar } = ownerInfo
- getRoomInfo()
- 方法说明:获取当前房间信息
/**
* 获取该聊天室的基本信息
* @method getRoomInfo
* @for TLS
* @param
* @returns Promise
*/
const {...ownerInfo} = await tls.getRoomInfo();
//ownerInfo 为主播相关信息
const { userID,nick,avatar } = ownerInfo
- attention()
- 方法说明:关注主播
/**
* 关注主播
* @method attention
* @for TLS
* @param
* @returns Promise
*/
const {nick,avatar} = await tls.attention();
- cancelAttention()
- 方法说明:取消关注主播
/**
* 取消关注
* @method cancelAttention
* @for TLS
* @param
* @returns Promise
*/
const {nick,avatar} = await tls.cancelAttention();
- destroy()
- 方法说明:销毁组件
/**
* 销毁组件
* @method destroy
* @for TLS
* @param
* @returns Promise
*/
tls.destroy();
- sendCustomMsgAndEmitEvent(eventName: string, extension?: string)
- 方法说明:发送自定义消息,并触发和type类型的回调事件
- eventName:事件名
- extension:自定义消息法人附带信息
/**
* 发送自定义消息,并触发同名事件
* @method destroy
* @for TLS
* @param eventName:事件名,someExtension:附加信息
* @returns Promise
*/
await tsl.sendCustomMsgAndEmitEvent('eventName','someExtension')
七、内置对象
- tim 通过TIM.create创建的对象,可使用TIM所有的方法 可参考全部API
/**
* 对外暴露的实例化好的tim对象,可以直接调用tim下的所有方法
* 例如:退出登录
*/
this.tls.tim.logout()
八、事件
- EVENT
- TLS.EVENT.SDK_READY
- TLS.EVENT.JOIN_GROUP
- TLS.EVENT.EXIT_GROUP
- TLS.EVENT.NOTIFACATION
- TLS.EVENT.MESSAGE
- TLS.EVENT.PROFILE_UPDATE
- TLS.EVENT.ERROR
- TLS.EVENT.KICKED
- TLS.EVENT.NETWORK_CHANGE
- TLS.EVENT.SDK_NOT_READY
- TLS.EVENT.LIKE
- TLS.EVENT.BUY_GOODS
- TLS.EVENT.USE_COUPON
- TLS.EVENT.SEND_GIFT
- TLS.EVENT.ATTENT
- TLS.EVENT.ADD_GOODS