Hybird动态布局，提升3倍开发效率的玩法！

背景

2019年以来，语音市场火爆，映客，陌陌，斗鱼，now 等。大家都按照自己的风格做了多种模式和玩法，例如：电台，1托2，6+1，8+1，音视频结合等模式，以及相亲玩法、pk玩法。为了让花椒语音业务快速发展，并在行业内处于领先地位。我们针对语音多人连麦的业务场景，从技术层面设计了一套动态布局方案。使得花椒的产品和运营可以在只需要服务端和h5前端参与不需要客户端开发发版，很小的开发成本的情况下，快速上线一套全新的玩法，而且在任何时候、任何布局形态下实现多种玩法之间的无缝切换。

现有的花椒以及竞品的布局截图

花椒

竞品

技术介绍

下边我们来分享下花椒这一套整体方案。简单的说，就相当于客户端安卓和iOS在直播间里边实现了一个os，而把操作布局和数据的能力开放给服务端和h5前端。所有的业务逻辑和活动逻辑全部由服务端和h5前端来实现，并驱动客户端做布局展示。

那么这样设计会给我们带来什么好处呢？

1. 简化了开发流程，由原来一个活动由三端共同参与，变成只需要服务端和h5前端，甚至只需要h5前端参与就可以完成。

2. 节省了iOS和安卓开发资源，客户端只需要提供基础能力，无需参与后续活动和玩法的开发。

3. 节省了上线的时间成本，以及新布局玩法上线后客户端铺量的时间成本。

4. 不用考虑客户端新老版本兼容的问题，新玩法服务端和前端h5上线后，所有线上客户端语音房间均可以开启。

5. 玩法更灵活多样，多种布局玩法可以随意切换。让运营快速的实现自己的运营策略，用户可以在直播间得到非常流畅的用户体验。

6. 布局类似html/css 服务端前端上手快，代码量少。

客户端直播间

说了这么多我们来分享下直播间的设计原理。直播间有很多层级，比如：小礼物层级，大礼物层级，布局层级，h5互动层等。我们把布局层的绘制权限交给了h5和服务端。

如下图中红框区域：

在这个区域服务端可以通过三端布局约定，初始化客户端原生的控件和一些客户端封装好的控件。如大家所知，其实每一个复杂布局界面是由多个简单控件组成的，例如：label, button, image 等。那么，就把创建最基础的控件的能力开放给服务端和h5前端，还有和业务相关的能力，比如：连麦的推拉流能力。让服务端和h5前端可以在特定画布上想实现什么布局，就实现什么布局。

具体如何，我们拿label为例：

三个概念

基础属性

在每个控件中，我们都开放了很多基础属性，如例子，layout中的t，l，textColor，text 等。客户端会根据name创建出来控件并给每个基础控件负值不同属性，如layout，text，bgColor，textColor。每个基础控件都有不同的基础属性，提供了业务更灵活的选择。

层级

如客户端写布局，有层级概念一样。我们的js布局信息也遵循了这个理念。这样再复杂的视图，都可以通过层级嵌套来实现。

数据交互

核心问题来了，有人会说，布局这个东西很好实现，现在业内也有很多动态布局的方案，如RN，flutter，七巧板等等，数都数不过来。如何实现，展示能数据随时变化，随着业务的需求而变化？

如上边label例子中，text字端是用于展示的文本，他的数据来源在data数据中，他是通过一个表达式来表示的 sync:p_user.user[seat=0].user.nickname。那么，每当我们需要展示数据的时候，会根据这个表达式索引到内存中第0个座位上用户的nickname字端。当业务上有变化的时候，我们可以更新这个表达式，引导到其他服务端下发数据用于展示。这样就可以根据不同的业务场景显示不同内容。

三个机制

sync机制

服务端会将布局信息，以及所有的需要展示的数据通过这个接口下发，客户端进行缓存后续使用。如之前例子，label中的text字端，就是到sync接口中下发的p_user字段中去取。

消息机制

很多业务变化，布局玩法，数据源的切换都是通过消息机制触发的。比如直播间要从普通布局切换成相亲玩法，服务端就会通过消息下发到客户端，更新客户端本地的布局信息，数据源信息。

通过js接口和web端通信

web端一个很重要的业务逻辑处理和展示区域，如上边我们说的直播间层级，h5的互动层级是高于布局层的。所以在我们可以灵活的根据每种布局，设计不同的h5玩法。

三端之间的交互关系

如图所示：

1. 为了保证客户端和h5前端的布局信息的一致性，h5前端不会直接和服务端直接交互取布局信息，布局信息都是通过客户端主动的消息透传和h5通过js接口从客户端取，来实现h5互动层级的各种玩法逻辑。

2. 为了保证灵活性，操作客户端布局的能力通过消息，sync接口和js接口同时开放给服务端和h5前端。

3. 为了保证数据的正确性，采用了消息为主，sync补刀同步。

开发流程

通过上述的技术设计理念，我们就可以将所有的活动业务逻辑放到服务端和h5前端实现，客户端只是负责展示。在业务开发流程上更加简化。

成品效果

下边是我们最新将要上线的成品团战玩法效果，大家敬请期待。

关注我们