教你如何快速集成小程序直播电商IM组件

第一代网红老罗和格力第一网红董小姐都纷纷踏上直播带货的道路了。

2020年4月2日，老罗在某音进行了第一场直播带货，3个小时的直播成交额达1.1亿，算是给老罗转型首秀交了一份不错的答卷。随即在5月10日，格力网红董小姐做了她个人生涯的第二场直播卖货，3小时直播成交额达3.1亿。从老罗和董小姐在直播间销售数据可见，直播带货这种商业模式的确能算是当下最成功的赚钱利器，追溯直播带货的起源，它由某宝在2019年初开发出来的一种商业模式，其旗下的某琦、某娅更是创造了5分钟卖15000只口红，开播两小时销售额达2.67亿这样的销售神话。而目前为止，各大短视频、网购平台，也都有自己的直播带货的专栏。有数据显示，2019年全国在线直播用户，5.04亿，2020年预计5.26亿，销售规模9160亿，占我国网络零售规模的8.7%，这意味着直播卖货有着万亿市场。

市场如此之大，直播带货的效果如此好，除了进驻各大直播平台进行直播以外，如何搭建自己的直播带货平台呢？

在阅读下面的文章之前，可先体验线上Demo，Demo小程序如下：

做项目之前，我们先开始需求分析，交互稿如下：

从交互稿上可以把需求一一梳理出来

●实现聊天室的功能

●实现公告功能

●用户加入群聊、退出群里提示

●后台上架新商品提示

●送礼提示

●后台上架新礼物提示

●点赞&点赞提示

●直播功能

●直播间状态控制控制功能

●…

分析需求可以看出，直播带货的核心功能分为即时通信IM能力和直播的能力，所以这里选用腾讯云即时通信IM与腾讯云直播作为需求实现的基础。

一、使用即时通信IM的AVChatroom来实现直播聊天室

聊天室是直播中很重要的一部分，用户可以在这里发送自己想说的话并且可以收到同一个聊天室中其他成员的消息，这就是即时通信IM的主要能力。

使用腾讯云即时通信IM首先需要到即时通信控制台去创建一个应用，刚创建的应用为体验版，后期可根据需求进行升级，创建应用如图所示：

创建好应用之后需要去创建一个群组。创建群组这一步可以在控制台创建或者通过官方提供的restapi由业务后台集成后创建，这里我们我们在控制台群组管理页面进行创建，如图所示：

根据即时通信群组的功能特性，在线直播场景我们选择创建互动直播聊天室类型的群，该类型的群成员数量无上限，能够覆盖人数较多的直播场景。

以上内容准备好后，可在业务前端调用即时通信终端（web、小程序、native）sdk，进行业务开发，对于直播场景sdk的使用，这里主要是用到了sdk的登录、用户资料、收发消息的能力。sdk里面有大量的功能，可参考IM SDK API。

二、使用自定义消息来实现点赞、送礼、购买等行为的消息通知

在直播的场景中，有比较多的消息需要即时反馈给群成员，来达活跃群热度的效果，例如有人送礼给主播，需要全员通知，可能还需要一个特别炫酷的动效来展现，这个全员通知的送礼消息可以用IM的自定义消息来实现，并且自定义消息可以携带额外信息，用户在发送送礼消息时，可以携带上礼物信息以及用户信息。同理，用户的点赞行为、购买商品行为、关注主播的行为等都可以用自定义消息来实现。自定义消息和IM中的文本消息和富文本消息有所不同，可以理解为用户发送的一种特殊消息，它仅仅是传递了一种特殊信号。比如需求中的送礼，就是像群成员传递出了用户送礼这样的一个信号。

sdk中发送自定义消息的代码如下:

三、使用群自定义字段来实现直播间上新商品、直播状态改变的消息通知

在直播带货场景中，经常会有主播推荐某款产品的时候，屏幕下方的商品位的商品就即时更改了。这里我们需要通知所有在直播中的用户，有新的商品上线了。和送礼消息有所不同，消息的触发者并非直播的公众，观看直播的同学可能会留意到，一般直播都会有一个小助手，这种消息是有小助手触发的。从技术角度来看，小助手触发这个商品上架的消息有两种方案：

●小助手在发送自定义消息

●小助手修改群资料

以上两种方案，直播群众的用户都会收到一条消息，但有两个区别:

●小助手发送自定义消息需要小助手本身在直播群中，但是小助手修改群资料则不需要；

●当群消息量太大时，IM后台会根据消息优先级返回消息，自定义消息的优先级低，所以这种方案可能会出现用户端商品刷新不及时的情况。

所以，商品的上架这种消息由修改群资料这样的方案来实现更好一点，但是修改群资料需要修改哪个字段呢？现有的字段都有其存在的意义，不能随意改变。这里IM提供了自定义群自定义字段这样的能力，来辅助实现这样的需求。

首先需要在控制台-功能配置上创建需要修改的自定义字段，如图：

这里需要注意两点：

●群组形态为AVChatRoom,也就是上面提到的互动直播群，只有该种形态的群，才能获取到这个字段；

●改字段的权限为所有用户可读，仅管理员账号可写(简单理解就是直播群中的所有用户都可以收到这个字段改变时的消息，但是只有管理员能改这个字段)。

最后一个问题，小助手通过什么样的方式，来修群资料呢？

小助手充当的是管理员的角色，管理员来做IM群资料相关的操作肯定用restapi了，这里直接贴出来修改群组资料。

群状态的改变和商品上架的原理一样，也是管理员修改群状态这个自定义字段来完成。

使用自定义字段时，在控制台配置好后，生效时间约十分钟，才可通过restapi或sdk进行读写。

四、使用群发消息后回调来实现用户等级统计

有同学还关注到，用户除了头像、昵称还有等级，实现用户等级这个需求，需要用到一些”事件监听“，比如用户发消息、送礼之后用户的成长等级需要增加，这样的需求怎么实现呢？

同样，IM回调配置实现了这样的功能,回调即IM后台在一定的条件下回调业务方后台，这里面有两个关键要素：

1、业务方后台怎么提供？

在业务IM控制台上有回调URL配置，这个回调URL即业务后台可调用的地址，在满足条件是由IM后台调用，并附带参数。

配置URL如图：

2、一定的条件是什么条件？

在IM的回调系统中，有很多场景提供了回调，如图：

通过回调，业务方可获取到用户在群组、关系链、单聊消息、在线状态等方面状态改变时的消息，根据在群聊中用户发普通文本消息、以及送礼消息来改变用户的等级。

五、通过安全打击来实现敏感词的拦截

安全打击能力一直是直播、社交、咨询领域中非常重要的能力，有多少APP因为涉黄、涉政而被相关部门强制下线。在直播大群中，如果涉嫌传播敏感内容，后果非常严重。当然在腾讯云中也集成了这样的能力。用户不管发送什么内容，都会先经过天御的安全扫面。同时，还支持自定义的敏感词打击。保证应应用健康的运行。

腾讯云即时通信IM支持基础的安全打击能力，可自定义敏感词配置需购买相应的安全套餐。

六、使用腾讯云直播控制台来生成拉流链接以及开始直播

直播这里需要关注两个点：

1、如何获取用户侧的直播播放链接（拉流链接）

在腾讯云直播地址生成器页面，生成拉流地址，如图：

2、如何开始直播（推流）

直播推流可复制下方文章链接参考，这里介绍其中一种推流方式 OBS推流。

https://cloud.tencent.com/document/product/267/32732

首先上OBS官网下载推流工具。

打开 OBS，可通过底部工具栏的【控件】>【设置】按钮进入设置界面。

打开 OBS，可通过底部工具栏的【控件】>【设置】按钮进入设置界面。

单击【推流】进入流设置页签，选择流类型为自定义流媒体服务器，以下图的推流地址为例:

将推流地址分两部分输入 URL 和流名称， URL 部分填写包含 Path 前的地址信息，流名称填写包含 StreamName 后的地址信息，所以参数设置为：

七、直播带货场景化SDK

前面所提到的，是基于直播带货这个场景。我们用自定义消息实现点赞、送礼、关注的提醒，用群自定义字段实现商品上架通知，群状态改变通知，基于此我们封装了一个场景化的sdk，在直播带货的场景，可简单的实现以上的功能。

复制并打开下方链接，即可查看：

https://www.npmjs.com/package/im-live-sells

八、重要资料汇总

即时通信IM控制台

https://console.cloud.tencent.com/im

即时通信IM WebSDK

https://imsdk1252463788.file.myqcloud.com/IM_DOC/Web/index.html

**即时通信IM RestAPI在线调试地址 **

https://avc.qcloud.com/im/APITester/APITester.html

即时通信IM直播电商场景接入指引

https://cloud.tencent.com/document/product/269/44527

营销从来不是件容易的事情。传统方式成本高，效果难以评估。直播带货无疑为各大商家突破了营销活动中的层层阻碍，将搜索渠道、触达渠道、下订渠道、评估渠道、运营渠道整合到了一起。整合就避免了渠道跳转带来的用户散失。所以直播带货是互联网时代整合营销的必备之选。

教你如何快速集成小程序直播电商IM组件相关推荐

拼团商城小程序高保真原型模板、支付、优惠券、客服、物流、收藏、足迹、优惠券、订单管理、评价、设置、地址、售后、拼团、消息通知、商城小程序、电商小程序、拼团电商、移动端电商、高保真电商、电商app
主要功能:首页:(轮播图.活动快速入口.商品推荐).搜索分类: 商品分类(三级显示).商品详情.拼团or单独购买.订单结算.拼团状态消息:(客服.通知.物流.活动)我的:收藏.足迹.优惠券.订单 ...
小程序在电商中的优势
小程序在电商中的优势 1.更加安全规范与传统电商相比,电商小程序运行更加方便快捷,且小程序上架具有唯一性,用户数据不会共享,可以建立自己的私域流量池.除此之外,使用线上支付既提升了支付效率,也提升了 ...
私域流量+小程序，电商引流新机会
在微信小程序的开发文档开头便有这么一句话:小程序并非凭空冒出来的一个概念.当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时,微信就有相关的 JS API 了. 现在,微信小程序依赖于 ...
微信小程序为电商插上翅膀
微信小程序从2017年1月上线开始到现在即将满2周岁了,而2018年可以说是微信小程序的爆发年,它也向我们展示了惊人的成长速度.据统计,截至到2018年9月底,已上线微信小程序超过200 微信小程序从 ...
小程序高级电商前端第1周走进Web全栈工程师＜二＞
业务对象的重要性: 在上一次小程序高级电商前端第1周走进Web全栈工程师<一>----小程序注册.开发工具推荐.<风袖>首页布局详尽分析.Webstorm开发小程序必配配置.m ...
小程序做电商的硬伤 “正规军”入驻草根望尘莫及
如今的天猫店.淘宝店渐渐成为品牌的天下,曾经在淘宝混的不错的中小卖家,能够坚守下去,把品牌做大的只有寥寥几家.而这个时候,微信小程序打算在移动电商市场再"搏"一把,对于中小卖家来说 ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
小程序高级电商前端第1周走进Web全栈工程师＜三＞----首页Banner、分类六宫格
继续接着上一次小程序高级电商前端第1周走进Web全栈工程师<二>的首页逻辑往下演示,上一次对于首页的主题已经处理完了: 接下来则来处理Banner: 接下来则来实现一下它. 获取Banne ...
小程序高级电商前端第2周深入理解REST API开发规范开启三端分离编程之旅＜一＞----优惠券、函数式编程、重构Theme
优惠券的一些基本概念: 在上一次小程序高级电商前端第1周走进Web全栈工程师<四>----自定义组件与Lin UI的小试牛刀已经使用Lin-UI完成了商品类别的展示,接下来则来实现它了: ...

教你如何快速集成小程序直播电商IM组件

教你如何快速集成小程序直播电商IM组件相关推荐

最新文章

热门文章