Alimei's introduction: Tmall Double Eleven has become a cultural symbol that is generally accepted by the public, and Maowan is an important node connecting offline and online. The front-end live broadcast of the 2017 Tmall Gala was handed over to Youku. Youku Live, Youku Host and Guest Team, Youku Architecture Team and other parties formed a joint project team to jointly undertake the development tasks of Youku Double Eleven Cat Night Live.
origin
Although Youku Live Online has a stable business operation, we still encounter a lot of problems that need to be solved.
In addition to the most important function of the live broadcast of the party, the party project team also planned a variety of interactive gameplays such as like/share courtesy, quiz, treasure box opening, red envelope rain, etc., which need to add a lot of functions to the original Native live broadcast room.
To make matters worse, the investment promotion of the party has not ended, and the demand for live broadcast venues has been changing. In particular, the need to change the skin of the live broadcast venue may lead to a substantial change in the frame structure of the venue. It is difficult to use the old Native live broadcast room to cope with this change in demand.
Therefore, we decided to use Weex to rewrite a new Youku live broadcast room to fully restore the business of the current Native live broadcast room, while adding support for various Double Eleven interactive gameplay. The old Naitve studio was only used as a downgraded backup studio.
Component packaging
Before starting the official work, the first thing we do is to divide the functional modules, determine which modules are implemented with the native components that come with Weex sdk or aliweex, and which modules need to encapsulate the existing native code into a Weex Component for Weex business code Quote.
The above picture is the final form of the Double Eleven Youku live broadcast room, and its general technical structure diagram and functions are shown in the following figure.
After evaluation, we make the following module divisions:
Venue framework: built by Weex business code
Look back list tab: is a video list containing pictures and texts, which is natively implemented by Weex
Chat tab: Contains a lot of chat bubble animation and complex business logic, encapsulates the original chat room Native code as Weex Component
Graphic and text live tab: It contains complex logic such as placing pictures, text, videos, product links, etc., and encapsulates the original Native code as Weex Component
Player component: encapsulate the original Youku live player native code as 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手势冲突的问题。
我们希望上下滑动的手势被当前tab接收，可以在当前列表中上下滑动
我们希望左右滑动的手势被tabbar接收，可以在不同的tab之间切换
但是结合使用tabbar和自定义Weex Component，要么上下左右手势全部被当前tab吃掉，导致无法在tab之间切换。要么上下左右手势都被tabbar吃掉，导致当前tab无法上下滑动
上图是Android View点击事件分发的简化逻辑
父View与子View同时可以滑动时就会产生滑动冲突, 常见套路的一种是在父View的onInterceptTouchEvent()做拦截：
public boolean onInterceptTouchEvent(MotionEvent event){
boolean intercepted = false;
switch(event.getActionMasked){
case MotionEvent.ACTION_DOWN:
intercepted = false;
break;
case MotionEvent.ACTION_MOVE:
if(父控件拦截){
intercepted = true;
}else{
intercepted =false;
}
break;
...
}
...
return intercepted;
}
最后我们的解法是重写了一个自定义Div标签, 将自定义Weex Component嵌入自定义Div标签中，自定义Div标签吃掉上下滑动手势并传给自定义Weex Component，将左右滑动手势抛出让身为父View的tabbar处理，这样就解决了这个手势冲突问题。
然而，直播会场的Weex代码使用了ExpressionBinding来优化滑动性能，新的解法导致ExpressionBinding失效了。
为了解决这个问题，我们又重写了Weex的WXGesture手势识别代码，覆盖掉WXComponent自带的默认手势识别代码，使得ExpressionBinding重新生效。
ExpressionBinding的执行顺序如下:
touchstart -> panstart -> ExpressionBinding panstart ->
ExpressionBinding panmove -> ExpressionBinding panend ->
touchend -> panend
其核心概念是检测出panstart事件，然后执行js层预先传下来的“手势处理逻辑”，而不是将识别出的手势传给js层处理。
我们对自定义Div标签和自定义Weex Component的修改使得ExpressionBinding识别不到panstart事件了。所以我们重写的WXGesture会在合适地方给自己所在的WXComponent发出：
WXGestureType.HighLevelGesture.HORIZONTALPAN
或者：
WXGestureType.HighLevelGesture.VERTICALPAN
事件，人为地触发ExpressionBinding的识别代码执行，最终使得ExpressionBinding可以与自定义Div标签和自定义的Weex Component协同工作。
转屏体验优化
之前优酷直播页面的转屏是直接将Activity转过来，然后让视频撑满屏幕; 若要恢复竖屏则把Activity再转回来，恢复vieoView为原始大小，让其余的布局显示出来。
由于新的Weex直播会场复杂度大大提高，切换横竖屏的体验变得很糟糕，每次切换之后画面要黑屏一会儿才能把布局重新显示出来。
经过多番尝试，我们采用如下的解法来提高体验：竖屏转横屏时，先记录下videoView的各种布局参数，然后将videoView从它的父View中取出，直接attach到当前Window的decorView上。横屏转回竖屏时，将videoView从decorView中取出，add到旧的父View中，然后重设各种布局参数。
经过这个优化之后，转屏体验被大大提升了; 即使在几年前的低端机器上，也能很快速地完成横竖屏切换动作。
视频圆角
如图所示，双十一直播会场的直播视频是嵌入到一个天猫电视机荧幕内的。实现方式是在自定义video标签之上覆盖一个天猫电视机图片，使得视频只从带圆角的框中露出。
这个实现方式在iOS端是没问题的，在Android上却失效了; 视频和图片的层级存在问题，在Android上视频的四个边角仍然会透出来，视觉上非常难看。
我们的解决办法是给自定义播放器组件添加"borderRadius"属性，将UED设计稿中的电视机图片圆角值量出来，设置给自定义video标签，把这个值透传到Native层，经过750px转换之后，将视频VideoView在Native端直接切出合适的圆角。
最终，呈现出来的带圆角视频画面与电视机图片的圆角完美契合，看上去就像是一体的。
页面渲染速度和体验优化
懒加载
Weex直播间是默认是竖屏的，但是也可以转屏幕进入横屏状态。最开始进入Weex直播间时，旧逻辑是同时初始化竖屏下的布局和横屏下的布局，耗时比较长。我们的修改是进入直播间时只初始化竖屏下需要的组件，将横屏下需要的组件延迟加载，真正需要时才创建和初始化。
优化冗余布局
优化减少Layout层级，将设置Visibility为gone的冗余View全部删除。
此外，Weex直播会场页也做了大量的层级/View精简的动作，两者结合起来最终使得加载体验有了很大的提高。
飘赞动画优化
直播间的点赞图标是一个Native封装的Weex Component，当用户手动点击或者收到其他用户的点赞推送时，点在图标会飘出若干个红心或者服务端下发的其他图片。
粗略一看点赞功能实现的没有什么问题，但是在晚会预演的高并发条件下问题就暴露出来了，由于用户量太大，点赞推送消息太多，Android端的点赞动画会变得非常卡顿。
我们的解决办法是做了一个Orange开关，在较低性能的机器上减少或者屏蔽飘赞动画；收到点赞消息推送后，不再立即飘出点赞动画，而是点赞数大于某个阈值，或者大于某个时间间隔才飘出动画，减少端上的渲染压力。
此外，我们注意到飘赞动画是飘出显示区域之后直接销毁，需要飘出新动画时再创建新的图片，我们有考虑引入对象池的技术预先分配一些动画帧并复用，但是由于时间关系未能发布到线上。
减轻服务端压力
1 zcache将Weex bundle JS，图片等静态资源通过zcache推送到客户端上。
（1） 减轻了猫晚当天，客户端请求服务端拉取资源的压力
（2）由于待请求的资源就在本地，大大提高了页面渲染的速度
（3） 提高了页面加载成功率
2 请求合并由于某些mtop接口功能庞杂，Weex和Native代码都要请求，且调用时序无法确定。我们封装了一个Mtop Weex module，兼顾mtop请求和DataPool的功能，Weex和Native代码都通过这个module来发出mtop请求；当某个请求发出之后，短期内对同一个接口的重复请求会被缓存; 第一个请求数据返回之后，结果会通知给所有被缓存的mtop请求方。通过这个小小的优化，我们将服务端QPS压力降低了十多万。
3 On the day of Mao Wan, only the minimum server interface is requested, and unnecessary interfaces such as "live broadcast preview subscription" are no longer requested.
Double 11 cat night live broadcast results
In the end, Youku's Double 11 live broadcast achieved good results:
1. Help Tmall Double 11, and guide users to click 6.55 million.
2. Maowan live streaming reached 2.09 million simultaneously.
We have added buried point information to the critical path of the live broadcast venue and the Youku live broadcast player. According to the statistical information:
residual temperature
Based on the Double Eleven live broadcast venue, after rewriting a skin according to the old standard live broadcast room style, the Weex live broadcast room has been fully launched in the Youku live broadcast business, and the old Native live broadcast room has been offline. The various interactive gameplays we developed for the Double Eleven Weex live broadcast room have been implemented as the normal operation method of Youku live broadcast.
The Double Eleven Cat Night live broadcast is the largest project undertaken by Weex in the history of Youku, and it is also the project with the highest number of live broadcasts in the history of Alibaba. With the full cooperation of various departments, the live broadcast of the whole party ran smoothly without any unexpected situation.
Based on the results of the current Double Eleven live broadcast venue, the Weex live broadcast room not only undertakes all the current online Youku live broadcast services, but also undertakes the live broadcast tasks of the upcoming New Year's Eve party and the Spring Festival Gala. The live broadcast team will also launch more More cool interactive gameplay and smoother live streaming experience, so stay tuned.
You might also like
How to "send" Fan Bingbing to your home?
The double 11 party's anti-sky technology was released for the first time
The road to intelligence for millions of physical and virtual network devices
Dr. Wang Jian's New Year's Eve speech:
Have you overlooked the greatest invention of mankind?
Follow "Ali Technology"
Grasp the pulse of cutting-edge technology