直播带货组件是对直播带货场景中使用即时通信 IM 能力的二次封装，在封装基本的收发消息能力的同时，针对直播带货场景封装了点赞、送礼、商品推送和优惠券领取等相关能力。相关 SDK 下载，请参见 SDK 下载。

前置条件

创建即时通信 IM 应用创建群成员自定义字段attent：记录自己关注了哪些主播创建群自定义字段add_goods ：后台上架新的直播间商品列表room_status：控制直播间状态

引入直播带货 SDK

npm i im-live-sells --save

组件参数

SDKAppID
即时通信应用 ID，SDKAppID 可在 即时通信 IM 控制台 上创建应用，SDKAppID 可在应用基本信息模块获取，开始创建的应用为体验版，可永久免费试用，但配置有限，不适合正式环境试用。正式环境可购买旗舰版或专业版。userSig
即时通信 IM 用户签名，UserSig 为登录腾讯云即时通信 IM SDK 的必要参数，可在业务后台生成后返回给前端使用，生成文档与代码可参考 生成 UserSig。roomID
直播间群聊房间 ID，此 ID 为即时通信 IM 所创建的实时音视频（AVCHATROOM）房间 ID，该房间无加入人数限制可通过 即时通信 IM 的 群组管理 创建，或通过 restapi 创建。TIM
即时通信 IM SDK，如是在小程序环境，请使用 tim-wx-sdk；web 环境则使用 tim-js-sdk。userName
与生成 userSig 的 userName 一致。

初始化示例

import TSL 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})

组件回调

TSL.EVENT.SDK_READY

组件已初始化，对应于 im sdk 的 TIM.EVENT.SDK_READY，此时才可以调用 sdk 的方法。

tls.on(TSL.EVENT.SDK_READY, async() => {
})

TSL.EVENT.ROOM_STATUS_CHANGE

房间状态改变，如主播上/下线、暂停等

tls.on(TSL.EVENT.ROOM_STATUS_CHANGE, async(data) => {
})

TSL.EVENT.JOIN_GROUP

有人加入群聊时触发

tls.on(TSL.EVENT.JOIN_GROUP, async(data) => {  const {nick,avatar,userID} = data})

TSL.EVENT.EXIT_GROUP

有人退出群聊时触发

tls.on(TSL.EVENT.EXIT_GROUP, async(data) => {  const {nick,avatar,userID} = data})

TSL.EVENT.NOTIFACATION

公告发生修改时触发

tls.on(TSL.EVENT.NOTIFACATION, async(data) => {  const { notification } = data})

TSL.EVENT.MESSAGE

有人发送群消息时触发说明自己发送的消息不会在这个回调中，自己发送的消息上屏请使用 sendMessage 方法返回的数据，这里与 im sdk 保持一致。

tls.on(TSL.EVENT.MESSAGE, async(data) => {  const { nick,avatar,message,userID } = data})

TSL.EVENT.LIKE

有人给主播点赞时触发

tls.on(TSL.EVENT.LIKE, async(data) => {  const { nick,avatar,value,userID } = data})

TSL.EVENT.SEND_GIFT

有人给主播送礼时触发

tls.on(TSL.EVENT.SEND_GIFT, async(data) => {  const { nick,avatar,value,userID } = data})

TSL.EVENT.ATTENT

有人关注主播时触发

tls.on(TSL.EVENT.ATTENT, async(data) => {  const { nick,avatar,value,userID } = data})

TSL.EVENT.BUY_GOODS

有人购买商品时触发

tls.on(TSL.EVENT.BUY_GOODS, async(data) => {  const { nick,avatar,value,userID } = data})

onUseCoupon
有人领取优惠券时触发

tls.on(TSL.EVENT.USE_COUPON, async(data) => {  const { nick,avatar,value,userID } = data})

TSL.EVENT.ADD_GOODS

该直播中所推荐的商品发生改变时触发

tls.on(TSL.EVENT.ADD_GOODS, async(data) => {  const { nick,avatar,value } = data})

TSL.EVENT.KICKED

账号其他地方登录时触发

tls.on(TSL.EVENT.KICKED, async() => {
})

TSL.EVENT.NETWORK_CHANGE

网络发生改变时触发

tls.on(TSL.EVENT.NETWORK_CHANGE, async() => {
})

TSL.EVENT.SDK_NOT_READY

sdk 不可用时触发

tls.on(TSL.EVENT.SDK_NOT_READY, async() => {
})

TSL.EVENT.PROFILE_UPDATE

个人资料发生修改时触发

tls.on(TSL.EVENT.PROFILE_UPDATE, async() => {
})

TSL.EVENT.ERROR

sdk 发生错误时触发

tls.on(TSL.EVENT.ERROR, async(error) => {
})

${type}

在调用自定义消息时触发的同名事件

tls.on(`${type}`, async(error) => {
})

组件方法

sendMessage(message:string)

方法说明：发送弹幕消息

/** * 发送弹幕消息，调用此方法时，群类所有人都可收到该文本消息 * @method sendMessage * @for TSL * @param msg 必填 弹幕消息 * @returns Promise */const {nick,avatar,message} = await tls.sendMessage(msg);

like(extension?:string)

方法说明：给主播点赞extension：点赞时的附加信息，如用户等级

/** * 发送点赞消息，调用此方法时，群内所有人都可收到该点赞消息 * @method like * @for TSL * @param extension 非必填 点赞时附加信息 * @returns Promise */const {nick,avatar} = await tls.like(extension);

gift(extension?:string)

方法说明：给主播送礼extension：送礼时的附加信息，如礼物信息等

/** * 发送送礼消息，调用此方法时，群内所有人都可收到该送礼消息 * @method gift * @for TSL * @param msg 非必填 送礼时附加信息 * @returns Promise */const {nick,avatar} = await tls.gift(extension);

exitRoom()

方法说明：退出直播间

/** * 退出房间，主播（群主）不可退出房间 * @method exitRoom * @for TSL * @param  * @returns Promise */const {status} = await tls.exitRoom();

joinRoom()

方法说明：加入直播间

/** * 加入房间 * @method joinRoom * @for TSL * @param  * @returns Promise */const {userInfo,groupInfo} = await tls.joinRoom();const { ownerInfo } = groupInfo;//获取主播信息const { userID,nick,avatar } = ownerInfo

getRoomInfo()

方法说明：获取当前房间信息

/** * 获取该聊天室的基本信息 * @method getRoomInfo * @for TSL * @param  * @returns Promise */const {...ownerInfo} = await tls.getRoomInfo();//ownerInfo 为主播相关信息const { userID,nick,avatar } = ownerInfo

attention()

方法说明：关注主播

/** * 关注主播 * @method attention * @for TSL * @param  * @returns Promise */const {nick,avatar} = await tls.attention();

cancelAttention()

方法说明：取消关注主播

/** * 取消关注 * @method cancelAttention * @for TSL * @param  * @returns Promise */const {nick,avatar} = await tls.cancelAttention();

destroy()

方法说明：销毁组件

/** * 销毁组件 * @method destroy * @for TSL * @param  * @returns Promise */tls.destroy(); 

sendCustomMsgAndEmitEvent(eventName: string, extension?: string)

方法说明：发送自定义消息，并触发和 type 类型的回调事件eventName：事件名extension：自定义消息发送者附带信息

/** * 发送自定义消息，并触发同名事件 * @method destroy * @for TSL * @param eventName:事件名，someExtension：附加信息 * @returns Promise */await tsl.sendCustomMsgAndEmitEvent('eventName','someExtension')

内置对象

TIM 通过 TIM.create 创建的对象，可使用 TIM 所有的方法。

事件

EVENTTLS.EVENT.SDK_READYTLS.EVENT.JOIN_GROUPTLS.EVENT.EXIT_GROUPTLS.EVENT.NOTIFACATIONTLS.EVENT.MESSAGETLS.EVENT.PROFILE_UPDATETLS.EVENT.ERRORTLS.EVENT.KICKEDTLS.EVENT.NETWORK_CHANGETLS.EVENT.SDK_NOT_READYTLS.EVENT.LIKETLS.EVENT.BUY_GOODSTLS.EVENT.USE_COUPONTLS.EVENT.SEND_GIFTTLS.EVENT.ATTENTTLS.EVENT.ADD_GOODS

对解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案