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手势冲突的问题。