Weex如何支撑200w+同时在线的优酷猫晚直播？

阿里妹导读：天猫双十一已经成为被大众普遍接受的文化符号，而猫晚则是连接线下线上的重要节点。2017年天猫晚会的前台直播任务被交给了优酷来承担。 优酷直播，优酷主客团队，优酷架构组等多方组成了联合项目组，合力承担优酷双十一猫晚直播的开发任务。 

虽然优酷直播在线上已经有业务稳定运行，但是我们还是遇到了大量问题需要解决。

除开直播晚会现场这个最重要的功能之外，晚会项目组还规划了点赞/分享有礼，竞猜，开宝箱，红包雨等五花八门的互动玩法，需要在原有的Native直播间上增加大量的功能。

更加雪上加霜的是，晚会的招商并未结束，对直播会场的需求一直在变化。特别是直播会场换肤的需求可能导致会场的框架结构发生大幅度变化，用老的Native直播间应对这种需求变化比较困难。

所以我们决定用Weex重写一个新的优酷直播间，全面还原当前的Native直播间的业务，同时添加对各种双十一互动玩法的支撑。老的Naitve直播间仅仅作为降级的备用直播间。

在开始正式工作之前，我们的第一件事情是划分功能模块，确定哪些模块用Weex sdk或者aliweex自带的原生组件实现, 哪些模块需要把现有的Native代码封装为一个Weex Component供Weex业务代码引用。

上图即为双十一优酷直播间的最终形态，其大致的技术架构图和功能如下图所示。

经过评估，我们做出如下模块划分：

会场框架: 由Weex业务代码搭建

回看列表tab: 是一个包含图文的视频列表，由Weex原生实现

聊天tab: 包含了大量聊天气泡动效和复杂的业务逻辑，将原有的聊天室Native代码封装为Weex Component

图文直播tab：包含了投放图片，文字，视频，商品链接等复杂的逻辑，将原有的Native代码封装为Weex Component

播放器组件：将原有的优酷直播播放器Native代码封装为Weex Component

点赞标签： 这个组件被点击或者收到服务端推送的互动消息时会飘出大量的动画，我们的选择是将原有的Native代码封装为Weex component

自定义Tab: 这个组件我们自行封装了一个webview的Component，包含多种功能

1) 利用百川能力加载淘宝商品，实现边看边买 2) 加载互动h5页面，实现红包雨，竞猜等功能 3) 加载阿里星球投放的H5页面等

其余的跳转，分享，监控埋点等功能模块封装为Weex Module供Weex业务代码使用

在功能模块拆分完毕之后，整个直播间已经完全成为组件化，模块化的，可以随意地组合，分解，定制。

无论未来的会场设计如何变化，只要编写新的会场皮肤，根据需要嵌入各种自定义标签，就能组合出需要的直播会场。

运营同学在优酷直播中台的投放系统编辑主持人话题，换肤，红包雨等互动消息后，具体的投放信息会被服务端填入互动玩法动态模板，通过PowerMsg通道下发到端上; 当端上收到此类互动消息之后，直接通过globalEvent发给Weex直播会场，会场解析收到的字段后，根据指令显示主持人话题，拉起宝箱，红包雨页面等。

与一般情况下的Weex页面降级到H5页面不同，我们的降级逻辑是发生加载/跳转/运行异常时，从Weex直播间跳转到Native直播间; 所以我们没有沿用Weex常见的降级逻辑，而是另外实现了一套downgrade逻辑。

在开发直播会场的过程中，我们遇到了tabbar框架和自定义Weex Component手势冲突的问题。

以双十一直播会场为基础，依据老的标准直播间样式重写了一份皮肤之后，Weex直播间已经在优酷直播业务中全量上线，老的Native直播间已经下线。我们为双十一Weex直播间开发的各种互动玩法已经落地为优酷直播的常态化运营手段。

此次双十一猫晚直播是优酷历史上采用Weex承接的规模最大的项目，也是阿里历史上直播在线人数最高的项目。在各部门的通力合作之下，整个晚会的直播任务运行平稳，没有出现任何意外情况。

在当前的双十一直播会场成果基础上，Weex直播间不仅承担了目前线上全部的优酷直播业务，还会承担即将到来的跨年晚会，春节联欢晚会的直播任务，直播团队还将推出更多酷炫的互动玩法，更加流畅的直播加载体验，敬请期待。

你可能还喜欢

关注「阿里技术」

把握前沿技术脉搏