久滴直播电商平台 · 技术博客系列 第 10 篇 标签直播带货营销联动秒杀推送前言直播 电商的核心价值在于用户在观看直播的同时可以直接下单购买商品主播通过口播和演示带动销售。但这个场景有一个技术挑战——直播系统和商城系统是两个独立的业务域如何让它们协同工作当主播在直播间里说3、2、1上链接时后台需要在毫秒级别完成查询商品营销活动状态 → 构造秒杀消息 → 通过 IM 推送到直播间弹幕流 → 前端弹出商品卡片。本文将拆解久滴直播电商平台的直播营销联动全链路实现。目录直播 电商的核心矛盾LiveMarketingService商品营销信息聚合秒杀推送到直播群优惠券推送与领取前端直播间商品展示完整调用链路1. 直播 电商的核心矛盾直播系统和商城系统各自独立运转直播系统管理直播间、推拉流、IM 弹幕、录制回放商城系统管理商品SPU/SKU、库存、订单、营销活动秒杀/优惠券两者的交叉点在于直播间需要展示关联的商品列表秒杀活动开始时需要通知直播间所有观众商品需要有直播专属价格和展示顺序解耦方案通过LiveMarketingService作为中间层调用两个域的 API 接口聚合数据而不是让两个系统直接耦合。2. LiveMarketingService商品营销信息聚合LiveMarketingService是直播营销联动的核心服务负责查询直播间商品的营销活动状态publicinterfaceLiveMarketingService{// 查询直播间商品的营销信息秒杀/优惠券状态ListLiveProductPromotionRespVOgetLiveProductWithPromotion(LongliveId);// 推送秒杀活动到直播群voidpushSeckillToLiveGroup(LongliveId,LongseckillActivityId);// 推送优惠券到直播群voidpushCouponToLiveGroup(LongliveId,LongcouponTemplateId);}商品营销信息聚合的实现OverridepublicListLiveProductPromotionRespVOgetLiveProductWithPromotion(LongliveId){// 1. 查询直播间关联的商品列表ListLiveProductBaseInfoDOliveProductsliveProductBaseInfoService.getLiveProductByLiveId(liveId);// 2. 批量获取 SPU 信息ListLongspuIdsliveProducts.stream().map(LiveProductBaseInfoDO::getSpuId).distinct().collect(Collectors.toList());MapLong,ProductSpuRespDTOspuMapproductSpuApi.getSpuMap(spuIds);// 3. 遍历商品查询每个 SPU 的营销活动信息ListLiveProductPromotionRespVOresultnewArrayList();for(LiveProductBaseInfoDOliveProduct:liveProducts){LongspuIdliveProduct.getSpuId();LiveProductPromotionRespVOvonewLiveProductPromotionRespVO();vo.setSpuId(spuId);vo.setSpuName(spuMap.get(spuId).getName());// 3.1 查询秒杀活动SeckillActivityRespApiDTOseckillActivityseckillActivityApi.getMatchSeckillActivityBySpuId(spuId);if(seckillActivity!null){vo.setHasSeckill(true);vo.setSeckillActivityId(seckillActivity.getId());vo.setSeckillStock(seckillActivity.getStock());}// 3.2 查询优惠券ListCouponTemplateRespApiDTOcouponTemplatescouponApi.getCouponTemplateListBySpuId(spuId);if(couponTemplates!null!couponTemplates.isEmpty()){vo.setHasCoupon(true);vo.setCouponTemplateId(couponTemplates.get(0).getId());vo.setCouponName(couponTemplates.get(0).getName());}result.add(vo);}returnresult;}这段代码做了一件关键的事跨模块聚合数据——从直播模块查商品关联、从商城模块查 SPU 信息、从营销模块查秒杀和优惠券状态最终组装成一个统一的响应对象。3. 秒杀推送到直播群当主播触发开始秒杀时系统向直播间群推送系统通知OverridepublicvoidpushSeckillToLiveGroup(LongliveId,LongseckillActivityId){// 1. 获取直播间对应的群 IDstreamName GroupIdStringgroupIdgetGroupIdByLiveId(liveId);if(groupIdnull){log.warn(未找到直播间对应的群组 liveId{},liveId);return;}// 2. 查询秒杀活动详情SeckillActivityRespApiDTOactivityseckillActivityApi.getSeckillActivity(seckillActivityId);// 3. 构造消息文本StringcontentString.format(【秒杀活动】%s 火热进行中限时抢购手慢无,activity.getName());// 4. 通过 IM Provider 推送到群tencentService.sendGroupSystemMessage(groupId,content);}关键设计getGroupIdByLiveId方法通过LiveBaseInfoDO.streamName获取群组 ID——因为创建直播时streamName就被设为 IM 群的GroupId实现了天然的绑定关系。4. 优惠券推送与领取优惠券推送逻辑类似秒杀OverridepublicvoidpushCouponToLiveGroup(LongliveId,LongcouponTemplateId){StringgroupIdgetGroupIdByLiveId(liveId);CouponTemplateRespApiDTOtemplatecouponApi.getCouponTemplate(couponTemplateId);StringcontentString.format(【优惠券福利】%s 已上线快来领取吧,template.getName());tencentService.sendGroupSystemMessage(groupId,content);}管理后台通过POST /txlive/marketing/push-activity接口触发推送RestControllerRequestMapping(/txlive/marketing)publicclassAppLiveMarketingController{PostMapping(/push-activity)publicCommonResultBooleanpushActivityToLiveGroup(RequestBodyLiveMarketingPushReqVOreqVO){if(reqVO.getActivityType()1){liveMarketingService.pushSeckillToLiveGroup(reqVO.getLiveId(),reqVO.getActivityId());}elseif(reqVO.getActivityType()2){liveMarketingService.pushCouponToLiveGroup(reqVO.getLiveId(),reqVO.getTemplateId());}returnsuccess(true);}}5. 前端直播间商品展示UniApp 端的popup-prods.vue组件展示直播间商品列表包含商品卡片、价格、秒杀标签和购买按钮// 商品购买策略单 SKU 直接加购多 SKU 弹规格选择constaddCartOrBuyasync(item:ILiveSpuItem,isAddCarttrue){if(!store.isLogin){returnnavigateTo(pkg-common/login)}awaitgetSpuDetail(item.id)if(!item.specType){// 单规格直接加购或购买if(isAddCart){onAddCart()}else{onBuy()}}else{// 多规格弹出 SKU 选择弹窗popupSpecificationRef.value?.open()}}// 加入购物车constonAddCartasync(){awaitaddCartApi({skuId:settlementSku.value?.id,count:prodCount.value,})showToast(已添加至购物车)}// 直接购买存本地存储跳提交订单页constonBuy(){uni.setStorageSync(StorageKeyEnum.PROD_ORDER_INFO,{prodInfoList:[{picUrl,name,price,count,spuId}],items:[{skuId,count}],})navigateTo(pkg-mall/submit-order)}系统通知在弹幕组件中以特殊样式展示竖排系统通知四个字view classmsg-detail v-ifnotification text classmsg-detail-username v-for(i, idx) in 系统通知 :keyidx{{ i }}/text text classmsg-detail-content sys-content{{ notification }}/text /view6. 完整调用链路管理后台/主播端 → POST /txlive/marketing/push-activity → AppLiveMarketingController.pushActivityToLiveGroup() → LiveMarketingService.pushSeckillToLiveGroup() → ImProviderSPI.sendGroupSystemMessage(groupId, content) → 腾讯云 IM REST API → 客户端 MESSAGE_RECEIVED 事件 → live-chat.vue 渲染系统通知 → 用户点击 → popup-prods.vue 弹出商品列表 → addCartOrBuy → 加购/下单总结本文拆解了久滴直播电商平台的直播营销联动全链路LiveMarketingService 中间层跨直播域和商城域聚合数据避免两个系统直接耦合秒杀/优惠券推送通过sendGroupSystemMessage将营销信息推送到直播间弹幕流streamName GroupId直播间与 IM 群的天然绑定简化推送路由前端商品展示单 SKU 直接加购、多 SKU 弹规格选择系统通知特殊样式展示下一篇我们将走进 UniApp 跨端开发看看一套代码如何跑通微信小程序、H5 和 App。久滴直播电商平台是一个基于 Spring Boot 3 Vue3 UniApp 的全栈开源直播电商解决方案。 giteehttps://gitee.com/live-mall-pro/communityCommunity 版如果觉得本文对你有帮助欢迎 Star ⭐ 支持